Comprehensive AngularJS Programming
CLASS DATE(s):
Request a Class

COURSE LENGTH: 5 Days

COURSE COST: $2495

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print

COURSE OVERVIEW

he AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop and test because there is a separation of responsibilities within the code. Although there are many benefits to using the AngularJS framework it is fairly different than the way "typical" web applications involving JavaScript have been designed.

AUDIENCE AND PREREQUISITES

This course is designed for Web Developers looking to use the AngularJS JavaScript framework for development of modern web applications. Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.

  

*Course Cost listed does not include the cost of courseware or lunch. Course is subject to minimum enrollment. Course may run virtually as a Virtual Instructor-Led (VILT) class if minimum enrollment is not met.

COURSE TOPICS:


Module 1: Advanced Objects and Functionality in JavaScript
Constructor Function
The instanceof Operator
Constructor and Instance Objects
Namespace
Functions Are First-Class Objects
Closures & Private Variables with Closures
Immediately Invoked Function Expression (IIFE)
The Module Pattern
Prototype
Inheritance in JavaScript & Using Prototype
Inheritance with Object.create
The hasOwnProperty Method

Module 2: 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
The View
The Controller
Data Binding
Basics of Dependency Injection (DI)
Other Client Side MVC Frameworks

Module 3: AngularJS 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

Module 4: AngularJS Controllers
Controller Main ResponsibilitiesAbout Constructor and Factory Functions
Defining & Using a Controller
Controller Constructor Function
Using Scope Hierarchy
Modifying Objects in Parent Scope
Modified Parent Scope in DOM
Handling Events
Storing Model in Instance Property

Module 5: AngularJS Expressions
Expressions
Operations Supported in Expressions
AngularJS Expressions vs JavaScript Expressions
What Is Missing in Expressions
Considerations for Using src and href Attributes in Angular
Examples of ng-src and ng-href Directives

Module 6: 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

Module 7: Advanced View Directives
The ng-repeat Directive
Dynamically Adding Items
Special Properties
Scope and Iteration
Event Handling in Iterated Elements
Inserting External Template using ng-include

Module 8: 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

Module 9: Formatting Data with Filters in AngularJS
What Are AngularJS Filters?
The Filter Syntax
Using Filters in JavaScript
The date Filter
The date's format Parameter
The limitTo Filter
The 'filter' Filter
Filter Performance Considerations

Module 10: AngularJS $watch Scope Function
The $watch Function
The $watch Function Signature
The $watch Function Details
Canceling the Watch Action
Items of Note
Performance Considerations

Module 11: Communicating with Web Servers
The $http AngularJS ServiceThe Promise Interface
Shortcut Functions
Using $http.get() & $http.post()
Combining $http POST Request Data with URL Parameters
Direct $http Function Invocation
Caching Responses
Setting the Request Timeout
The then() Function of the Promise Object
The Response Object & Working with JSON Response
Using success() and error() For Callbacks
Making Parallel Web Service Calls
Combining Multiple Promises into One

Module 12: Custom Directives
Directive Usage Types
Defining a Custom Directive
Scope of a Directive & Isolating Scope
Creating a Scope for the Directive
Copying Data to a Directive's Scope
Using External Template File
Manipulating a DOM Element
The Link Function
Event Handling from a Link Function
Wrapping Other Elements
Accepting & Supplying a Callback Function
Supplying Argument to Callback

Module 13: AngularJS Services
Introduction to Services
Defining a Service
The factory() Method Approach
The service() Method Approach
Using a Service
The provider() Method ApproachAbout Configuring a Service using its Provider
Configuring a Service using its Provider

Module 14: Introduction to Single Page Application
What is a Single Page Application (SPA)?
How Is It Any Different?
Why Create SPA?
It's 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

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

Module 16: 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

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

Module 18: Advanced Custom Directive
Controller for a Directive
Using the Controller As Syntax
Using an Existing Standalone Controller
Controller and the Link Function
Compile and Link Phases
Manipulating the DOM Trees
Defining Compile and Link Functions
Wrapping a jQuery Component from a Directive
Setting Options of jQuery Components
Setup One Way Data Binding
Setup Two Way Data Binding

Module 19: Introduction to Node.js
What Is Node.js?
Application of Node.js
Installing Node.js and NPM
"Hello, Node World!"
How It Works
Built on JavaScript: Benefits
Traditional Server-Side I/O Model
Disadvantages of the Traditional Approach
Event-Driven, Non-Blocking I/O
Concurrency
Using Node Package Manager (NPM)
Express

Core Modules
Nature of a Node.js Project
Introduction to Modules
A Simple Module & Using the Module
Directory Based Modules
Making a Module Executable
Loading Module from node_modules Folders
Dependency Management Using NPM
About Global Installation
Setting Up Dependency
Package Version Numbering Syntax
Installing a Package, Updating & Uninstalling Packages
Alternate Dependency Management

Module 21: Testing JavaScript with Jasmine
Supported Integrations
Jasmine in Standalone Mode & Fold Structure
The Spec Runner Page Viewing Test Results
Specs (Unit Tests), Expectations (Assertions), & Matchers
Using the not Property
Test Failures
Setup and Teardown in Unit Test Suites
Disabling Test Suites and Specs
Method Stubbing and Call Tracking with Spies
spyOn Setup Variations
Simulating Exceptions
Asynchronous Calls

Module 22: Unit Testing AngularJS Code
The ngMock Module
Creating the Spec Runner HTML
Testing a Service
Better Injected Variable Names
Testing a Controller
End-to-End Testing with Protractor
Testing a Web Page
How the Page Works
Create a Configuration File
Run the Test
Locating Elements by AngularJS Model & Binding
Sending User Input

Module 23: Testing Using Karma
What Is Karma?
Installing Karma
Configuration File
Run the Test

Module 24: Build and Dependency Management
Bower Package Manager
Managing Packages Using Bower
Describing Dependency
Grunt Build Manager
Installing Grunt Components
Writing a Grunt Build Script
Running Grunt & JSHint Task
Compiling Less Files & Compressing CSS Files
Gulp vs. Grunt
Installing Gulp Components
Writing a Build Script
Running Gulp

Module 25: Best Practices, Style Guides & Using Bootstrap
Project Directory Structure
Named vs. Anonymous Functions
Make Dependency Injection Safe
Service Best Practices
Responsive Web Development
The Grid System
CSS Media Queries & Navigation
Integrating Bootstrap Components with jQuery
The Angular UI Bootstrap Modules
Plunker
Carousel, Datepicker, Dropdown, Pagination, Progress Bar, Tabs