Angular JS Quick WalkThrough

Angular Js API's are included in the below 7 modules.

1. 2. 3. 4. 5. 6. 7.

Ng (Core Module) Ngroute Ngresource Ng cookies Ngtouch Ngsantizer Ngmock Ng modules comes along with angular.min.js rest all modules needs to be loaded as separate js files.Some of the directives that I came across mentioned below:

Ng-click - The ngClick directive allows you to specify custom behavior when an element is clicked. Ng-Checked - If the expression is truthy, then special attribute "checked" will be set on the element Ng-init - The ngInit directive allows you to evaluate an expression in the current scope. Ng-href - Any string which can contain {{}} markup. <a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br /> Ng-repeat - to loop through list or array. Ng-include - will help in loading the template urls. Ng-View - ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Ng-Change - Evaluate the given expression when the user changes the input Ng-Class - The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. Ng-Show , Ng-Hide - The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. Ng-Submit - Enables binding angular expressions to onsubmit events. Ng-Value - Binds the given expression to the value of input[select] or input[radio], so that when the element is selected, the ngModel of that element is set to the bound value. Ng-Selected - If the expression is truthy, then special attribute "selected" will be set on the element Ng-Switch - The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template. Ng-Copy - Expression to evaluate upon copy. (Event object is available as $event)

<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ngmodel="value">copied: {{copied}} Ng-Paste - Expression to evaluate upon paste. (Event object is available as $event) <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>pasted: {{paste}}
$rootscope 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. $scope Life Cycle : $apply -

An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks. $apply is wrapper of $digest, So $apply has additional error handling mechanism in it.

8. Enter Angular execution context by calling scope.$apply(stimulusFn). Where stimulusFn is the work you wish to do in Angular execution context. 9. Angular executes the stimulusFn(), which typically modifies application state.

10. Angular enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The$digest loop keeps iterating until the model stabilizes, which means that the $evalAsync queue is empty and the $watch list does not detect any changes. 11. The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render. This is usually done with setTimeout(0), but the setTimeout(0) approach suffers from slowness and may cause view flickering since the browser renders the view after each event. 12. The $watch list is a set of expressions which may have changed since last iteration. If a change is detected then the $watchfunction is called which typically updates the DOM with the new value. 13. Once the Angular $digest loop finishes the execution leaves the Angular and JavaScript context. This is followed by the browser re-rendering the DOM to reflect any changes.

$Scope functions that will be helpful: $on: Listens on events of a given type $emit: - Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
$destroy: - Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

$viewcontentloaded: This will be used like below, it will be helpful to handle some thing at scope level after the content is loaded. $scope.$on('$viewContentLoaded', function SampleFunction1() {}); $destroy: - This will be used like below, it will be helpful to handle some thing at scope level before leaving the scope. $scope.$on('$destroy', function SampleFunction2() {});
Check this link to see the useful of above two functions http://plnkr.co/edit/ZddQ5W?p=preview

Data Binding: Data Binding will be done in Angular by using ng-model property and depicted in the below screenshot:

Communication between Controllers : In Angular you can have multiple, some completely optional, entities which can interact between each other in multiple ways, for example: Can follow this link to understand more : http://stackoverflow.com/questions/18142008/angularjs-pass-data-between-controllers

$rootparams - This will be use d to fetch the data from the Url's as below. URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
Form:

Below form directives will be more helpful while working on ngforms.

Ng-pristine Ng-dirty Ng-valid Ng-invalid Ng-disabled Ng-class

formName.$addControl(): register a control with the form formName.$removeControl(): remove a control from the form formName.$setDirty(): set the form to Dirty state formName.$setPristine(): set the form to its pristine state formName.$setValidity(): set the validity of a form control

Functions: Angular.isobject - Determines if a reference is an Object. Unlike typeof in JavaScript, nulls are not considered to be objects. Note that JavaScript arrays are objects.
Angular.Element - Wraps a raw DOM element or HTML string as a jQuery element. Sample usage as below. console.log(angular.element(document.getElementById('parent')).scope().name); Angular.Copy - Creates a deep copy of source, which should be an object or an array. Angular.fromJSON - Deserializes a JSON string. Angular.toJSON - Serializes input into a JSON-formatted string Angular.IsDate - Determine if value is a date Angular.IsArray - Determine if value is an array Angular.IsDefined - Determine if reference is defined. Angular.IsElement - Determinre if reference is a DOM element Angular.IsString - Determine if reference is string element. Angular.IsUpperCase - Converts the string to uppercase. What does it mean to "compile" an HTML template? For AngularJS, "compilation" means attaching event listeners to the HTML to make it interactive. The reason we use the term "compile" is that the recursive process of attaching directives mirrors the process of compiling source code in compiled programming languages.