Telephone: 0208 942 5724
Open: 09:00a.m. to 17:30p.m. Monday to Friday

AngularJS Introduction

Duration: 3 Days


AngularJS is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices. AngularJS, which is maintained by Google, brings the power of the Model-View-Controller (MVC) pattern to the client, providing the foundation for complex and rich web apps. It allows you to build applications that are smaller, faster, and with a lighter resource footprint than ever before.


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

Course Topics:

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

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 date's 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
Cancelling 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 $
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

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

Click Here for printer friendly version of outline

Ring 0208 942 5724 if you require further details or would like to book a training course

Aspect Training, 20 Coombe Road, New Malden, Surrey, KT3 4QE

© 2013 Aspect Training