The Philosophy of AngularJS
AngularJS was designed to be testable end-to-end. It uses Dependency Injection In many of objects so that parts of it can easily be mocked. It is also designed to encourage you to break the functionality of your application into several smaller, more testable parts.
Angular is designed to extend HTML to make it the language you need for building complex web applications. Adding your own tags and attributes allows you to write simple HTML tags that do very complex things.
Let’s take a look at a very simple AngularJS app, that uses two-way data binding.
1 2 3 4 5 6
Let’s break this down line by line to explain what is happening:
<body ng-app>: all Angular code must be wrapper in this directive. This declares that everything within this tag will be treated as an angular application.
<input type='text' ng-model='name' />: This is one part of the data binding. Here we are using another directive, ng-model, to bind the input to a string. Note that in this example we also see that attribute directives can have arguments.
Modules are used to organize the objects in an AngularJS application. Modules can either be used as as the ‘core’ of an application, and contain all of the classes used for it, or they can be used to group several objects that have similar functionality. Let’s create a module for our application:
The first argument passed to
angular.module is the name of the module. We have passed that name to the
ng-app to bind everything contained in that directive to our module. The second argument is an array of other modules your module depends on. This is empty since we currently don’t have any. Much like directives, AngularJS contains several modules already built that you can include in your projects.
Now that we have a module, we will write our first type of AngularJS object, a controller.
Controllers are tied to particular html elements. They contain data and functions that the html can interact with, and can interact with other service objects, which can handle things such as communicating with the server. Let’s create a controller and bind it to a div in our application.
1 2 3
1 2 3 4 5 6
Here we’ve used the
ng-controller directive to bind our controller function to a div. Controllers get one argument by default which is called
$scope contains all of the data that the html can interact with. When you reload the page, you will notice that the input now starts with the field filled in with ‘Default Name’. This is because we set that variable in the controller, which is called when the page is loaded.
Functions can also applied to scope and then called inside the HTML. Angular contains several directives for handling various events. Let’s change our example to include a function that we will call with an
ng-click directive. We will add a button to save the name we create and later display the list.
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7
Now we can save a list of these people. We can use another directive called
ng-repeat To output a list of the people we have saved:
1 2 3
You have already seen directives in use in several places inside the application. You can also define your own directives as part of your application. Let’s create an alertable directive that will allow you to set a message to be alerted whenever you click on the element.
1 2 3 4 5 6 7 8 9 10
And now we an add this to our person list:
1 2 3
As you can see, directives return an object that will define the directive. There are several optional arguments that can be passed here, but let’s look at the two we used here:
restrict : This tells your directive what kind of directive it will be. restrict is required and there are four possible arguments that can be passed to it:
E : Element. example usage:
- A : Attribute. example usage:
- C : Class. example usage:
M : Comment. example usage:
<!-- directive:my-directive -->
link : The link function is responsible for adding event listeners and updating the dom.
You can read about some of the other possible options in the Angular directive documentation.
Services are classes that can either contain business logic or handle data. Now we are going to refactor our previous example and create a service that can handle the data in our list of people.
1 2 3 4 5 6 7 8
You’ll notice that services are created slightly differently than controllers. Controllers are just a function, where services are a function that returns an object. This allows you to add private methods to your service if you would like.
Now we need a way for our controller to have access to the service we just created. Since they are in the same module, this is very easy to do. This also involves one of the more “magical” features of Angular. To give the controller access to our service, we just have to add it as an argument to our controller, like so:
What’s really surprising is that if you change the order of the arguments to the controller function, it will not change how the controller function operates. So, if we did this instead:
When writing services, Angular provides some helpful modules for communicating with the server. Some of the most useful are ngHttp and ngResource. ngHttp is used to make HTTP requests. ngResource is an extension of ngHttp designed to work exclusively with REST APIs. This is another reason why when you are declaring a service, you are asked for a function that returns an object; We are able to use this function to extend an existing object like ngResource and return it.
Angular also provides support for routing with URLs. Routing is performed by using the
config function of the module. Let’s use this to structure separate pages for our main page, and give each person in our person list a profile page. Here is what the route provider will look like:
1 2 3 4 5 6 7 8 9 10
Filters are a smaller, but often useful part of AngularJS. Filters are used to transform data when it is displayed to the user. Like directives, you can build them yourself, and Angular also includes several useful ones built-in. Let’s look at the following HTML:
Which will look like this in the browser:
We can apply a couple filters to this to make it look different, by using the
And our output will now look like this:
I hope you found this helpful, but this is just scratching the surface of what Angular.js is capable of. If you would like to learn more about Angular, here are some resources for further reading:
- AngularJS Documentation - official documentation, lots of good examples
- EggHead.io - several short (usually 4 or 5 minute) videos explaining several particular parts of angular.
- BuiltWith AngularJS - examples of applications built with Angular
- A Comparison of Angular, Backbone, CanJS and Ember - a great article comparing AngularJS to some
If the form above doesn’t work, you can get it here.