1 / 17

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. And it all happens within the browser, making it an ideal partner with any server technology.

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. ANGULARJS HTML enhanced for webapps! By ProfessionalGuru

  2. What isANGULARJS? • It’s not a JavaScript library (As they say). There are no functions which we can directly call anduse. • It is not a DOM manipulation library like jQuery. But it uses subset of jQuery for DOM manipulation (called jqLite). • Focus more on HTML side of webapps. • For MVC/MVVM designpattern • AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintenable webapplications. http://professional-guru.com

  3. Philosophy “ANGULARJS is what HTML could have been if it had been designed for web applicationdevelopment.” “”ANGULARJS is built around the philosophy that declarative code is better than imperative code whilebuilding UIs and wiring different components of web applicationtogether.” <!doctypehtml> <htmlng-app> <head> <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello{{yourName}}!</h1> </div> </body> http://professional-guru.com </html>

  4. WhyANGULARJS? • Defines numerous ways to organize web application at clientside. • Enhances HTML by attaching directives, custom tags, attributes, expressions, templates withinHTML. • EncourageTDD • Encourage MVC/MVVM designpattern • CodeReuse • Good for Single Page Apps(SPA) • Cool Features -> NextSlide http://professional-guru.com

  5. Key Features ofANGULARJS • Declarative HTMLapproach • Easy Data Binding : Two way DataBinding • ReusableComponents • MVC/MVVM DesignPattern • DependencyInjection • End to end Integration Testing / UnitTesting • Routing • Templating • Modules • Services • Expressions • Filters • Directives • FormValidation • $scope, $http,$routeProvider… http://professional-guru.com

  6. MVC : Model ViewController • View: • Renders the Modeldata • Send User actions/events tocontroller • UI View 3. Implement the Business Logic on response data and Bind it toView 1. Event or User Action or ViewLoad • Controller: • Define ApplicationBehavior • Maps user actions toModel • Select view forresponse • Model: • BusinessLogic • Notify viewchanges • ApplicationFunctionality • Data ingeneral Model Controller 2. Maps to particular Model after fetching thedata http://professional-guru.com

  7. MVVM: Model ViewViewModel • UI • View • User actions,commands • Databinding • Notifications BusinessLogic andData PresentationLogic Model ViewModel • DataAccess • Update ViewModel aboutchange http://professional-guru.com

  8. ng-app Use this directive to auto-bootstrap anapplication. Only one ng-app directive can be used per HTMLdocument <htmlng-app> http://professional-guru.com

  9. HTMLCompiler Angular's HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensionsdirectives. Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens in twophases. Compile: traverse the DOM and collect all of the directives. The result is a linkingfunction. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source oftruth. http://professional-guru.com http://docs.angularjs.org/guide/compiler

  10. Directive The directives can be placed in element names, attributes, class names, as well as comments. Directives are a way to teach HTML newtricks. A directive is just a function which executes when the compiler encounters it in theDOM. <inputng-model='name'> Custom DefinedDirectives <span draggable>DragME</span> http://professional-guru.com

  11. Expression Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression}} <body> 1+2={{1+2}} </body> http://professional-guru.com

  12. Forms Form and controls provide validation services, so that the user can be notified of invalid input. This provides a better user experience, because the user gets instant feedback on how to correct theerror. <input type="text" ng-model="user.name" name="uName" required/> <button ng-click="update(user)“ ng-disabled="form.$invalid|| isUnchanged(user)">SAVE</button> http://professional-guru.com

  13. Module Modules declaratively specify how an application should bebootstrapped. There can be multiple modules in an app Those could be interdependenttoo. // declare amodule var myAppModule = angular.module('myApp', [--here goes the dependentModules--]); Modules are configured with routes, controllers, modelsetc. http://professional-guru.com

  14. Routing It Is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existingroute definition. $routeProvider.when('/Book',{ template: 'examples/book.html', controller:BookCntl, }); $routeProvider.when('/Book/chapter01', { template: 'examples/chapter01.html', controller:ChapterCntl, }); http://professional-guru.com

  15. Scope Scope is an object that refers to the applicationmodel. It is an execution context forexpressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Actually the ViewModel ofMVVM. $scope http://professional-guru.com

  16. DependencyInjection Dependency Injection (DI) is a software design pattern that deals with how code gets hold of itsdependencies. http://professional-guru.com

  17. Filters Angular filtersformat data for display to the user. {{ expression [| filter_name[:parameter_value] ... ]}} {{ uppercase_expression | uppercase}} {{ expression | filter1 | filter2 }} Can create customfilters http://professional-guru.com

More Related