Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

80

Share

Download to read offline

Introduction to Angularjs

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Introduction to Angularjs

  1. 1. ANGULARJSHTML enhanced for web apps!
  2. 2. What is ANGULARJS?• It’s not a JavaScript library (As they say). There are nofunctions which we can directly call and use.• It is not a DOM manipulation library like jQuery. But ituses subset of jQuery for DOM manipulation (calledjqLite).• Focus more on HTML side of web apps.• For MVC/MVVM design pattern• AngularJS is a Javascript MVC framework created byGoogle to build properly architectured andmaintenable web applications.
  3. 3. Philosophy“ANGULARJS is what HTML could have been if it had been designed for web application development.”“”ANGULARJS is built around the philosophy that declarative code is better than imperative code while buildingUIs and wiring different components of web application together.”<!doctype html><html ng-app><head><script src="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></html>
  4. 4. Why ANGULARJS?• Defines numerous ways to organize web application at client side.• Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within HTML.• Encourage TDD• Encourage MVC/MVVM design pattern• Code Reuse• Good for Single Page Apps (SPA)• Cool Features -> Next Slide
  5. 5. Key Features of ANGULARJS• Declarative HTML approach• Easy Data Binding : Two way Data Binding• Reusable Components• MVC/MVVM Design Pattern• Dependency Injection• End to end Integration Testing / Unit Testing• Routing• Templating• Modules• Services• Expressions• Filters• Directives• Form Validation• $scope, $http, $routeProvider…
  6. 6. MVC : Model View ControllerViewControllerModel1. Event or User Actionor View Load2. Maps to particular Modelafter fetching the data3. Implement theBusiness Logic onresponse data andBind it to ViewView :• Renders the Model data• Send User actions/events to controller• UIController:• Define Application Behavior• Maps user actions to Model• Select view for responseModel:• Business Logic• Notify view changes• Application Functionality• Data in general
  7. 7. MVVM: Model View ViewModelViewViewModelModelUIPresentation LogicBusiness Logicand Data• User actions, commands• Data binding• Notifications• Data Access• Update ViewModel about change
  8. 8. ng-appUse this directive to auto-bootstrap an application.Only one ng-app directive can be used per HTML document<html ng-app>
  9. 9. HTML CompilerAngulars HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allowsyou to attach behavior to any HTML element or attribute and even create new HTML elements or attributeswith custom behavior. Angular calls these behavior extensions directives.Compiler is an angular service which traverses the DOM looking for attributes. The compilation processhappens in two phases.Compile: traverse the DOM and collect all of the directives. The result is a linking function.Link: combine the directives with a scope and produce a live view. Any changes in the scope model arereflected in the view, and any user interactions with the view are reflected in the scope model. This makesthe scope model the single source of truth.http://docs.angularjs.org/guide/compiler
  10. 10. DirectiveThe directives can be placed in element names, attributes, class names, as well ascomments. Directives are a way to teach HTML new tricks.A directive is just a function which executes when the compiler encounters it in the DOM.<input ng-model=name>Custom Defined Directives<span draggable>Drag ME</span>
  11. 11. ExpressionExpressions are JavaScript-like code snippets that are usually placed in bindings such as {{expression }}<body>1+2={{1+2}}</body>
  12. 12. FormsForm and controls provide validation services, so that the user can be notified of invalidinput. This provides a better user experience, because the user gets instant feedback onhow to correct the error.<input type="text" ng-model="user.name" name="uName" required /><button ng-click="update(user)“ ng-disabled="form.$invalid ||isUnchanged(user)">SAVE</button>
  13. 13. ModuleModules declaratively specify how an application should be bootstrapped.There can be multiple modules in an appThose could be interdependent too.// declare a modulevar myAppModule = angular.module(myApp, [--here goes the dependent Modules--]);Modules are configured with routes, controllers, models etc.
  14. 14. RoutingIt Is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() andtries to map the path to an existing route definition.$routeProvider.when(/Book, {template: examples/book.html,controller: BookCntl,});$routeProvider.when(/Book/chapter01, {template: examples/chapter01.html,controller: ChapterCntl,});
  15. 15. ScopeScope is an object that refers to the application model.It is an execution context for expressions.Scopes are arranged in hierarchical structure which mimic the DOM structure of theapplication.Scopes can watch expressions and propagate events.Actually the ViewModel of MVVM.$scope
  16. 16. Dependency InjectionDependency Injection (DI) is a software design pattern that deals with how code gets holdof its dependencies.
  17. 17. FiltersAngular filters format data for display to the user.{{ expression [| filter_name[:parameter_value] ... ] }}{{ uppercase_expression | uppercase }}{{ expression | filter1 | filter2 }}Can create custom filters
  18. 18. ResourcesDocumentation• AngularJS Developer Guide• AngularJS API• AngularJS TutorialVideos• AngularJS Fundamentals In 60-ish Minutes• Introduction to Angular JS• AngularJS end-to-end web app tutorial Part I
  19. 19. ManishShekhawattwitter.com/manishekhawatwww.facebook.com/manishekhawat
  • DavidKuncoro1

    Mar. 11, 2020
  • Abhishekbiradar11

    Aug. 31, 2019
  • RizkiNurainiRamadhan

    May. 15, 2019
  • TanayParmar

    Jan. 30, 2019
  • ShubhamAgrawal211

    Jan. 15, 2019
  • HaniffWilson

    Dec. 20, 2018
  • vishnuk4

    Apr. 27, 2018
  • SumanaDas24

    Apr. 2, 2018
  • 121997

    Mar. 23, 2018
  • kimramteke

    Mar. 13, 2018
  • SevakSinghRajput

    Jan. 31, 2018
  • AdelBaSsiony

    Dec. 23, 2017
  • UmaNayaka

    Sep. 27, 2017
  • Geetanjalisengar

    Jul. 20, 2017
  • aladinux

    Jun. 7, 2017
  • RadhikaVaishnav1

    May. 21, 2017
  • lumaw2

    May. 16, 2017
  • IulianManole1

    Apr. 18, 2017
  • deepakpandit

    Apr. 13, 2017
  • neha026

    Apr. 9, 2017

Views

Total views

66,039

On Slideshare

0

From embeds

0

Number of embeds

6,887

Actions

Downloads

5,394

Shares

0

Comments

0

Likes

80

×