AngularJS Programming

Prerequisites

Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.

Objectives

In this training, attendees will learn how to:
Create single page web applications using the MVC pattern of AngularJS
Understand the programming model provided by the AngularJS framework
Define Angular controllers and directives
Control Angular data bindings
Implement Responsive Web Applications with AngularJS

Advanced Objects and Functionality in JavaScript

Basic Objects
Constructor Function
More on the Constructor Function
Object Properties
Deleting a Property
The instanceof Operator
Object Properties
Constructor and Instance Objects
Constructor Level Properties
Namespace
Functions are First-Class Objects
Closures
Closure Examples
Private Variables with Closures
Immediately Invoked Function Expression (IIFE)
Prototype
Inheritance in JavaScript
The Prototype Chain
Traversing Prototype Property Hierarchy
Prototype Chain
Inheritance Using Prototype
Extending Inherited Behavior
Enhancing Constructors
Improving Constructor Performance
Inheritance with Object.create
The hasOwnProperty Method

Introduction to AngularJS

What is AngularJS?
Why AngularJS?
Scope and Goal of AngularJS
Using AngularJS
A Very Simple AngularJS Application
Building Blocks of an AngularJS Application
Use of Model View Controller (MVC) Pattern
A Simple MVC Application
The View
The Controller
Data Binding
Basics of Dependency Injection (DI)
Other Client Side MVC Frameworks

AngularJS Module

What is a Module?
Benefits of Having Modules
Life Cycle of a Module
The Configuration Phase
The Run Phase
Module Wide Data Using Value
Module Wide Data Using Constant
Module Dependency
Using Multiple Modules in a Page

AngularJS Controllers

Controller Main Responsibilities
About Constructor and Factory Functions
Defining a Controller
Using the Controller
Controller Constructor Function
More About Scope
Example Scope Hierarchy
Using Scope Hierarchy
Modifying Objects in Parent Scope
Modified Parent Scope in DOM
Handling Events
Another Example for Event Handling
Storing Model in Instance Property

AngularJS Expressions

Expressions
Operations Supported in Expressions
AngularJS Expressions vs JavaScript Expressions
AngularJS Expressions are Safe to Use!
What is Missing in Expressions
Considerations for Using src and href Attributes in Angular
Examples of ng-src and ng-href Directives

Basic View Directives

Introduction to AngularJS Directives
Controlling Element Visibility
Adding and Removing an Element
Dynamically Changing Style Class
The ng-class Directive
Example Use of ng-class
Setting Image Source
Setting Hyperlink Dynamically
Preventing Initial Flash

Advanced View Directives

The ng-repeat Directive
Example Use of ng-repeat
Dynamically Adding Items
Special Properties
Example: Using the $index Property
Scope and Iteration
Event Handling in Iterated Elements
The ng-switch Directive
Example Use of ng-switch
Inserting External Template using ng-include

Working with Forms

Forms and AngularJS
Scope and Data Binding
Role of a Form
Using Input Text Box
Using Radio Buttons
Using Checkbox
Using Checkbox - Advanced
Using Select
Using Select - Advanced
Disabling an Input
Reacting to Model Changes in a Declarative Way
Example of Using the ng-change Directive

Formatting Data with Filters in AngularJS

What are AngularJS Filters?
The Filter Syntax
Angular Filters
More Angular Filters
Using Filters in JavaScript
Using Filters
A More Complex Example
The date Filter
The dates format Parameter
Examples of Using the date Filter
The limitTo Filter
Using limitTo Filter
Filter Performance Considerations

AngularJS $watch Scope Function

The $watch Function
The $watch Function Signature
The $watch Function Details
Canceling the Watch Action
Example of Using $watch
Things to be Aware Of
More Things to Be Aware Of
Performance Considerations
Speeding Things Up

Communicating with Web Servers

The $http AngularJS Service
The Promise Interface
The $http Service
$http Function Invocation
Callback Parameters
Request Configuration Properties
Shortcut Methods
Complete List of Shortcut Methods
Using $http.get()
Working with JSON Response
Using $http.post()
Combining $http POST Request Data with URL Parameters
The then() Method of the Promise Object
The Response Object
Making Parallel Web Service Calls
Combining Multiple Promises into One
Wait for the Combined Promise
Setting Up HTTP Request Headers
Caching Responses
Disabling Caching in IE9
Setting the Request Timeout
Unit Testing with ngMock
Writing Unit Tests

Custom Directives

What are Directives?
Directive Usage Types
Directive Naming Convention
Defining a Custom Directive
Using the Directive
Scope of a Directive
Isolating Scope
Example Scope Isolation
Using External Template File
Manipulating a DOM Element
The Link Function
Event Handling from a Link Function
Wrapping Other Elements
Accepting a Callback Function
Supplying Callback Function

AngularJS Services

Introduction to Services
Defining a Service
The factory() Method Approach
The service() Method Approach
The provider() Method Approach
Using a Service
Configuring a Service using its Provider

Unit Test using Jasmine

Introduction to Node.js
What is Jasmine?
Running Jasmine
Jasmine Folder Structure
Running Tests
Example Explained
End-to-End Testing with Protractor
Writing E2E Test with Protractor

Introduction to Single Page Application

What is a Single Page Application (SPA)?
How is it Any Different?
Why Create SPA?
It is Not All or Nothing
Challenges to SPA
Implementing SPA Using AngularJS
Simple SPA Using Visibility Control
Dynamic Templates Using ng-include
Example of Dynamic Template
SPA Using the $route Service

The Route Service

Introduction to the Route Service
Downloading the Route Service Code
Using the Route Service
Setting up the Route Table
URL Fragment Identifier
Showing the Views
Navigation
The $location Service
Programmatic Navigation
Controllers for the Views
Example Controllers for Views
Passing URL Parameters
Accessing Query Parameters
Configuring Route Parameters
Accessing Route Parameters
HTML5 Mode
Using the HTML5 Mode
Bookmarking HTML5 Mode URL

Advanced Form Handling

Introduction to Form Validation
Validation and Model Binding
Input Type Validation
Validation Directives
A Note About "required"
Detecting Validation State
Showing Error Message
Other Status Variables
Styling Input Fields
Styling Other Areas

The Promise API

Introduction
The Core API
Waiting for Multiple Ajax Calls
Changing Result Data
Promise Chaining
Caching Ajax Calls in Memory
Cache Ajax Calls on Disk
Caveat

Lab Exercises

Lab 1. Setting Up the Lab Environment
Lab 2. Objects in JavaScript
Lab 3. Getting Started with AngularJS
Lab 4. MVC with AngularJS
Lab 5. AngularJS Expressions
Lab 6. Working with Class and Style Directives
Lab 7. The ng-repeat Directive
Lab 8. Working with Form Inputs
Lab 9. Data Formatting with Filters
Lab 10. Using the $watch Function
Lab 11. Communicating with Web Servers
Lab 12. Reading Complex Data Sets From Web Servers
Lab 13. Custom Directives
Lab 14. Creating and Using Services
Lab 15. Testing
Lab 16. Basic Single Page Application (SPA)
Lab 17. Using the Route Service
Lab 18. Form Validation
Lab 19. Server Side Input Validation
Lab 20. Ajax Caching