Angular js anupama
- 1. Angular JS MVC Javascript Framework by Google for Rich Web Application Development
- 2. About AngularJs • AngularJS is a super heroic javascript MVVM framework from Google • Open sourced and has a really huge community behind it https://github.com/angular/angular.js • NOT a DOM manipulation library like jQuery but uses a subset of jQuery (jqLite) • V1.2.x is the current stable version. V1.3.x is the beta release and V2.0.x is where Angular team is making big changes • Declarative HTML
- 3. KEY FEATURES • Declarative HTML • 2 way databinding • Expressions • MVC / MVVM Pattern • Dependency Injection • Routing • Templating • Modules • Services / Factories / Providers
- 4. Why AngularJS “Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views”. Structure, Quality and Organization Lightweight ( < 36KB compressed and minified) Free Separation of concern Modularity Extensibility & Maintainability Reusable Components
- 5. jQuery Allows for DOM Manipulation Does not provide structure to your code Does not allow for two way binding
- 6. Features of AngularJS Two-way Data Binding – Model as single source of truth Directives – Extend HTML MVC Dependency Injection Testing Deep Linking (Map URL to route Definition) Server-Side Communication
- 7. PRIMITIVE DIRECTIVES ng-app • Bootstraps angular application • Only one ng-app per HTML document • Syntax: <body ng-app=“myapp”>
- 8. PRIMITIVE DIRECTIVES ng-controller • Determines which javascript controller is bound to specific portions of a page • A single HTML document can have many ng- controller • Syntax: <div ng-controller=“mycontroller”>
- 9. PRIMITIVE DIRECTIVES ng-model • Determines what model the value of an input field will be bound to • Two way databinding • Syntax: <input type=“text” ng- model=“propertyvalue”>
- 10. MORE DIRECTIVES • ng-if • ng-repeat • ng-show • ng-click • Expressions {{ 1 + 2 }} • And more… we will learn more as we go
- 11. Data Binding <html ng-app> <head> <script src='angular.js'></script> </head> <body> <input ng-model='user.name'> <div ng-show='user.name'>Hi {{user.name}}</div> </body> </html>
- 12. MVC <html ng-app> <head> <script src='angular.js'></script> <script src='controllers.js'></script> </head> <body ng-controller='UserController'> <div>Hi {{user.name}}</div> </body> </html> function XXXX($scope) { $scope.user = { name:'Larry' }; }
- 13. AngularJs training If you want to undergo advanced training in AngularJs,then join Victorious Digital.You will get trained in Angularjs from well qualified trainers by joining this institute.For further details you may visit the website at https://victoriousdigital.in/product/angularjs-training/