Angular.js framework has the following advantages: Applying Animations Event Handlers
The key features of AngularJS are:
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. There are two ways of data binding:
AngularJS directives are only used to extend HTML and DOM elements' behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element. AngularJS has a set of built-in directives like: We can create our own directives for Angular to use them in our AngularJS Application with the controllers and services too. In this article, we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat. ng-app It is the most important directive for an Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile time language like C#, Java or C++ etc. If we do not use this directive first and directly try to write other directives, it gives an error. ng-init ng-init directive is used to initialize an AngularJS Application data variable's inline statement, so that we can use those in the specified block where we declare them. It is like a local member of that ng-app and it can be a value or a collection of the values and as an array, it directly supports JSON data. ng-model ng-model directive is used to define the model/variables value to be used in AngularJS Application’s HTML controls like and it also provides two-way binding behavior with the model value. In some cases, it’s also used for databinding. ng-bind ng-bind directive is also used to bind the model/variable's value to AngularJS Applications HTML controls as well as with HTML tags attributes like: , and more, but it does not support two way binding. We can just see the output of the model values. ng-repeat ng-repeat directive is used to repeat HTML statements. Ng-repeat works the same as for each loop in C#, Java or PHP on a specific collection item like an array.
Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.
Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. For example, The main differences between Angular expressions and JavaScript expressions are:
AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps. While Backbone.js does these jobs individually.
Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hardcoded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable. Dependency Injection is required for the following AngularJS uses dependency with several types A simple case of dependency injection in Angular js AppModule.controller("AppController", function($scope, $window, $log,$http) { });
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.
Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.
t is a five-step process:
Two main execution characteristics of Angular services are that they are singleton and lazy instantiated. Angular only creates an instance of a service when an application component depends on it. On the other hand each application component dependent on the service work with the single instance of the service created by Angular.
AngularJS Service is used for sharing utility functions with the service reference in the controller. Service is singleton in nature so for once service only one instance is created in the browser and the same reference is used throughout the page. Service syntax:module.service( 'serviceName', function ); The purpose of AngularJS Factory is also same as Service however in this case we create a new object and add functions as properties of this object and at the end we return this object. Factories:module.factory( 'factoryName', function );
Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
Following are the disadvantages of AngularJS.
Following are the three core directives of AngularJS.
Angular.module is used to create AngularJS modules along with its dependent modules. Consider the following example: var mainApp = angular.module("mainApp", []); Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.