Why this AngularJS “CRAZE” Generation of the web page layout and Insertion of the content inside that layout is no-more the job of server side code JavaScript can do the above job very well, especially with AngularJS. (i.e generation of layouts and insertion of the contents) AngularJS framework helps the JavaScript developers to write well structured code in a very short time.
Why only AngularJS ? to write Maintainable, Testable and Reusable JavaScript Code
What is “special” about AngularJS i. Controller ii. Directive iii. Service iv. filters 3. Features a. Dependency Injection b. Data Binding c. Dirty checking d. Single Page Application e. Routing f. Filtering
SPA (Single Page Applications) ? Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically. The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made. AngularJS is one of the popular framework to develop SPA
Examples for SPA Facebook Gmail Flipkart Twitter
How to Develop AngularJS Application 1. Create an AngularJS module 2. Add a controller to the module 3. Link the module and controller to HTML page 4. Perform data binding/templating whatever you want (Example in the live code)
Data Binding 1. One way Data Binding Data binding is the automatic synchronization of data between view and the model. 1. Two way Data Binding the synchronization process of data between view and model in the both ways.
Dependency Injection A software design pattern that deals with how components get hold of their dependencies.
Directives A directive is an extension of the HTML vocabulary that allows us to create new behaviors. Ex: ng-repeat,ng-show,ng-hide ... Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets.
Filters Filters transform the data before it is processed by a directive and displayed in a view without modifying the original data in the scope, allowing the same data to be displayed in different ways in different parts of the application. Example: Apply ‘orderBy’ filter for ng- repeat directive
Services Encapsulate functionality(business logic) that you want to reuse in an application 1. Built-in Services 2. Custom Services
Routing Routes are the secret sauces that let us write Single Page Applications (SPAs) with ease. We configure which views are to be shown for which URLs using the$routeProvider service.
conclusion This is a simple introduction to AngularJS and its features. In the coming session we will see all these features in detailed way. Thank You!!!! Keep Smiling

Angular js introduction

  • 1.
    Why this AngularJS “CRAZE” Generation ofthe web page layout and Insertion of the content inside that layout is no-more the job of server side code JavaScript can do the above job very well, especially with AngularJS. (i.e generation of layouts and insertion of the contents) AngularJS framework helps the JavaScript developers to write well structured code in a very short time.
  • 2.
    Why only AngularJS ? towrite Maintainable, Testable and Reusable JavaScript Code
  • 3.
    What is “special” about AngularJS i.Controller ii. Directive iii. Service iv. filters 3. Features a. Dependency Injection b. Data Binding c. Dirty checking d. Single Page Application e. Routing f. Filtering
  • 4.
    SPA (Single Page Applications) ? Single PageApplication (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically. The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made. AngularJS is one of the popular framework to develop SPA
  • 5.
  • 6.
    How to Develop AngularJS Application 1.Create an AngularJS module 2. Add a controller to the module 3. Link the module and controller to HTML page 4. Perform data binding/templating whatever you want (Example in the live code)
  • 7.
    Data Binding 1. Oneway Data Binding Data binding is the automatic synchronization of data between view and the model. 1. Two way Data Binding the synchronization process of data between view and model in the both ways.
  • 8.
    Dependency Injection A software designpattern that deals with how components get hold of their dependencies.
  • 9.
    Directives A directive isan extension of the HTML vocabulary that allows us to create new behaviors. Ex: ng-repeat,ng-show,ng-hide ... Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets.
  • 10.
    Filters Filters transform thedata before it is processed by a directive and displayed in a view without modifying the original data in the scope, allowing the same data to be displayed in different ways in different parts of the application. Example: Apply ‘orderBy’ filter for ng- repeat directive
  • 11.
    Services Encapsulate functionality(business logic) thatyou want to reuse in an application 1. Built-in Services 2. Custom Services
  • 12.
    Routing Routes are thesecret sauces that let us write Single Page Applications (SPAs) with ease. We configure which views are to be shown for which URLs using the$routeProvider service.
  • 13.
    conclusion This is asimple introduction to AngularJS and its features. In the coming session we will see all these features in detailed way. Thank You!!!! Keep Smiling