This course explores using the Angular model-view-controller framework to develop robust client-side applications that work in web browsers. Angular adds a structured framework that binds model data to DOM elements without the need for to program the interaction. This course uses a progressive approach to quickly introduce how Angular binds JavaScript data and functions to HTML, how the digest cycle is used to update the DOM and trigger JavaScript methods bidirectionally, building services to implement business processes, defining routes for single-page applications, creating custom directives to simplify presentations, and communicating with web services to get and put data.

Unit testing is stressed early in the course and used throughout the labs. End-to-end integration testing explores testing the components together and driving tests through the user interface. The progressive, layered approach provides a rock-solid foundation in how to build Angular applications in a short time frame.

Course Duration: 3 days
Prerequisites:

Before taking the course students should have the following:

  • Familiarity with HTML5 and CSS3
  • Experience with client-side JavaScript programming, including using closures and prototypes
  • Object-oriented programming and Node.js experience is a plus
Hardware and Software Requirements:
  • Administrative privileges on the computer used in class
  • Internet connectivity
    • Node.js and bower modules will be installed from their respective repositories on the Internet and any firewalls or restrictions on browsing must allow access
  • An IDE designed for client-side development
    • WebStorm, Komodo and Brackets are Excellent Candidates
  • The Chrome web browser
  • Node.js and Git
Course Outline:
  • Foundations
    • Web Application Foundations
    • Angular
    • Modules

 

  • Directives and Expressions
    • Angular and HTML
    • Compilation
    • Model Data
    • Data Binding

 

  • Node.js
    • Node Library Overview
    • Node Package Manager
    • Running Node Applications
    • Node in the IDE
    • A Node Web Server

 

  • Models and Controllers
    • Defining the Application
    • Defining a Controller
    • Initializing Model Data
    • Declaring Actions and Linking to Them

 

  • Unit Tests
    • Testing Paradigms
    • Building Jasmine Unit Tests
    • Testing Controller Logic
    • Focusing on Edge-Cases

 

  • Services, Collections and Filters
    • Services
    • Injecting Services into Controllers
    • Using Collections in $scope
    • Iterating Over Collections in HTML
    • Collections of Objects
    • Filtering Collections
    • Defining Filters with Models
    •  Defining Filters Using Functions
    • Constant and Global Values

 

  • Scope, Routing and Templates
    • Defining Scopes
    • Nested and Isolate Scopes
    • Adding Observers in The Application
    • The Digest Cycle
    • The Single-Page-Application and Routing
    • Defining Routes
    • Integrating Templates

 

  • End-to-End Testing
    • Integration Testing
    • Driving the User Interface

 

  • Server Communication with AJAX
    • Promises in JavaScript
    • Communicating with $Http and $Resource
    • Angular in A Model-View-View Model (MVVM) World

 

  • Directives
    • Directive Conventions
    • Defining Custom Directives

 

  • Scaffolding
    • Angular-Seed, Angular-Enterprise-Seed, Angular-Sprout
    • Creating A Scaffold with Yeoman