Learn AngularJS for Beginners

Prerequisite

For understanding and learning AngularJS, knowledge of HTML, CSS and JavaScript are required.

Introduction

We know that static web pages are developed using HTML5, CSS and to make the page dynamic or user interactive, we also use JavaScript frameworks. We have many JavaScript frameworks now available like jQuery, KnockoutJS, BackboneJS, KendoUI, emberJS and AngularJS is one among them. Though the choice of framework depends on several conditions and requirements that project demands, AngularJS is the most chosen framework. So, before digging into depth, let us know what is angularJS and what makes it special.

What is AngularJS

AngularJS is an open JavaScript framework developed and maintained by Google. It implements the MVC (Model View Controller) pattern to separate data, presentation and logical components. It is like enhanced HTML for web applications as it extends traditional HTML through usage of different attributes on HTML tags. These attributes are called as directives in Angular terminology.

Why AngularJS

1. Angular markup lives in DOM.

   For example, if we consider HTML, browser displays the content based on HTML tags, like if <h1 /> tag is present, browser understands it to be heading and displays the page accordingly. Similarly, we have many predefined tags in HTML used for displaying static content. Now, if we want our web page to be user interactive or a dynamic page, we go for JavaScript frameworks. Other JavaScript frameworks provide plugins or functions which are invoked on HTML elements. For example, if we want to show datepicker on the page, consider the jQuery perspective, we first add normal input field to the HTML, then in jQuery, we write $(element).datePicker(); to actually convert it to datepicker. So, when we look at markup, can we immediately guess what that input field actually is? Is it a plain input field or date picker? We have to look into jQuery code to confirm.

   So, the Angular approach is use of attributes or say directives on HTML tags to make the DOM more understandable and maintainable. Thus, angular markup or directives lives in DOM.

2. Two way Data Binding. What it means is if there is any change in model (back-end) then view will be updated and vice versa. We can use this approach to build high performance web application with less efforts. To do same binding in jQuery, we need to write logic in both model and view layer. But in angular, we just have to bind the variable using $scope and angular handles the rest.

3. Can Validate forms and input Fields before submitting it.

4. Allows us to control complete DOM structure, i.e., show/hide changing everything with Angular.

5. We can create templates for reusable blocks and use multiple times. This is achieved by creating Custom Directives in Angular.

6. Allows us to write basic flow end-to-end testing, unit testing.

Include AngularJS Reference

To start creating applications using Angular, download the angular.js file from https://angularjs.org/ and reference it in HTML page where angular markups will be used. An alternate way of including angular.js file is from CDN (Content Delivery Network) http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js. If we are creating standalone applications, the best thing is to include the file in project instead of using it from CDN.

Predefined Directives and Expressions

So, by now, we came to know that Directives are special and key concept of AngularJS which makes it stand apart from other JavaScript frameworks.

Directives are markers on HTML tags that tell Angular to run or reference some JavaScript code. Predefined directives are prefixed by ng-. Let us walk through some predefined directives.

The ng-app directive defines an angular application. The element on which this directive is used becomes the owner of Angular application. That is, within this element, Angular directives or markers can be used on HTML. To avoid the use of Angular directives outside the ng-app scope, we use ng-app on HTML tag or body tag of HTML.

Example 1

<div ng-app="">
    <div>Employee Name: <input type="text" ng-model="empName" /></div>
    <p> {{ 4 + 5}} </p>
</div>

In the above example, we can see one more directive ng-model used on input element. This directive is used to hold the values input by user. It is used on input type elements like checkboxes, radio boxes, text elements, dropdowns, etc. to read and store the values input by user.

Similarly, Angular provides other directives like ng-bind, ng-init, ng-repeat, ng-show, ng-hide and many more, each associated with predefined action.

In the example above, we can see use of {{ }} (flower brackets). These brackets are called Expressions. That is, in Angular, we can evaluate any expression by including them in these brackets. The expression {{ 4 + 5 }} evaluates to 9 and displays 9 on the output page. Similarly, we can do any mathematical operations on numbers or strings using Expressions of Angular. Also, we can use variables (which hold some data) in the expressions. Let us see this with an example.

Example 2

<div ng-app="" ng-init="items=5; price=5">
     <div>Total price is {{  items * price }}</div>
</div>

Output: Total price is 25

Explanation:

ng-init pre-defined directive is used to initialize variables in HTML DOM. In the example, items, price variables are initialized to values 5 using ng-init directive. And angular expression {{ items * price }} evaluates to 25. 

Modules and Dependency Injection

var app = angular.module('myCompApp');

Module of angularJS defines an application. It is a container for different parts of an application like Controllers, Directives, Services, Factory. Here, module name is myCompApp and module object is created which is stored in app variable. If this module is dependent on some other module, we include the dependencies in empty braces [ ]. For example, if module ‘myCompApp’ is dependent on external module, say ‘chart.js’, then it is written as:

var app = angular.module('myCompApp', ['chart.js']);

This way of injecting dependencies is called ‘Dependency Injection’ and angular heavily leverages dependency injection. In the upcoming examples, we shall see more use of dependency injection.

In HTML:

<div ng-app="myCompApp">
         ----
<div>

We know that ng-app defines an angular application. By assigning module to ng-app, it runs the module (here myCompApp) when page/document loads.

Now, let us say we have data in JSON format as below.

personData = {name: "Tom", age: "50", moreInfo: "some more information about person"} 

and we want to print this data to page. How do we achieve this with AngularJS? Here comes the concept of Controllers.

Controllers

Controllers are where we define our application’s behavior by defining functions and values.

