Angularjs PPT

My PPT on AngularJS at Infobeans

1. A session by Amit Baghel Superheroic JavaScript MVW Framework

2. History AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. The two originally envisioned their project, GetAngular, to be an end-to-end tool that allowed web designers to interact with both the frontend and the backend. Hevery eventually began working on a project at Google called Google Feedback. Hevery and 2 other developers wrote 17,000 lines of code over the period of 6 months for Google Feedback. However, as the code size increased, Hevery began to grow frustrated with how difficult it was to test and modify the code the team had written. So Hevery made the bet with his manager that he could rewrite the entire application using his side GetAngular project in two weeks. Hevery lost the bet. Instead of 2 weeks it took him 3 weeks to rewrite the entire application, but he was able to cut the application from 17,000 lines to 1,500 lines.

3. 17000 lines of code to 1500 how? Take an example In JQuery HTML <p id="test"></p> <p id="test1"></p> <p id="test2"></p> <p id="test3"></p>

4. 17000 lines of code to 1500 how? Script $(function(){ $('#test’).text('Hello World!'); $('#test1’).show(); $('#test2’).hide(); $('#test3’).addClass(‘active’); });

5. 17000 lines of code to 1500 how? Same thing in Angularjs ? HTML <p>{{greeting}}</p> <p ng-show=’visible’ ></p> <p ng-hide=’visible’></p> <p ng-class=’{ ‘active’: visible }’></p>

6. 17000 lines of code to 1500 how? Same thing in Angularjs ? Script $scope.greeting=’Hello Viatech’; $scope.visible=’true’;

7. •Structure, Quality and Organization •Lightweight ( < 36KB compressed and minified) •Free •Separation of concern •Modularity •Extensibility & Maintainability •Reusable Components Benefits of Angularjs

8. What Browsers Does AngularJS Support? Angular claims to support “Class A Browsers.” As of Angular 1.2, the Angular team considers the following browsers “Class A”: Chrome Firefox Safari iOS Android IE8+.

9. https://angularjs.org

10. What is SPA?

11. In Angularjs SPA application is created with the help of one of the most happening features of Angularjs i.e. Routing

12. Modules Directives Templates Scope Expressions DataBinding MVC (Model, View & Controller) Validations Filters Services Routing Dependency Injection Features

13. What is a module? A container for code for the different parts of your applications. Your module goes here ng-app=’yourModuleName’ Module

14. What is a controller? AngularJS applications are controlled by controllers. Controller does not directly communicate to views but with the help of scope as like model in ASP.Net MVC. ng-controller=’yourControllerName’ Controller Controller

15. A quick note $rootscope is the parent scope for all the scopes of several controller Behaves like models in MVC but models are two-way Scope

16. one way binding is done with the help of inbuilt directive i.e. Ng-bind for once and {{}} / interpolation / expression Binding

17. Two way binding is done with the help of an inbuilt directive i.e. ng-model Binding

18. As we say controls in ASP.net or Partial views in MVC Directive

19. What are expressions or code blocks in ASP.Net or MVC?

20. ASP.NET MVC Code blocks in Microsoft technologies

21. {{ variable }} Will get evaluated to its value . Expression in Angularjs

22. Good luck! Keep learning. Thank you everyone !!

23. In next session We will decide :)