Download to read offline
More Related Content
Similar to Angular js anupama
Angular js anupama
- 1. Angular JS MVC JavascriptFramework by Google for Rich Web Application Development
- 2. About AngularJs • AngularJSis 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 • DeclarativeHTML • 2 way databinding • Expressions • MVC / MVVM Pattern • Dependency Injection • Routing • Templating • Modules • Services / Factories / Providers
- 4. Why AngularJS “Other frameworksdeal 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 DOMManipulation Does not provide structure to your code Does not allow for two way binding
- 6. Features of AngularJS Two-wayData 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 • Bootstrapsangular application • Only one ng-app per HTML document • Syntax: <body ng-app=“myapp”>
- 8. PRIMITIVE DIRECTIVES ng-controller • Determineswhich 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 • Determineswhat 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> <scriptsrc='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> <scriptsrc='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 youwant 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/