AngularJS Programming
CLASS DATE(s):
8/10/2020 - 8/12/2020
10/14/2020 - 10/16/2020

COURSE LENGTH: 3 Days

COURSE COST: $1495.00

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

Printable version of this course
print
Register for this course
register

COURSE OVERVIEW

AngularJS training introduces the AngularJS framework, which has become a popular JavaScript framework for the development of "single page" Rich Internet Applications. The 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.
This AngularJS training course will provide an introduction to the benefits of AngularJS, so course participants can start to develop responsive applications quickly using the framework.

AUDIENCE AND PREREQUISITES

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

  

Course Cost listed does not include the cost of courseware. Course is subject to a minimum enrollment to run. Course may run virtually as a Virtual Instructor-Led (VILT) class if the minimum enrollment is not met. For more information, please contact 207-775-0244 or email: learn@vtec.org.

COURSE TOPICS:


Module 1: Advanced Objects and Functionality in JavaScript
Constructor Function
Object Properties
Constructor and Instance Objects
Namespace
Functions are First-Class Objects
Closures
Private Variables with Closures
Immediately Invoked Function Expression (IIFE)
Prototype
Inheritance in JavaScript
The Prototype Chain
Traversing Prototype Property Hierarchy

Module 2: Introduction to AngularJS
Scope and Goal of AngularJS
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

Modul 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 Responsibilities
About Constructor and Factory Functions
Defining and 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
Setting Image Source
Setting Hyperlink Dynamically
Preventing Initial Flash

Module 7: Advanced View Directives
The ng-repeat Directive
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

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 Select
Disabling an Input
Reacting to Model Changes in a Declarative Way
Example of Using the ng-change Directive

Module 9: Formatting Data with Filters in AngularJS
AngularJS Filters & Syntax
Angular Filters
Using Filters in JavaScript
The date Filter
The date's format Parameter
Using limitTo Filter
Filter Performance Considerations

Module 10: AngularJS $watch Scope Function
The $watch Function
The $watch Function Signature
The $watch Function Details
Example of Using $watch
Items of Note
Performance Considerations

Module 11: Communicating with Web Servers
The $http AngularJS Service & The Promise Interface
Complete List of Shortcut Functions
Using $http.get() & $http.post()
Combining $http POST Request Data with URL Parameters
Direct $http Function Invocation
Request Configuration Properties & Setting Up HTTP Request Headers
Caching Responses & Disabling Caching in IE9
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 &

Module 12: Custom Directives
Directive Usage Types
Directive Naming Convention
Defining & Using Custom Directive
Scope of a Directive
Isolating Scope
Creating & Copying Data to a Directive's Scope
Using External Template File
Manipulating a DOM Element
Exploring the Link Function & Event Handling
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 Approach
About Configuring a Service using its Provider
Configuring a Service using its Provider

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

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

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

Moduole 17: 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
Passing URL Parameters
Accessing Query Parameters
Configuring & Accessing Route Parameters
HTML5 Mode & Bookmarking HTML5 Mode URL

Module 18: Advanced Form Handling
Introduction to Form Validation
Validation and Model Binding
Input Type Validation
Validation Directives
Detecting Validation State
Showing Error Message
Other Status Variables
Styling Input Fields
Styling Other Areas

Module 19: 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 20: Angular 2 Preview
Two Versions of Angular
Shared Features
In Angular JS but not in Angular 2
Directive Types
Built-In Directives - Differences
Data and Event Binding Differences
What is TypeScript
TypeScript Advantages / Disadvantages
TypeScript Compilation
Basic Application Architecture
Files, Components, & Services
Moving from Angular JS to Angular 2