Getting started with AngularJS

Remarks#

AngularJS is a web application framework designed to simplify rich client-side application development. This documentation is for Angular 1.x, the predecessor of the more modern Angular 2 or see the Stack Overflow documentation for Angular 2.

Versions#

Version	Release Date
1.6.5	2017-07-03
1.6.4	2017-03-31
1.6.3	2017-03-08
1.6.2	2017-02-07
1.5.11	2017-01-13
1.6.1	2016-12-23
1.5.10	2016-12-15
1.6.0	2016-12-08
1.6.0-rc.2	2016-11-24
1.5.9	2016-11-24
1.6.0-rc.1	2016-11-21
1.6.0-rc.0	2016-10-26
1.2.32	2016-10-11
1.4.13	2016-10-10
1.2.31	2016-10-10
1.5.8	2016-07-22
1.2.30	2016-07-21
1.5.7	2016-06-15
1.4.12	2016-06-15
1.5.6	2016-05-27
1.4.11	2016-05-27
1.5.5	2016-04-18
1.5.4	2016-04-14
1.5.3	2016-03-25
1.5.2	2016-03-19
1.4.10	2016-03-16
1.5.1	2016-03-16
1.5.0	2016-02-05
1.5.0-rc.2	2016-01-28
1.4.9	2016-01-21
1.5.0-rc.1	2016-01-16
1.5.0-rc.0	2015-12-09
1.4.8	2015-11-20
1.5.0-beta.2	2015-11-18
1.4.7	2015-09-30
1.3.20	2015-09-30
1.2.29	2015-09-30
1.5.0-beta.1	2015-09-30
1.5.0-beta.0	2015-09-17
1.4.6	2015-09-17
1.3.19	2015-09-17
1.4.5	2015-08-28
1.3.18	2015-08-19
1.4.4	2015-08-13
1.4.3	2015-07-15
1.3.17	2015-07-07
1.4.2	2015-07-07
1.4.1	2015-06-16
1.3.16	2015-06-06
1.4.0	2015-05-27
1.4.0-rc.2	2015-05-12
1.4.0-rc.1	2015-04-24
1.4.0-rc.0	2015-04-10
1.3.15	2015-03-17
1.4.0-beta.6	2015-03-17
1.4.0-beta.5	2015-02-24
1.3.14	2015-02-24
1.4.0-beta.4	2015-02-09
1.3.13	2015-02-09
1.3.12	2015-02-03
1.4.0-beta.3	2015-02-03
1.3.11	2015-01-27
1.4.0-beta.2	2015-01-27
1.4.0-beta.1	2015-01-20
1.3.10	2015-01-20
1.3.9	2015-01-15
1.4.0-beta.0	2015-01-14
1.3.8	2014-12-19
1.2.28	2014-12-16
1.3.7	2014-12-15
1.3.6	2014-12-09
1.3.5	2014-12-02
1.3.4	2014-11-25
1.2.27	2014-11-21
1.3.3	2014-11-18
1.3.2	2014-11-07
1.3.1	2014-10-31
1.3.0	2014-10-14
1.3.0-rc.5	2014-10-09
1.2.26	2014-10-03
1.3.0-rc.4	2014-10-02
1.3.0-rc.3	2014-09-24
1.2.25	2014-09-17
1.3.0-rc.2	2014-09-17
1.2.24	2014-09-10
1.3.0-rc.1	2014-09-10
1.3.0-rc.0	2014-08-30
1.2.23	2014-08-23
1.3.0-beta.19	2014-08-23
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25
1.3.0-beta.16	2014-07-18
1.2.20	2014-07-11
1.3.0-beta.15	2014-07-11
1.2.19	2014-07-01
1.3.0-beta.14	2014-07-01
1.3.0-beta.13	2014-06-16
1.3.0-beta.12	2014-06-14
1.2.18	2014-06-14
1.3.0-beta.11	2014-06-06
1.2.17	2014-06-06
1.3.0-beta.10	2014-05-24
1.3.0-beta.9	2014-05-17
1.3.0-beta.8	2014-05-09
1.3.0-beta.7	2014-04-26
1.3.0-beta.6	2014-04-22
1.2.16	2014-04-04
1.3.0-beta.5	2014-04-04
1.3.0-beta.4	2014-03-28
1.2.15	2014-03-22
1.3.0-beta.3	2014-03-21
1.3.0-beta.2	2014-03-15
1.3.0-beta.1	2014-03-08
1.2.14	2014-03-01
1.2.13	2014-02-15
1.2.12	2014-02-08
1.2.11	2014-02-03
1.2.10	2014-01-25
1.2.9	2014-01-15
1.2.8	2014-01-10
1.2.7	2014-01-03
1.2.6	2013-12-20
1.2.5	2013-12-13
1.2.4	2013-12-06
1.2.3	2013-11-27
1.2.2	2013-11-22
1.2.1	2013-11-15
1.2.0	2013-11-08
1.2.0-rc.3	2013-10-14
1.2.0-rc.2	2013-09-04
1.0.8	2013-08-22
1.2.0rc1	2013-08-13
1.0.7	2013-05-22
1.1.5	2013-05-22
1.0.6	2013-04-04
1.1.4	2013-04-04
1.0.5	2013-02-20
1.1.3	2013-02-20
1.0.4	2013-01-23
1.1.2	2013-01-23
1.1.1	2012-11-27
1.0.3	2012-11-27
1.1.0	2012-09-04
1.0.2	2012-09-04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-rc2	2012-03-16
1.0.0rc1	2012-03-14
0.10.6	2012-01-17
0.10.5	2011-11-08
0.10.4	2011-10-23
0.10.3	2011-10-14
0.10.2	2011-10-08
0.10.1	2011-09-09
0.10.0	2011-09-02
0.9.19	2011-08-21
0.9.18	2011-07-30
0.9.17	2011-06-30
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	2011-04-01
0.9.13	2011-03-14
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	2011-01-27
0.9.9	2011-01-14
0.9.7	2010-12-11
0.9.6	2010-12-07
0.9.5	2010-11-25
0.9.4	2010-11-19
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	2010-10-27
0.9.0	2010-10-21