Let us create our first controller with the name ‘PersonController’. It is best practice to write Controllers’ name in camelCase with first letter in caps.

app.controller("PersonController", function($scope){
      -----
});

Here, we can notice that Controller is attached to Module (app), as Module is a container for all angular key items (controllers, directives, services).

The defined Controller is attached in HTML using the angular directive ng-Controller. When Angular compiler comes across the directive ng-Controller, it finds the definition of associated controller and executes it.

<div ng-controller="PersonController">
   -----
</div>

Now, we have created Controller and we have data. So to print this data, we use Scope concept of angular.

$scope

$scope is the binding part between 'View' that is HTML and 'Controller' that is JavaScript. It is an object with properties and methods. The properties and method attached to this object can be used or invoked in HTML (views).

When a Controller is defined, its associated $scope object is created. The Scope of this object is the Scope created on HTML element that contains ng-controller directive.

Let us see how to use $scope.

Let us add one property to $scope. To this property, we are assigning data, so that it can be used in HTML page for printing our data.

$scope.employeeData = personData;

When adding the properties to the scope object, we get access to these properties in HTML or view page and in the view page, we again do not use prefix $scope. We just write property name in expressions like {{ employeeData .name}}

Writing the Controller in JavaScript file and HTML part in HTML page, it becomes as below.

Example 3

personData = {name: 'Tom', age:'50', moreInfo:'some more information about person'};

app.controller("PersonController", function($scope){
    $scope.employeeData = personData;
});

<div ng-app="myCompApp">
       <div ng-controller="PersonController">
            <p> Name of employee is {{ employeeData.name }} </p>
       </div>
</div>

Output: Tom

Example 4

Let us also attach method/function to our $scope.

In script file:

app.controller("PersonController", function($scope){
      $scope.employeeData = personData;
      $scope.employeeMethod = function(){
           console.log("Hello, I am an Employee");
      }
});

In HTML file:

<div ng-app ="myCompApp">
     <div ng-controller="PersonController">
           <p> Name of employee is {{ employeeData.name}} </p>
           <button ng-click="employeeMethod()"> Get Details </button>
     </div>
</div>

Output:

Name of employee is Tom.

And on button click, outputs the text 'Hello I am an Employee' on console.

RootScope

In the example 4 above, there is only one scope, so knowing scope is easy. But for large applications, there can be sections in HTML DOM which can only access certain scopes.

All applications have a $rootScope which is scope created on HTML element that contains the ng-app directive. The $rootScope is available in the entire application. It can be used as below:

app.run(function($rootScope){
     $rootScope.personName = "Jerry";
});

In HTML:

<div ng-app ="myCompApp">
       <p> Name of person from rootScope : {{ personName }}</p>
       <div ng-controller ="PersonController">
            <p> Name of person from Controller's scope: {{ employeeData.name }} </p>
       </div>
</div>

Output:

Name of person from rootScope: Jerry

Name of person from controller's scope: Tom

Explanation:

In this example, personName is not in PersonController’s scope and though it is written above div with ng-controller, we got the output. Suppose we now try to use {{ personName }} before div with ng-app, then we will not get the required output. As scope of rootScope is within the ng-app directive.

This was about Controller scope and rootScope. Now let us learn about Scope Inheritance.

Scope Inheritance

It is common to attach Controllers at different levels of DOM hierarchy. Since ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherits from each of its parent ¹. The $scope of each child controller will have access to its parent controller's properties and methods.

Example 5

In script file,

app.controller("MainController", ['$scope', function($scope){
    $scope.name = "Donald"; 
    $scope.color = "White";
}]);

Let us create one more Controller with name ChildController as below...

app.controller("ChildController", ['$scope', function($scope){
      $scope.name = "Scrooz";
      $scope.color = "Black";
}]);

..and one more...

app.controller("GrandChildController", ['$scope', function($scope){
     $scope.name = "Julie";
}]);

Now in HTML:

<div ng-controller="MainController">
      <p> Name from Main Controller : {{ name }}</p>
      <p> Color from Main Controller : {{ color }}</p>
       <div ng-controller="ChildController">
            <p> Name from Child Controller : {{ name }}</p>
            <p> Color from Child Controller : {{ color }}</p>
            <div ng-controller="GrandChildController">
                <p> Name from Grand Child Controller : {{ name }}</p>
                <p> Color from Grand Child Controller : {{ color }}</p>
            </div>
        </div>
</div>

Output:

Name from Main Controller: Donald

Color from Main Controller: White

Name from Child Controller: Scrooz

Color from Child Controller: Black

Name from GrandChild Controller: Julie

Color from GrandChild Controller: Black

Explanation:

In the above example, though property names attached to $scope are the same in each Controller, we got different names in output. That is because, $scope of ChildController overwrites the parent property with the same name. If the property is not defined in ChildController, then it is taken from its parent Controller. As can be noticed in the GrandChildController case, where we did not define property name 'color' but when we tried to print it by using property name “color” in HTML, we got output as White, that is it inherited the value from its immediate parent ChildController.

Conclusion

So, we have learnt what makes AngularJS special among varied JavaScript frameworks. Also, we learnt what are Directives, Modules, Expression, Controllers.

In brief:

Directives are HTML markers that trigger JavaScript functions or behaviour. Module is a container for Controllers, Services, Factories, etc. Expressions are used to display values within the page and Controllers are where we add application's behavior.

References

1. AngularJS Documentation for controllers - https://docs.angularjs.org/guide/controller

Other References

1. https://angularjs.org/
2. http://www.w3schools.com/angular/