The key features of AngularJS are:

• Scope
• Controller
• Model
• View
• Services
• Data Binding
• Directives
• Filters
• Testable

According to AngularJS.org, “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:

1. Data mining in classical template systems
2. Data binding in angular templates

AngularJS is architecture on 3 components. They are

• The Template (View)
• The Scope (Model)
• The Controller (Controller)

AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

AngularJS directives are extended HTML attributes with the prefix ng-
The 3 main directives of angular js are

• ng-app:- directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.
• ng-model:- directive allows us to bind values of HTML controls (input, select, textarea) to application data. When using ngModel, not only change in the scope reflected in the view, but changes in the view are reflected back into the scope.
• ng-bind:- directive binds application modal data to the HTML view.

For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.

Karma

Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application and should be installed through NPM/YARN. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior-driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.

Jasmine comes with a number of matches that help you make a variety of assertions. You should read the Jasmine documentation to see what they are. To use Jasmine with Karma, we use the karma-jasmine test runner.

angular-mocks

AngularJS also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock AngularJS services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests and return sample data instead.

We can share data by creating a service, Services are easiest, fastest and cleaner way to share data between controllers in AngularJs.
There are also other ways to share data between controllers, they are

• Using Events
• $parent, nextSibling, controllerAs
• Using the $rootScope

Below are some major difference between AngularJS and JavaScript Expressions

• Both can contain literals, operators, and variables.
• AngularJS expressions can be written in HTML but JavaScript expressions are not.
• AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
• AngularJS expressions support filters, while JavaScript expressions do not.

• Create an angular.module
• Assign a controller to the module
• Link your module to HTML with ng-app
• Link the controller to HTML with ng-controller directive

There are three types of directive scopes available in Angular.

• Parent Scope: is default scope
• Child Scope:  If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.
• Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

{{a+b}}

Angular js supports all standard HTML5 attributes to validate input.Below are few built-in validators in Angular js.

• required
• min
• max
• type=”number” OR type=”email”

In angular Directives are used to extend the attributes of Html elements.
Creating custom directive in Angular js.
Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.

var app = angular.module("myApp", []); app.controller('AppController', function($scope) {        var users=[];        var user1={};        user1.firstName="Satyam";        user1.lastName="Kumar";       users.push(user1);       var user2={};        user2.firstName="Ravi";        user2.lastName="Sankar";        user2.push(user2);   $scope.users=students; }); app.directive('user', function() {         //define the directive object         var directive = {};         //restrict = E, implies that directive is Element directive         directive.restrict = 'E';         //element will be replaced by this text/html         directive.template = "First Name: {{user.firstName}} , Last Name: {{user.lastName}}";         var linkFunction = function($scope, element, attributes) {                  element.css("background-color", "#e1e1e1");             }             directive.link=linkFunction;    return directive; });

As Above directive is restricted to Element directive, so you can use this directive as an element only.
Usage:

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM.  Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

The different types of directives are:

• Element directives
• Attribute directives
• CSS class directives
• Comment directives

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.
Example:

    
{{ name }}
    
{{ address }}
          
{{ title }}
        

$broadcast, $emit, and $on are services in Angular Js. Below we have listed why they are used In Angular JS.

$broadcast(): $broadcast() service of Angular is used to propagate the event to all of his child controllers and it’s registered parent $rootscope.scope listeners.

$rootScope.$broadcast('SummaryEvent', {  priority: priority });

$on(): AngularJS $on() service is used to listen any type of event raised by $broadcast and $emit.

$scope.$on(''SummaryEvent'', function (event, args) { Vm.priority=args.priority  });

$emit: $emit is similar to $broadcast service but it is used to propagate the event to upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners.

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

• Context: The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
• Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
• No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
• Filters: In Angular, unlike JavaScript, we can use filters to format data before displaying it

• Compile function is used for template DOM Manipulation and to collect all the directives.
• Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

• Scopes provide APIs ($watch) to observe model mutations.

• Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
• Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.

• Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

Angular.js framework has the following advantages:

• Supports two way data-binding
• Supports MVC pattern
• Support static template and angular template
• Can add custom directive
• Supports REST full services
• Supports form validations
• Support both client and server communication
• Support dependency injection
• Applying Animations
• Event Handlers

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.

• 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 provides support to create custom directives for the following:

• Element directives − Directive activates when a matching element is encountered.
• Attribute − Directive activates when a matching attribute is encountered.
• CSS − Directive activates when a matching css style is encountered.
• Comment − Directive activates when a matching comment is encountered.

Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.

• Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.
• Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment . Some of the advantages are:

•     MVC implementation is done right.
•     It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
•     Two way data-binding, form validations, routing supports, inbuilt services.
•     REST friendly.
•     Dependency injection support.
•     It helps you to structure and test your JavaScript code.

It is a five-step process:

• Step 1: – Add the “Angular-route.js” file to your view.
• Step 2: – Inject “ngroute” functionality while creating Angular app object.
• Step 3: – Configure the route provider.
• Step 4: – Define hyperlinks.
• Step 5: – Define sections where to load the view.

• ‘Promises’ are post processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
• We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
• “$q” is the angular service which provides promises and deferred functionality.