1 / 20

Introduction to Angular Js

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.<br>

professionalguru
Download Presentation

Introduction to Angular Js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Angular JS tutorial byprofessionalguru

  2. A brief Introduction: • What is Angular JS? • Angular JS is a JavaScript framework. It can be added to an HTML page with a <script>tag. • Angular JS extends HTML attributes with Directives, and binds data to HTML withExpressions. http://professional-guru.com

  3. Why Angular JS? • 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 dynamicviews. http://professional-guru.com

  4. Structure, Quality andOrganization Lightweight ( < 36KB compressed andminified) Free Separation ofconcern Modularity Extensibility &Maintainability ReusableComponents http://professional-guru.com

  5. JQuery: • Allows for DOMManipulation • Does not provide structure to yourcode • Does not allow for two waybinding http://professional-guru.com

  6. Features ofAngularJS: • Two-way Data Binding – Model as single source oftruth • Directives – ExtendHTML • MVC • DependencyInjection • Testing • Deep Linking (Map URL to routeDefinition) • Server-SideCommunication http://professional-guru.com

  7. DataBinding: <htmlng-app> <head> <scriptsrc='angular.js'></script> </head> <body> <inputng-model='user.name'> <divng-show='user.name'>Hi {{user.name}}</div> </body> </html> http://professional-guru.com

  8. MVC: Model(Data) View(UI) Notifies Changes Notifies Controller (Logic) Notifies http://professional-guru.com

  9. HelloHTML: <p>HelloWorld!</p> http://professional-guru.com

  10. HelloJavascript: • <pid="greeting1"></p> • <script> • var isIE =document.attachEvent; var addListener =isIE • ? function(e, t, fn){ • e.attachEvent('on' + t,fn);} • : function(e, t, fn){ • e.addEventListener(t, fn,false);}; • addListener(document, 'load',function(){ • var greeting =document.getElementById('greeting1'); if (isIE) { • greeting.innerText = 'HelloWorld!'; • } else{ • greeting.textContent = 'HelloWorld!'; • } • }); • </script> http://professional-guru.com

  11. HelloJquery: <p id="greeting2"></p> <script> $(function(){ $('#greeting2').text('HelloWorld!'); }); </script> http://professional-guru.com

  12. HelloAngularJS: <p ng:init="greeting ='Hello World!'">{{greeting}}</p> http://professional-guru.com

  13. Angular JSApplications: • Angular JS modules define AngularJS applications. • Angular JS controllers control AngularJS applications. • The ng-app directive defines the application, the ng-controller directive defines thecontroller. http://professional-guru.com

  14. Angular JSExpressions: • Angular JS expressions can be written insidedouble braces: {{ expression}}. • Angular JS expressions can also be written inside a directive:ng-bind="expression". • Angular JS will resolve the expression, andreturn the result exactly where the expression iswritten http://professional-guru.com

  15. AngularJSModules: • An Angular JS module defines anapplication. • The module is a container for the different parts of anapplication. • The module is a container for the application controllers. • Controllers always belong to amodule. http://professional-guru.com

  16. Angular JSDirectives: • Angular JS lets you extend HTML withnew attributes calledDirectives. • Angular JS has a set of built-in directives which offers functionality to yourapplications. • Angular JS also lets you define your owndirectives. http://professional-guru.com

  17. Angular JSDirectives: • Angular JS directives are extended HTML attributes with the prefixng-. • The ng-app directive initializes an AngularJS application. • The ng-init directive initializes applicationdata. • The ng-model directive binds the value of HTML controls (input, select, textarea) to applicationdata. http://professional-guru.com

  18. Angular JSControllers: • Angular JS controllers control the data ofAngular JS applications. • Angular JS controllers are regular JavaScript Objects. • Angular JS applications are controlledby controllers. • Theng-controllerdirectivedefinesthe applicationcontroller. • AcontrollerisaJavaScriptObject,createdby astandardJavaScriptobjectconstructor. http://professional-guru.com

  19. Angular JSServices: • In Angular JS you can make your own service,or use one of the many built-inservices. • What is aService? • In Angular JS, a service is a function, or object, that is available for, and limited to, yourAngular JSapplication. • Angular JS has about 30 built-in services. One of them is the $locationservice. http://professional-guru.com

  20. Angular JS GlobalAPI: • The Angular JS Global API is a set of global JavaScript functions for performing common tasks like: • Comparingobjects • Iteratingobjects • Convertingdata • The Global API functions are accessed usingthe angularobject. http://professional-guru.com

More Related