Questions in: Angular Js

ng-show and ng-hide directives

It directly works on HTML DOM rather than strings and manipulates it as required. It uses two way data-binding between model and view to sync your data.

Compile – This compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together. Use the compile function to change the original DOM (template element) before AngularJS creates an instance of it and before a scope is created.
Post-Link – This is executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function. Use the post-link function to execute logic, knowing that all child elements have been compiled and all pre-link and post-link functions of child elements have been executed.
Pre-Link – This is executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking. Use the pre-link function to implement logic that runs when AngularJS has already compiled the child elements, but before any of the child element's post-link functions have been called.

- The $ in "$scope" indicates that the scope value is being injected into the current context. $scope is a service provided by $scopeProvider. You can inject it into controllers, directives or other services using Angular's built-in dependency injector:
- scope could be anything, it's a function parameter name
function link( scope, element, attributes ) {
// Only scope
}

Angular's HTML compiler allows you to teach the browser new HTML syntax. The compiler allows you to attach new behaviors or attributes to any HTML element. Angular calls these behaviors as directives.
AngularJS compilation process takes place in the web browser; no server side or pre-compilation step is involved. Angular uses $compiler service to compile your angular HTML page. The angular' compilation process begins after your HTML page (static DOM) is fully loaded. It happens in two phases:
1. Compile - It traverse the DOM and collect all of the directives. The result is a linking function.
30
www.webgeekschool.com www.dotnet-tricks.com
To Join .NET, ASP.NET MVC, WCF, AngularJS, Mobile Development Training Programs - Call Us : +91-9871749695
2. Link - It combines the directives with a scope and produces a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model.
The concept of compile and link comes from C language, where you first compile the code and then link it to actually execute it. The process is very much similar in AngularJS as well.

Compiler is an Angular service which traverses the DOM looking for attributes.
The compilation process happens in two phases.
Compile: traverse the DOM and collect all of the directives.
Link: combine the directives with a scope and produce a live view.

Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view.

The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive

1. Angular expressions can be added inside the HTML templates.
2. Angular expressions doesn't support control flow statements (conditionals, loops, or exceptions).
3. Angular expressions support filters to format data before displaying it.

AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.

. ng-app - Initialize the angular app.
. ng-init - Initialize the angular app data.
. ng-model - Bind the html elements like input, select, text area to angular app model.