AngularJS: an Overview

AngularJS is a JavaScript framework made by Google for building complex client-side applications. Angular’s killer feature is ‘directives’ that allow you to extend HTML by creating tags and attributes. Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the structure. Let’s take a look at the main components of AngularJS and how they work, and why you should strongly consider Angular for your next project.

The Philosophy of AngularJS

Data First

If you are familiar with JavaScript libraries like jQuery, using AngularJS will require a bit of a paradigm shift. AngularJS is like jQuery, but backwards. What I mean by that, is that jQuery focuses on DOM manipulation, and then you update data based on that. When writing Angular, you will mostly be updating data, and AngularJS updates the DOM for you, with a tiny amount work on your end.

Highly Testable

AngularJS was designed to be testable end-to-end. It uses Dependency Injection to make mocking of objects simple. It is also designed to encourage you to break the functionality of your application into several smaller, more testable parts.

Declarative HTML

Angular is designed to extend HTML to make it the language you need for building complex web applications. Adding custom tags and attributes allow you to write simple HTML tags that do very complicated things.

Data Binding

Let’s take a look at a very simple AngularJS app that uses two-way data binding.

&lt;body ng-app&gt; &lt;div&gt; &lt;input type='text' ng-model='name' /&gt; &lt;h2&gt;{{name}}&lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; 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.

: 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.

: 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. <h2>{{name}}</h2> : Whenever you type into the input box, this h2 tag updates automatically. This is the automatic DOM manipulation I mentioned earlier. We were able to do this without writing a single line of JavaScript.

Modules

Modules are used to organize the objects in an AngularJS application. Modules can either be used 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:

app = angular.module('myApp', []); &lt;body ng-app='myApp'&gt; 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 Controllers tie into 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. app.controller('mainCtrl', function($scope){ $scope.name = 'Default Name'; }); &lt;body ng-app='myApp'&gt; &lt;div ng-controller='mainCtrl'&gt; &lt;input type='text' ng-model='name' /&gt; &lt;h2&gt;{{name}}&lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; 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 . $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’, Because we set that variable in the controller and then the page loads that variable on load. Functions can also be 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. app.controller('mainCtrl', function($scope){ $scope.name = 'Default Name'; $scope.people = []; $scope.savePerson = function() { $scope.people.push($scope.name); $scope.name = ''; }; }); &lt;body ng-app='myApp'&gt; &lt;div ng-controller='mainCtrl'&gt; &lt;input type='text' ng-model='name' /&gt; &lt;button ng-click='savePerson()'&gt;Save Person&lt;/button&gt; &lt;h2&gt;{{name}}&lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; 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: &lt;ul&gt; &lt;li ng-repeat='person in people'&gt;{{person}}&lt;/li&gt; &lt;/ul&gt; Now that we have seen how we can manipulate data inside the JavaScript let’s look at how we can manipulate the DOM, by creating our own directives Directives You have already seen directives in use in several places inside the application. You can also define your directives as part of your application. Let’s create a directive called alertable directive that will allow you to set a message to be alerted whenever you click on the element. app.directive('alertable', function(){ return { restrict : 'A', link: function(scope, element, attrs) { element.bind('click', function() { alert(attrs.alertable); }); } }; }); And now we an add this to our person list: &lt;li ng-repeat='person in people'&gt; &lt;span alertable='{{person}}'&gt;{{person}}&lt;/span&gt; &lt;/li&gt; As you can see, directives return an object that will define the directive. There are several other optional arguments, 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:

: 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: <my-directive></my-directive>

Element. example usage: A : Attribute. example usage: <div my-directive></div>

: Attribute. example usage: C : Class. example usage: <div class='my-directive'></div>

: Class. example usage: M : Comment. example usage: <!-- directive:my-directive -->

: Comment. example usage: 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

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.