Getting Started

Create a new HTML file and paste the following content:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Live demo

When you open the file with a browser, you will see an input field followed by the text Hello, World!. Editing the value in the input will update the text in real-time, without the need to refresh the whole page.

Explanation:

Load the Angular framework from a Content Delivery Network.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

Define the HTML document as an Angular application with the ng-app directive
```
<html ng-app>
```
Initialize the name variable using ng-init
```
<body ng-init=" name = 'World' ">
```
Note that ng-init should be used for demonstrative and testing purposes only. When building an actual application, controllers should initialize the data.
Bind data from the model to the view on HTML controls. Bind an <input> to the name property with ng-model
```
<input ng-model="name" />
```
Display content from the model using double braces {{ }}
```
<span>Hello, {{ name }}</span>
```
Another way of binding the name property is using ng-bind instead of handlebars"{{ }}"
```
 <span ng-bind="name"></span>
```

The last three steps establish the two way data-binding. Changes made to the input update the model, which is reflected in the view.

There is a difference between using handlebars and ng-bind. If you use handlebars, you might see the actual Hello, {{name}} as the page loads before the expression is resolved (before the data is loaded) whereas if you use ng-bind, it will only show the data when the name is resolved. As an alternative the directive ng-cloak can be used to prevent handlebars to display before it is compiled.

Showcasing all common Angular constructs

The following example shows common AngularJS constructs in one file:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Every line of the file is explained below:

Live Demo

ng-app="myDemoApp", the ngApp directive that bootstraps the application and tells angular that a DOM element is controlled by a specific angular.module named "myDemoApp";
<script src="angular.min.js"> is the first step in bootstrapping the AngularJS library;

Three functions (MyDataService, DemoController, and startup) are declared, which are used (and explained) below.

angular.module(...) used with an array as the second argument creates a new module. This array is used to supply a list of module dependencies. In this example we chain calls on the result of the module(...) function;
.service(...) creates an Angular Service and returns the module for chaining;
.controller(...) creates an Angular Controller and returns the module for chaining;
.config(...) Use this method to register work which needs to be performed on module loading.
.run(...) makes sure code is run at startup time and takes an array of items as a parameter. Use this method to register work which should be performed when the injector is done loading all modules.
- the first item is letting Angular know that the startup function requires the built-in $rootScope service to be injected as an argument;
- the second item is letting Angular know that the startup function requires the built-in $window service to be injected as an argument;
- the last item in the array, startup, is the actual function to run on startup;
ng-class is the ngClass directive to set a dynamic class, and in this example utilizes hasStarted on the $rootScope dynamically
ng-cloak is a directive to prevent the unrendered Angular html template (e.g. ”{{ msg }}”) to be briefly shown before Angular has fully loaded the application.
ng-controller is the directive that asks Angular to instantiate a new controller of specific name to orchestrate that part of the DOM;
ng-repeat is the directive to make Angular iterate over a collection and clone a DOM template for each item;
{{ msg }} showcases interpolation: on-the-spot rendering of a part of the scope or controller;

