Successfully reported this slideshow.

AngularJS = Browser applications on steroids

3,286 views

Published on

Published in: Technology
  • Be the first to comment

AngularJS = Browser applications on steroids

  1. 1. AngularJS = Browser applications on steroids Maurice de Beijer
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft Integration MVP Who am I?  Freelance developer  DevelopMentor instructor  Twitter: @mauricedb  Blog: http://msmvps.com/blogs/TheProblemSolver/  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com
  3. 3.  What is AngularJS?  Getting started Objectives  Directives  Routing  Dependency injection  REST data services  Animations
  4. 4.  AngularJS is an MVC framework for browser based apps  Open source and originally developed at Google  The clean architecture has attracted a large following quickly What is AngularJS?  Version 1.0 was released in June 2012  Currently at 1.0.8/1.2.0-rc-3  The goal is building CRUD style business applications  Not as suitable for games etc  Use declarative programming for UI and imperative programming for the logic  The application is wired together in a declarative way  Supports modern desktop and mobile browsers  Internet Explorer version 8 and above
  5. 5.  Model View Controller architecture  A well known and proven architecture  Declarative two way data binding  Automatically synchronizes values between Model and View  Dynamic templates Key features  Makes it very easy to update the user interface  Dependency injections  Code dependencies are automatically injected where needed  Extends HTML with directives  Lots of powerful standard directives or create your own  Build with testing in mind  Makes it much easier to unit test different parts
  6. 6.  Automatic bootstrapping Bootstrapping  Add a reference to AngularJS  Add the ngApp attribute  Manual bootstrapping is also possible  Gives you more control  For example when using AMD/RequireJS
  7. 7. Model The MVC of AngularJS Controller View
  8. 8. Model Model  The business data  Exposed to the view through the $scope Controller View
  9. 9. Model  The user interface layer View Controller  Data binds to the model  Calls functions on the controller  Use declarative directives for reusable code View
  10. 10.  Directives allow you to enhance HTML with new capabilities  Start using HTML as a domain specific language  AngularJS comes with a long list of standard directives Standard directives          ngApp ngBind ngModel ngRepeat ngClick ngEnable/ngDisable ngHide/ngShow ngView …
  11. 11. Model Controller Controller  Glues the view and the model together  Provides additional functionality  Uses additional services for reusable logic View
  12. 12.  Used to create SPA style application  The page can change without using the server  The ngView is often used to render a template  HTML templates loaded when needed  Can also be pre loaded as script with type="text/ng-template" Routing  The $routeProvider service is used to configure the route  The $location service can be used to navigate  Using an anchor tag is also possible  The $routeParams service can be used to retrieve parameters  Properties named in the route URL template  Requires a dependency on ngRoute in AngularJS 1.2  Located in angular-route.js
  13. 13.  AngularJS uses dependency injection to decouple modules Dependency injection  Dependencies are automatically injected by the framework  Based on the parameter name  JavaScript is often minified in production  Need to provide AngularJS with some extra hints
  14. 14. Model Services View  Services are reusable pieces of business logic Services  Separation results in reuse and testability Controller  Created as singleton objects  Inject by AngularJS using dependency injection  Services are created as part of a module  One module can take a dependency on another module  Modules are groupings of related functionality  Also used to bootstrap the application
  15. 15.  Many general purpose services provided by AngularJS  $http  Used for XMLHttpRequest handling  $location Standard Services  Provide information about the current URL  $q  A promise/deferred module for asynchronous requests  $routeProvider  Configure routes in an SPA  $log  Logging service  Many more
  16. 16.  The basic service for doing all HTTP requests  The building block for all AJAX requests  Can be used as a function  $http(config) $http service  Provides a number of shortcut methods     $http.post(url, config) $http.get(url, config) $http.put(url, config) $http.delete(url, config)  Uses the promises API as the result  Provided by the $q service
  17. 17.  Creates a service for working with RESTful services  Much easier than using the $http object $resource  Standard functions are already preconfigured  Only the common HTTP PUT is missing  Requires a dependency on ngResource  Located in angular-resource.js
  18. 18.  AngularJS is a complete framework for client side applications  Based on the standard MVC design pattern Summary  Two way data binding makes it easy to build data entry forms  Dependency injection makes it easy to separate modules  Build with testing in mind
  19. 19. The code  Check http://msmvps.com/blogs/theproblemsolver/

×