Angularjs PPT
Download as PPTX, PDF3 likes7,643 views
This document summarizes the history and benefits of AngularJS. It explains that AngularJS was originally created in 2009 as a side project by Misko Hevery and Adam Abrons to build a tool for both front-end and back-end development. When working on a Google project called Google Feedback, Hevery was able to rewrite 17,000 lines of code into 1,500 lines using his AngularJS framework by taking advantage of its features like separation of concerns, modularity, and reusable components. The document then lists some key benefits of AngularJS like being lightweight, free, and improving structure, quality, organization and maintainability of code.
Angularjs PPT
- 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+.
- 11. What is SPA?
- 12. In Angularjs SPA application is created with the help of one of the most happening features of Angularjs i.e. Routing
- 13. ● Modules ● Directives ● Templates ● Scope ● Expressions ● DataBinding ● MVC (Model, View & Controller) ● Validations ● Filters ● Services ● Routing ● Dependency Injection Features
- 14. What is a module? A container for code for the different parts of your applications. Your module goes here ng-app=’yourModuleName’ Module
- 15. 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’ ControllerController
- 16. 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
- 17. one way binding is done with the help of inbuilt directive i.e. Ng-bind for once and {{}} / interpolation / expression Binding
- 18. Two way binding is done with the help of an inbuilt directive i.e. ng-model Binding
- 19. As we say controls in ASP.net or Partial views in MVC Directive
- 20. What are expressions or code blocks in ASP.Net or MVC?
- 21. ASP.NET MVC Code blocks in Microsoft technologies
- 22. {{ variable }} Will get evaluated to its value . Expression in Angularjs
- 23. Good luck! Keep learning. Thank you everyone !!
- 24. In next session We will decide :)