Maintaining controllers in a separate .js file

For small applications / pages we can have the controller script embedded in the HTML page within the script tags, however if the application / page is large and complex then it is advisable to maintain the controller in separate .js files. Also by doing so we can maintain multiple controllers on a single page.

The following sample demonstrates a simple page, where the HTML View and the controllers are maintained in 2 different files

ng-controller directive

The ng-controller directive is defined in the view, while parsing the page AngularJS creates an instance of the controller object it refers to, the constructor of the controller object is automatically invoked and initialization of the $scope object happens in the controllers constructor.

Once the controller in initialized, the reference to the properties and methods deified in the controllers $scope are available in the view.

Controllers play an important role in binding the model and view in MVC pattern.

The below example demonstrated the use of controllers to bind between the model and the view.

$scope object

In the previous posts we saw on how to use the ng-bind directives to bind objects/properties to the view, in this post we shall see on how to use the $scope object to bind data the controller and the view.

The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

The below example demonstrated the use of $scope object to bind between the model and the view.

ng-bind-html

The ng-bind-html directive is used in places where we need to parse HTML content and render the output instead of just displaying the HTML tags in the view, by default any value bound to this directive will be passed through $sanitize to validate and clean so that no unsafe inputs are rendered to the view, this validation process might filter out some of the HTML tags from the source which are deemed to be un-safe. The $sce can be used to skip the validation process and render the content as it is in the view. $sce.trustAsHtml instructs Angular that the content is valid and can skip the validation done by $sanitize, this makes sure that the full HTML is parsed and rendered as output in the View.

The following example uses $sce.trustAsHtml to display HTML content to the view using ng-bind-html directive.

ng-model vs ng-bind

Both ng-model and ng-bind directives provide binding features, the difference is that ng-model provides 2 way data binding between the model and the view, while ng-bind provides only one way binding between model and view.

While using ng-model the model is initially bound to the view when the page loads, any further changes made to the view will get automatically updated in the model object.

While using ng-bind the model is initially bound to the view when the page loads, any further changes made to the view will not get updated in the model object.

The below example demonstrates the difference between using ng-model and ng-bind to bind the model to the view.

ng-bind directive

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind directive is similar to using expressions {{ expression }} in AngularJS.

The below example shows a simple implementation of ng-bind to achieve one way data binding between the model and the view.

Using ng-model directive with a Controller

The core functionality of ng-model directive is to provide data binding between the model and the view in AngularJS. In the previous post ng-model directive we saw on how to use the ng-model directive to bind variables which were created using the ng-init directive, in this post we shall see on how to use ng-model to directive to bind the properties defined in the controller to the view.

In the following example we declare initialize the properties FName and Lname in the $scope in the controller.

ng-model directive

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model

ng-app directive

The ng-app directive is used to initialize / bootstrap an AngularJS application in a HTML page, we should declare the ng-app directive in the HTML, Body or DIV tag based on where we plan to use AngularJS directives in the page. Without adding the ng-app directive the other AngularJS directives / expressions will not work.

There can be only one ng-app defined in a page, to have multiple applications in a single HTML page we should manually bootstrap the page using angular.bootstrap.

For a simple application we can just specify the ng-app directive in the HTML, Body or div tags without any specific names as follows.

The following is a simple example using ng-app 

Using ng-repeat to Process JSON response from the server Ajax calls

In the previous posts we saw on how to use the ng-repeat directive to handle 1-dimentional arrays and arrays of objects.

ng-repeat directive
Using ng-repeat to process an array of objects

In this post we shall see a more real time scenario of using ng-repeat directive to process JSON data which is received from a server side API call. The following example does an API call using the $http services to get a JSON response containing a list of report details, the view iterates through the reports in the JSON and displays the report id and name in the HTML view

Ajax call

$http.get(…)
            .then(function (results) {
                //Success;
                try {
                    scope. reports = results.data;
                }
                catch (err) {
                    alert(err.message);
                }
            }, function (results) {
                //error
                alert("Error: " + results.data + "; "
                                      + results.status);
            }

)

UI to Process JSON
<ul ng-repeat="report in reports">
    <li>{{report.Name}} - {{report.Name}}</li>
</ul>

Using ng-repeat to process an array of objects

In the previous post ng-repeat directive we saw on how to use the ng-repeat directive to display items in a 1-dimentional array, however in real time we will have to deal with complex collections, a typical example could be to display a table/list which has multiple columns, in this case each row will have multiple properties, ng-repeat directive can handle these by parsing an array of objects.

The following example shows on how to process an array, where each element in the array is an object having its own set of properties.

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employees=[
{id:1,Name:'Tom'},
{id:2,Name:'Harry'},
{id:3,Name:'Peter'}]">
<ul>
   <li ng-repeat="emp in Employees">
     {{ emp.id }} - {{ emp.Name }}<br/>
   </li>
  </ul>
</div>
</body>

</html>

Output:

ng-repeat directive

The ng-repeat directive can be used to iterate through a collection and process one item at a time from the collection. This is similar to the foreach loop in C#. The ng-repeat directive comes in handy when we want to display a list of items in an array/collection in the view.

The following example shows how to use the ng-repeat directive to display a list of array items using the ng-repeat directive.

ng-init directive

The ng-init directive, is used to initialize specific variables and use them within expressions. It acts more like a Declare statement where we can specify name/value pairs of variables. Before starting with any AngularJs example make sure you download and refer to a local copy of the Angularjs library file, or refer to one of the online libraries for AngularJS.

Following is a simple example of using ng-init directive to declare a Name variable and assign a value to it.

What are AngularJS Directives?

Directives are the core of AngularJS, directives bind AngularJS with the HTML elements. Directives in AngularJS are prefixed with ng-. The syntax is ng-<directive name>

Examples of directives are ng-app, ng-controller, ng-model etc...
To render a page to the user, the HTML tags in the page is parsed by the browser to create a DOM Tree, once the tree is built AngularJS parses the DOM tree, detects the directives in the tree compiles them before rendering the final HTML to the client.

The following are some of the most common AngularJS Directives

AngularJS Overview

AngularJS Overview

What is AngularJS? Advantages of AngularJS Getting started with Angular JS

Getting started with Angular JS

AngularJS is an open source JavaScript Framework to build dynamic web pages, AngularJS provides a number of advantages in designing and developing modern web applications to get started with AngularJS we should either download the AngularJS library JavaScript files and reference it in our website or link to one of the online libraries hosting AngularJS files.

Below are the details/site references to download AngularJS files or reference to one of the online libraries.

Advantages of AngularJS

AngularJS is an open source JavaScript Framework to build dynamic web pages, AngularJS provides a number of advantages in designing and developing modern web applications the following are the list of the major advantages of using AngularJS.

What is AngularJS?

AngularJS is an open source JavaScript Framework to build dynamic web pages. AngularJS provides additional attributes to HTML tags and extends their functionality based on the attributes used, these attributes are called AngularJS directives.

AngularJS provides 2 way binding between the HTML view and the model, hence any changes made in the model will get reflected in the View and any changes made in the view will reflect in the model automatically, AngularJS takes care of updating the other side of the binding.

AngularJS provides a MVC Framework implementation in the client side, using AngularJS we can define Model, View and Controllers in the client side, MVC framework was earlier implemented only in server side using languages like Java, Asp.Net etc, AngularJS  extends this framework to the client side also.