AngularJS Basics and Best Practices - CC FE &UX
2 likes794 views
This document discusses AngularJS basics and best practices. It covers what AngularJS is, why it's used, its core framework features like MVVM, dependency injection, and two-way data binding. It also describes the main framework components like modules, scopes, views, controllers, services, routers, resolvers, and directives. The document concludes with a section on unit testing AngularJS applications with Karma and Jasmine.
AngularJS Basics and Best Practices - CC FE &UX
- 1. AngularJS Basics & Best Practices Competence Center Front-end & UX Dennis Jaamann & Frédéric Ghijselinck Front-end devs
- 2. AngularJS Basics & Best Practices 1. What is AngularJS? 2. Why AngularJS? 3. Framework features 4. Framework components 5. Unit Testing With Karma 6. Best Practices
- 3. 1. What is AngularJS? ▪ JavaScript MVVM framework ▪ Started in 2009 by Miško Hevery (Google) ▪ Declarative HTML ▪ Easy to create your own DSL ▪ Decoupling of DOM manipulation and application logic
- 4. 2. Why AngularJS ▪ Becoming an industry standard for enterprise applications ▪ Large community ▪ Very active project ▪ Mature JavaScript framework ▪ Improved JavaScript development experience ▪ Structured JavaScript applications ▪ Separation of concerns ▪ Testability ▪ Modularity ▪ Maintainability ▪ Productivity ▪ Lots of tooling around AngularJS ▪ Documentation is not the best around
- 5. 3. Framework features ▪ No ▪ Class (inheritance) ▪ Interfaces ▪ Type safety ▪ Place for storing data models ▪ Yes ▪ MVVM ▪ IOC container (DI) ▪ Two way data binding ▪ Testable javascript code ▪ Separation of concerns
- 6. 3. Framework features - MVVM ▪ Angular is uses MVVM ▪ View ▪ HTML with Angular syntax ▪ ViewModel ▪ Known in Angular as $scope ▪ In view controllers ▪ In directives ▪ Model ▪ Services
- 7. 3. Framework features - Dependency Injection ▪ Angular uses dependency injection ▪ Constructor injection by default ▪ Manual injection also possible ▪ Loose coupling of application components ▪ Controllers ▪ Services ▪ Directives ▪ ...
- 8. 3. Framework features - 2-way data binding ▪ Classic frameworks use 1-way databinding ▪ Merge model and template to show view ▪ Updates to model not automatically reflected ▪ A lot of manual code needs to be written to update the view when the model changes ▪ More code === more bugs
- 9. 3. Framework features - 2-way data binding ▪ AngularJS uses 2-way databinding ▪ Template compiled to view ▪ Updating ▪ On view update ⇒ Update model ▪ On model update ⇒ update view ▪ “Dirty checking” used to know what to update ▪ “Model” === $scope ▪ Automatic process ▪ Less code === less bugs
- 10. 3. Framework features - Dirty checking ▪ Browser API’s suck currently (no Observables for DOM objects to know when something changes) ▪ Angular needs a manual loop to know ▪ Whether the DOM element changed and update the model ▪ Whether the model changed and update the view ▪ Multiple passes by default ▪ Only update when scope remains unchanged for x passes ▪ Maximum 10 passes ▪ Pitfall ▪ Dirty checking can slow down application substantially ▪ Potentially uses a lot of CPU cycles ▪ Keep objects/functions on your $scope as few as possible ▪ Less updates === less dirty checks
- 11. 3. Framework features - Testable JavaScript code ▪ Angular core team wrote unit test runner called Karma ▪ Adapters for most common unit testing frameworks ▪ Jasmine (default, preffered) ▪ Mocha ▪ QUnit ▪ Integrates well with automation tools to setup CI ▪ Grunt ▪ Gulp ▪ Integration test library called Protractor ▪ NodeJS powered ▪ Based on WebDriverJS ▪ Mocks library to easily mock out dependencies ▪ angular-mocks
- 12. 4. Framework components - Module ▪ Modules are containers for application components ▪ At least 1 module needed (main module) ▪ Can have submodules ▪ No out of the box lazy loading ▪ Plugins exist
- 13. 4. Framework components - Module ▪ Example of a main module with submodules
- 14. 4. Framework components - Scope ▪ Also known as view model in other frameworks ▪ Single source of truth ▪ Variables ▪ Functions ▪ Use in ▪ Controllers ▪ Directives ▪ Avoid in ▪ Services ▪ Sibling scopes cannot talk to each other ⇒ use events ▪ $broadcast / $emit ▪ $on / $watch
- 15. 4. Framework components - Scope ▪ Inject $scope as a dependency ▪ $scope can contain variables and functions as members
- 16. Exercise 1 - Bootstrap your application 1. Switch to branch exercise1 2. In index.html a. TODO 1 - Bootstrap your angular application and add controller 'ApplicationController' b. TODO 2 - Load app.js 3. In app.js a. TODO 3 - Create a controller 'ApplicationController' on the module, pass $scope and $log b. TODO 4 - Log 'initializing application' c. TODO 5 - Create a scope variable called 'hello', with content 'Hello Ordina' 4. In index.html a. TODO 6 - Show the scope variable 'hello'
- 17. 4. Framework components - View ▪ Also called templates or partials ▪ Regular HTML enhanced with ▪ Angular directives ▪ Custom directives ▪ Expressions {{ someExpression }}
- 18. 4. Framework components - View ▪ Don’t ▪ Complex logic in expressions in view ▪ Refactor to scope function when possible ▪ Keep data-ng-controller directives out of your view ▪ Decouple view from controller (Reusability) ▪ Do ▪ Invoke scope functions ▪ Display scope variables
- 19. Exercise 2 - Leveraging modules and including views 1. Switch to branch exercise2 2. In index.html a. TODO 1 - Remove the application controller b. TODO 2 - Import scripts/common/module.js c. TODO 3 - Import scripts/common/controllers/navigationController.js 3. In scripts/common/module.js a. TODO 4 - Create and instantiate a new module called 'common' 4. In app.js a. TODO 5 - Remove the controller b. TODO 6 - Inject the common module 5. In index.html a. TODO 7 - Create a new file views/common/navigation.html and include
- 20. Exercise 2 - Leveraging modules and including views 6. In scripts/common/controllers/navigationController.js a. TODO 8 - Create new controller on common module, inject $scope and $window b. TODO 9 - Create a new function onItemClick(item) on the scope, $window.alert the item
- 21. 4. Framework components - Controller ▪ Don’t ▪ No DOM interactions ⇒ Encapsulate DOM interaction in directives ▪ No data manipulation ⇒ Encapsulate data manipulation in services ▪ Put everything on the scope ⇒ only what is needed (dirty checking performance) ▪ Share code/state between different controllers ▪ Manage lifecycle of other components ▪ Ajax requests ⇒ Encapsulate Ajax requests in services ▪ Do ▪ Scope variables ▪ View related logic ▪ Callbacks ▪ Handlers ▪ Broadcasts ▪ ...
- 22. 4. Framework components - Controller ▪ Controller example
- 23. 4. Framework components - Router ▪ Angular Module ▪ Configure which template/controller pair to use ▪ Keep data-ng-controller directive out of your HTML ⇒ use template with different controllers ▪ A route can be configured and consists of ▪ Template or TemplateUrl (required) ▪ Controller (required) ▪ Resolver (optional) ▪ Deeplinking out of the box
- 24. 4. Framework components - Router ▪ Example of route configuration
- 25. Exercise 3 - Using routes and deeplinking 1. Switch to branch exercise3 2. In index.html a. TODO 1 through 6 - Import the correct files b. TODO 7 - Create a div with a data-ng-view directive to enable routing 3. In app.js a. TODO 8 - Inject ngRoute module b. TODO 9 - When default route, load tweetsOverview.html and use TweetsOverviewController c. TODO 10 - When /about, load about.html and use AboutController d. TODO 11 - When /contact, load contact.html and use ContactController e. TODO 12 - Otherwise redirect to default route 4. In navigation.html a. TODO 13 - Provide the correct data-ng-href for each link
- 26. 4. Framework components - Service ▪ Don’t ▪ DOM manipulation ▪ Redirect to a route ▪ Manipulate lifecycle of other components ▪ Do ▪ Ajax requests ▪ Encapsulate complex business logic ▪ Data manipulation ▪ Filtering / Sorting
- 27. 4. Framework components - Service ▪ An example of a service
- 28. Exercise 4 - Creating a service 1. Switch to branch exercise4 2. In index.html a. TODO 1 through 4 - Import the correct files 3. In app.js a. TODO 5 - Inject ngResource b. TODO 6 - When /tweetdetail/:id, load tweetdetail.html and use TweetDetailController 4. In twitterSearchService.js a. TODO 7 - Create a new resource with url /doSearch?q=:searchTerm&count=10 b. TODO 8 - Create a new function searchTweets(searchTerm) c. TODO 9 - resource.get(searchTerm) and return a promise 5. In twitterOverviewController.js a. TODO 10 - Call searchTweetsMethods on TwitterSearchService and handle promise b. TODO 11 - Create a succeshandler for tweets and put result on $scope.tweets
- 29. 4. Framework components - Resolver ▪ Part of a route ▪ Preload data from a service ▪ Inject data into controller ▪ Less code in controller ▪ Better testability ▪ Better separation of concerns
- 30. 4. Framework components - Directive ▪ Extend HTML with custom tags ▪ Can have a dedicated template ▪ Can have a dedicated controller ▪ Do any DOM manipulation here, not in controller ▪ Has its own scope ▪ Can have its own controller ▪ Only use when you want to expose API for other directives ▪ Using data-ng-include? ⇒ Refactor to use a directive
- 31. 4. Framework components - Directive ▪ Example of a directive
- 32. Exercise 5 - Using resolvers and directives 1. Switch to branch exercise5 2. In app.js a. TODO 1 - Create a resolver fetching all tweets from the TwitterSearchService b. TODO 2 - Create a resolver fetching tweet details by id from the TwitterSearchService (use $route.current. params.id) 3. In tweetDetailController.js a. TODO 3 - Inject tweet & put on scope 4. In tweetsOverviewController.js a. TODO 4 - Inject tweets & put tweet.statuses on scope 5. In tweetDirective.js a. TODO 5 - Create a directive that loads tweetDirective.html (use templateUrl) 6. In tweetsOverview.html a. TODO 6 - Use the tweetDirective
- 33. Exercise 5 - Using resolvers and directives 7. In tweetDirective.html a. TODO 7 - Show the created_at date in the directive b. TODO 8 - Show the tweet.user.name c. TODO 9 - Show the tweet.place.name and tweet.place.country d. TODO 10 - Show the tweet.user.profile_image_url in an image tag
- 34. 5. Unit Testing With Karma ▪ Karma = unit test runner (by angular core team) ▪ configuration file ▪ test suites ▪ headless/real browser ▪ Automagically generate a config file ▪ karma init ▪ Simply run the test suite ▪ karma start
- 35. 5. Unit Testing - Jasmine ▪ Jasmine = unit testing framework ▪ test suite with specs:
- 36. 5. Unit Testing - Jasmine included matchers: expect().toBe(); expect().toEqual(); expect().toMatch(); expect().toBeDefined(); expect().toBeUnDefined(); expect().toBeNull(); expect().toBeTruthy(); expect().toBeFalsy(); expect().toContain(); expect().toBeLessThan(); expect().toBeGreaterThan(); expect().toBeCloseTo(); expect().toThrow();
- 37. 5. Unit Testing - Jasmine ▪ setup & teardown ▪ beforeEach() ▪ afterEach() ▪ beforeAll() ▪ afterAll() ▪ Angular test ▪ getting the module ▪ injecting the controller
- 38. 5. Unit Testing - Controller
- 39. 5. Unit Testing - Service
- 40. 5. Unit Testing - Directive
- 41. 6. Best practices ▪ Always prepend any directive with “data-” ▪ Valid HTML5 ▪ Compatible in all browsers (IE sux :)) ▪ Prefer attribute or element notation over comment and class notation ▪ Example ▪ <div data-my-custom-directive></div> (Preferred) ▪ <my-custom-directive></my-custom-directive>
- 42. 6. Best practices ▪ Always use strict mode ▪ Enforces better programming practices ▪ Undefined global variables throw an error ▪ No usage of the with statement ▪ Create read-only properties ▪ Create non extensible objects ▪ ...
- 43. 6. Best practices ▪ Wrap your components with a self executing anonymous function ▪ Keeps the global scope clean ▪ Better for minification
- 44. 6. Best practices ▪ Single responsibility ▪ 1 file per component ▪ Directive ▪ Service ▪ Controller ▪ Filter ▪ App ▪ ..
- 45. 6. Best practices ▪ Organize your files by feature ▪ 1 module per feature
- 46. 6. Best practices ▪ Make your service methods return a promise ▪ You can use them in route resolvers ▪ Interpolated view expressions are smart enough to wait for the promise to resolve before rendering ▪ For example {{somePromiseOnTheScope}}
- 47. 6. Best practices ▪ Create an application workflow ▪ Yeoman ▪ Scaffolding tool to quickly generate files and projects ▪ You can make your project-specific tools ▪ Grunt ▪ Build ▪ Test ▪ Concatenate ▪ Minify ▪ CDNify ▪ Bower ▪ Fetch external dependencies ▪ Integrate with CI server
- 48. Resources ▪ Books ▪ http://www.amazon.com/Mastering-Web-Application-Development-AngularJS/dp/1782161821 ▪ http://www.amazon.com/Pro-AngularJS-Experts-Voice-Development/dp/1430264489/ ▪ http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852 ▪ http://www.amazon.com/ng-book-Complete-AngularJS-Ari-Lerner/dp/099134460X/ ▪ Other ▪ https://github.com/johnpapa/angularjs-styleguide ▪ http://www.adamcraven.me/a-better-module-structure-for-angular/ ▪ https://github.com/daniellmb/angular-test-patterns ▪ http://trochette.github.io/Angular-Design-Patterns-Best-Practices/