AngularJS intro

2,216 views

Published on

An introduction to AngularJS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,216
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AngularJS intro

  1. 1. AngularJs CHRISTOFFER NORING INTRODUCTION
  2. 2. What is AngularJs? DOM manipulation (move, create, replace, etc) - Super heroic Javascript MVW Framework, “DOM manip-way” <div> <span>content</span> <span>new element</span> </div> Model View Whatever - SPA, single page application - Brings MVC capbability to javascript making it easier to test “Angular-way” <div ng-app> <span ng-model=“name”></span> </div> - Angular deemphasizes DOM manipulation - Angular is Test focused, support for unit testing, ui testing mocking etc.. Augmenting – add functionality to existing DOM
  3. 3. Why should you care? AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons (google) Started out as a business but went on to be open source framework, currently stable release at 1.2 AngularJs Knockout
  4. 4. Angular learning curve
  5. 5. The presentation UI Ui directives, routing etc Middle Services, DI Backend $http Writing directives Testing
  6. 6. Killer features Data binding Routing Dependency Injection Testing, unit and e2e, Mocking and Directives, aka User Controls Ajax encapsulation, REST support Filters …
  7. 7. Angular MVW Controller controller Decorates scope with primitives, Decorates objects and callbacks. Responsible for constructing a model Scope scope model detect changes to model objects and create an execution context for expressions View uses scope view Binds
  8. 8. Worlds smallest app <script src="”angular.js”"></script> Include angular script <div ng-app> {{ 1+2 }} </div> Create an angular application Expression
  9. 9. Demo – building an app ng-app ng-model ng-controller ng-repeat Filtering Routing (enter app.js)
  10. 10. Useful directives ng-app creates the app ng-model creates a 2-way binding <input type="text" ng-model="name" /> ng-repeat repeats data <ul><li ng-repeat="item" in items">{{item}}</li></ul> ng-class renders a css class given a boolean expression ex ng-controller points out a controller with its own scope <div ng-controller="userController"> </div> list.length > 0 ? "show": "hide" ng-show determines whether an element should be visible <div ng-show=”hasErrors”>{{errorMessage}}</div>
  11. 11. Dependency injection Injection just works, no hassle var app = modules("myApp"); app.controller("MyController", function($scope,userService){ $scope.user = userService.getUser(); }); But, enter minification var app = modules("myApp"); app.controller("MyController", ["$scope", "userService",function($scope,userService){ $scope.user = userService.getUser(); }]); Minification safe, strings are left intact Variables are minified to ex a,b Angular cant find it!
  12. 12. Demo Dependency injection Bootstrapping Creating a service Inject a service
  13. 13. Demo Testing Karma, Jasmine What can I test? Demo of karma and different tests, mocking Karma Coverage
  14. 14. Backend - $http Shortcut methods Configuration object $http({ method: "GET", url: "/Users" }) .success(successCallback) .error(errorCallback); Returns a promise $http.get(url).success(successCallback); $http.post(url, data, config).success(successCallback) $http.put(url, data, config); $http.delete(url, config); $http.jsonp(url, config); interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in time
  15. 15. Backend demo Demo with call to visual studio controller, get and post
  16. 16. Directives – user controls <my-directive attr=”boundProperty” >hi there</my-directive> Directive logic Hi there Charlie <my-directive attr=”boundProperty” /> Directive logic
  17. 17. Directives demo Basics Demo of ChartJs + other directives
  18. 18. E2e testing demo
  19. 19. Organizing your code - templates
  20. 20. UI- bootstrap Is a subset of bootstrap especially adjusted to fit AngularJs http://angular-ui.github.io/bootstrap/ And many more…
  21. 21. Further reading http://docs.angularjs.org/api www.ng-newsletter.com https://github.com/angular/angular-seed http://egghead.io/ http://www.pluralsight.com https://github.com/softchris/angulartemplate www.google.com Shameless self promotion  Google is your friend
  22. 22. Questions?

×