AngularJS Developer

The key features of AngularJS are

☛ Scope

☛ Controller

☛ Model

☛ View

☛ Services

☛ Data Binding

☛ Directives

☛ Filters

☛ Testable

Compilation of HTML process occurs in following ways

☛ Using the standard browser API, first the HTML is parsed into DOM

☛ By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.

☛ Link the template with scope by calling the linking function returned from the previous step

Each angular application consist of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, application can have multiple scopes. When new scopes are formed or created they are added as a children of their parent scope. Similar to DOM, they also creates a hierarchical structure.

It is definitely a bad practice. We need to stay away from jQuery and try to realize the solution with an AngularJS approach. jQuery takes a traditional imperative approach to manipulating the DOM, and in an imperative approach, it is up to the programmer to express the individual steps leading up to the desired outcome.

AngularJS, however, takes a declarative approach to DOM manipulation. Here, instead of worrying about all of the step by step details regarding how to do the desired outcome, we are just declaring what we want and AngularJS worries about the rest, taking care of everything for us.

Using a service is definitely easy to test. Services are injected, and in a test either a real service can be used or it can be mocked.

Events can be tested. In unit testing controllers, they usually are instantiated. For testing events on $rootScope, it must be injected into the test.

Testing $rootScope against the existence of some arbitrary models is testable, but sharing data through $rootScope is not considered a good practice.

For testing direct communication between controllers, the expected results should probably be mocked. Otherwise, controllers would need to be manually instantiated to have the right context.

Using service method, we define a service and then assign method to it. We've also injected an already available service to it.

mainApp.service('CalcService', function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

filter filter is used to filter the array to a subset of it based on provided criteria.

In below example, to display only required subjects, we've used subjectName as filter.

Enter subject: <input type = "text" ng-model = "subjectName">

Subject:

<ul>

<li ng-repeat = "subject in student.subjects | filter: subjectName">

{{ subject.name + ', marks:' + subject.marks }}

</li>

</ul>

In this section, the development environment setup has been described. Angularjs 2.0 application can be developed using:

angular-cli: This is a command line tool for Angularjs 2.0 application development which support live coding and deployment instantly. This is much easier and much straight forward.

systemjs: This is the traditional way of developing angularjs application. This way has been described in details later in Part-2.

☛ ng-app : Initializes application.

☛ ng-model : Binds HTML controls to application data.

☛ ng-Controller : Attaches a controller class to view.

☛ ng-repeat : Bind repeated data HTML elements. Its like a for loop.

☛ ng-if : Bind HTML elements with condition.

☛ ng-show : Used to show the HTML elements.

☛ ng-hide : Used to hide the HTML elements.

☛ ng-class : Used to assign CSS class.

☛ ng-src : Used to pass the URL image etc.

AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps. While Backbone.js do their jobs individually.

AngularJS supports inbuilt internationalization for three types of filters currency, date and numbers. We only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser. For example, to use Danish locale, use following script

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In any AngularJS application, directives are the most important components.

Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.

– One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)

– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value

Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.

ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

AngularJS provides $https: control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https: can be used to get the data from server in the following manner:

function studentController($scope,$https:) {

var url = "data.txt";

$https:.get(url).success( function(response) {

$scope.students = response;

});

}

Factory method is used for creating a directive. It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

Syntax: module.factory( 'factoryName', function );

Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.