AngularJs

​Agenda:

1. SPA Approach

2. History  AngularJS

3. Advantages of AngularJs

4. Kay Features of AngularJs

5. AngularJS- Directives

6. AngularJs- Module

7. AngularJs- Controller

8. AngularJs- Views

9. AngularJs- Routing

Old Approach: 

New Approach (SPA): 

History:

• AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech LLC as the software behind an online JSON storage service.

• AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google.

• AngularJS is a open source JavaScript framework.

Key featrues of angularJs:

1. Scope

2. Controller

3. Model

4. Views

5. Services

6. Data bindings

7. Directives

8. Filters

9. Testable

$scope:

• It is object instance of controller.
• They act as glue between controller and view.

$scope:

• It is object instance of controller.
• They act as glue between controller and view.

<div class="container" ng-controller="spaController">
     <div>{{message}}</div>
</div>


app.controller('spaController',function($scope){
    $scope.message= "Welcome to learn Angular.js ";
});

Directives:

• These are special attributes starting with ng- prefix.
• We can also say that, These are html annotations that triggers javascript behaviour.

• ng-app - This directive starts an AngularJS Application.

• ng-init - This directive initializes application data.

• ng-model - This directive defines the model that is variable to be used in AngularJS.

• ng-repeat - This directive repeats html elements for each item in a collection

• AngularJS provides support to create custom directives for following type of elements.

  • 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.

Modules:

• Simply a collection of functions that are run when the application is booted.

Controllers:

• AngularJS controllers are regular JavaScript Objects.
• AngularJS applications are controlled by controllers
• The ng-controller directive defines the controller.

Routing using AngularJs:

It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.

config() method :

• Once we have our app, we can use config() method to configure $routeProvider.
• .config() method to define $routeProvider configuration
• $routeProvider provides method .when() and .otherwise() which we can use to define the routing for our app.

Declaring a Dependency on the AngularJS Route Module:

• The second thing to notice is that the applications's AngularJS module (called sampleApp) declares a dependency on the AngularJS route module:

•   var module = angular.module("sampleApp", ['ngRoute']);

For your information:

Find below some Reference Links:

• http://www.w3schools.com/angular/angular_intro.asp

• http://tutorials.jenkov.com/angularjs/routes.html

• http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html

• http://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm

• http://www.tutorialspoint.com/angularjs/angularjs_ajax.htm

Thank You