The importance of scope

As Angular uses HTML to extend a web page and plain Javascript to add logic, it makes it easy to create a web page using ng-app, ng-controller and some built-in directives such as ng-if, ng-repeat, etc. With the new controllerAs syntax, newcomers to Angular users can attach functions and data to their controller instead of using $scope.

However, sooner or later, it is important to understand what exactly this $scope thing is. It will keep showing up in examples so it is important to have some understanding.

The good news is that it is a simple yet powerful concept.

When you create the following:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Where does name live?

The answer is that Angular creates a $rootScope object. This is simply a regular Javascript object and so name is a property on the $rootScope object:

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

And just as with global scope in Javascript, it’s usually not such a good idea to add items to the global scope or $rootScope.

Of course, most of the time, we create a controller and put our required functionality into that controller. But when we create a controller, Angular does it’s magic and creates a $scope object for that controller. This is sometimes referred to as the local scope.

So, creating the following controller:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

would allow the local scope to be accessible via the $scope parameter.

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

A controller without a $scope parameter may simply not need it for some reason. But it is important to realize that, even with controllerAs syntax, the local scope exists.

As $scope is a JavaScript object, Angular magically sets it up to prototypically inherit from $rootScope. And as you can imagine, there can be a chain of scopes. For example, you could create a model in a parent controller and attach to it to the parent controller’s scope as $scope.model.

Then via the prototype chain, a child controller could access that same model locally with $scope.model.

None of this is initially evident, as it’s just Angular doing its magic in the background. But understanding $scope is an important step in getting to know how Angular works.

The Simplest Possible Angular Hello World.

Angular 1 is at heart a DOM compiler. We can pass it HTML, either as a template or just as a regular web page, and then have it compile an app.

We can tell Angular to treat a region of the page as an expression using the {{ }} handlebars style syntax. Anything between the curly braces will be compiled, like so:

{{ 'Hello' + 'World' }}

This will output:

HelloWorld

ng-app

We tell Angular which portion of our DOM to treat as the master template using the ng-app directive. A directive is a custom attribute or element that the Angular template compiler knows how to deal with. Let’s add an ng-app directive now:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

I’ve now told the body element to be the root template. Anything in it will be compiled.

Directives

Directives are compiler directives. They extend the capabilities of the Angular DOM compiler. This is why Misko, the creator of Angular, describes Angular as:

“What a web browser would have been had it been built for web applications.

We literally create new HTML attributes and elements, and have Angular compile them into an app. ng-app is a directive that simply turns on the compiler. Other directives include:

ng-click, which adds a click handler,
ng-hide, which conditionally hides an element, and
<form>, which adds additional behaviour to a standard HTML form element.

Angular comes with around 100 built-in directives which allow you to accomplish most common tasks. We can also write our own, and these will be treated in the same way as the built in directives.

We build an Angular app out of a series of directives, wired together with HTML.

Minification in Angular

What is Minification ?

It is the process of removing all unnecessary characters from source code without changing its functionality.

Normal Syntax

If we use normal angular syntax for writing a controller then after minifiying our files it going to break our functionality.

Controller (Before minification) :

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

After using minification tool, It will be minified as like below.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Here, minification removed unnecessary spaces and the $scope variable from code. So when we use this minified code then its not going to print anything on view. Because $scope is a crucial part between controller and view, which is now replaced by the small ‘e’ variable. So when you run the application it is going to give Unknown Provider ‘e’ dependency error.

There are two ways of annotating your code with service name information which are minification safe:

Inline Annotation Syntax

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$inject Property Annotation Syntax

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

After minification, this code will be

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

Here, angular will consider variable ‘a’ to be treated as $scope, and It will display output as ‘Hello World !‘.

AngularJS Getting Started Video Tutorials

There are a lot of good video tutorials for the AngularJS framework on egghead.io