Getting started with angular js

Getting started with angular js

• 1.
  Getting started withAngularJS Maurice de Beijer
• 2.
  Who am I? Mauricede Beijer The Problem Solver Microsoft Integration MVP Freelance developer DevelopMentor instructor Twitter: @mauricedb http://msmvps.com/blogs/theproblemsolver/ • Blog: http://www.TheProblemSolver.nl • Web: mauricedb@develop.com • E-mail: • • • • • • 2
• 3.
  What are wegoing to cover? • • • • • What is AngularJS? Getting started Directives Routing Services • Demos at: – http://bit.ly/dmangularjs • Source code at: – https://github.com/mauricedb/DM-Starting-AngularJS 3
• 4.
  What is AngularJS? •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 – Version 1.0 was released in June 2012 – Currently at 1.2.9 • 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 4
• 5.
  Key features • ModelView Controller architecture – A well known and proven architecture • Declarative two way data binding – Automatically synchronizes values between Model and View • Dynamic templates – 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 5
• 6.
  Bootstrapping • Automatic 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 6
• 7.
  The MVC ofAngularJS 7
• 8.
  Model • The businessdata • Exposed to the view through the $scope 8
• 9.
  View • • • • The user interfacelayer Data binds to the model Calls functions on the controller Use declarative directives for reusable code 9
• 10.
  Controller • Glues theview and the model together • Provides additional functionality • Uses additional services for reusable logic 10
• 11.
  Services • Services arereusable pieces of business logic – Separation results in reuse and testability • 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 11
• 12.
  Standard Services • Manygeneral purpose services provided by AngularJS – $http • Used for XMLHttpRequest handling – $location • 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 12
• 13.
  Dependency injection • AngularJSuses dependency injection to decouple modules – 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 13
• 14.
  Standard directives • Directivesallow you to enhance HTML with new capabilities – Start using HTML as a domain specific language • AngularJS comes with a long list of standard directives – ngApp – ngBind – ngModel – ngRepeat – ngClick – ngEnable/ngDisable – ngHide/ngShow – ngView – … 14
• 15.
  Custom directives • TurnHTML into your Domain Specific Language – Use templates to embed complete blocks • Can use either attributes, elements, CSS classes or comments • Directives let you interact with the DOM – The place for jQuery code 15
• 16.
  Routing • Used tocreate 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" • 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 16
• 17.
  $http service • Thebasic service for doing all HTTP requests – The building block for all AJAX requests • Can be used as a function – $http(config) • 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
• 18.
  $resource • Creates aservice for working with RESTful services – Much easier than using the $http object • Standard functions are already preconfigured – Only the common HTTP PUT is missing • Requires a dependency on ngResource – Located in angular-resource.js 18
• 19.
  Questions ? The presentation andsource code will be available http://msmvps.com/blogs/theproblemsolver/ 19