AngularJS Web Application Development Training

Course Outline

• Introduction and Overview

  • Features and benefits of AngularJS
  • Extending HTML for web applications
  • Separating concerns and testability

• Architecting AngularJS

  Assembling the application

  • Bootstrapping the application with ng–app
  • Modularizing functionality with angular.module()
  • Managing dependencies with dependency injection
  • Annotating modules for minification

  Coding AngularJS controllers

  • Attaching the controller with ng–controller
  • Connecting the $scope to the controller
  • Implementing controller properties and methods
  • Employing the controller as syntax

  Demystifying Angular internals

  • Dissecting the digest cycle
  • Observing expressions with $scope.$watch()
  • Integrating external libraries with $scope.$apply()

• Constructing an Interactive User Interface

  Applying directives to templates

  • Binding to HTML with ng–model
  • Interleaving AngularJS expressions with HTML
  • Displaying sets of data with ng–repeat
  • Piping data into AngularJS filters
  • date
  • currency
  • filter
  • orderby

  Integrating forms with AngularJS

  • Manipulating forms and inputs with the form controller
  • Binding to input fields
  • text
  • date
  • radio
  • checkbox
  • select
  • Toggling form control state with ng–show and ng–disabled

  Validating form input

  • Exploiting HTML5 attributes: required, min, max, pattern
  • Harnessing $error, $dirty, and $invalid in expressions
  • Styling with Angular CSS classes: ng–valid, ng–invalid, ng–pristine, ng–dirty

• Designing a Polished User Interface

  Working with images and links

  • Binding image source URLs with ng–src
  • Incorporating bound links with ng–href

  Supporting internationalization and accessibility

  • Providing local rules
  • Applying localization with ngPluralize and ngMessageFormat
  • Leveraging the ngAria module

• Harnessing AngularJS Services

  Navigating with the routing service

  • Dividing application functionality across multiple views
  • Specifying the ng–view and page layout
  • Configuring the $routeProvider service
  • Mapping route URLs to templates

  Connecting to external REST API data

  • Performing CRUD operations with the $http service
  • get()
  • post()
  • delete()
  • put()
  • Retrieving JSON data asynchronously
  • Mapping JSON data into JavaScript objects

  Testing AngularJS functionality

  • Unit testing controllers with Jasmine
  • Mocking HTTP with $httpbackend

• Extending AngularJS

  Developing custom components

  • Selecting the appropriate provider
  • constant
  • value
  • factory
  • service
  • Coding a custom filter

  Creating custom directives

  • Implementing restrictions for elements or attributes
  • Specifying template markup or templateUrl
  • Isolating directive scope
  • Producing one– and two–way data bindings

• Animating AngularJS Applications

  • Including the ngAnimate module
  • Hooking into AngularJS animation triggers
  • Writing CSS transitions and animations
  • Incorporating drag and drop