Comprehensive AngularJS Programming Training in Olympia

Enroll in or hire us to teach our Comprehensive AngularJS Programming class in Olympia, Washington by calling us @303.377.6176. Like all HSG classes, Comprehensive AngularJS Programming may be offered either onsite or via instructor led virtual training. Consider looking at our public training schedule to see if it is scheduled: Public Training Classes
Provided there are enough attendees, Comprehensive AngularJS Programming may be taught at one of our local training facilities.
We offer private customized training for groups of 3 or more attendees.

Course Description

 
This 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. The Comprehensive AngularJS Programming Training course will provide an introduction to AngularJS and commonly related topics including the Bootstrap responsive framework and popular build tools. Once they've completing the course participants can begin developing AngularJS applications with responsive features quickly and easily.
Course Length: 5 Days
Course Tuition: $2090 (US)

Prerequisites

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

Course Outline

 
Chapter 1. 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)
The Module Pattern
Module Pattern Example
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
Summary
 
Chapter 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
A Simple MVC Application
The View
The Controller
Data Binding
Basics of Dependency Injection (DI)
Other Client Side MVC Frameworks
Summary
 
Chapter 3. 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
Summary
 
Chapter 4. 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
Summary
 
Chapter 5. 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
Summary
 
Chapter 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
Summary
 
Chapter 7. 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
Summary
 
Chapter 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
Example of Using the ng-change Directive
Summary
 
Chapter 9. Formatting Data with Filters in AngularJS
 
What Are AngularJS Filters?
The Filter Syntax
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
The 'filter' Filter
Filter Performance Considerations
Summary
 
Chapter 10. AngularJS $watch Scope Function
 
The $watch Function
The $watch Function Signature
The $watch Function Details
Canceling the Watch Action
Example of Using $watch
Items of Note
More Items of Note
Performance Considerations
Summary
 
Chapter 11. Communicating with Web Servers
 
The $http AngularJS Service
The Promise Interface
The $http Service
Using $http Service
Shortcut Functions
Complete List of Shortcut Functions
Using $http.get()
Using $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
Combining Multiple Promises into One
Wait for the Combined Promise
Summary
 
Chapter 12. Custom Directives
 
What are Directives?
Directive Usage Types
Directive Naming Convention
Defining a Custom Directive
Using the 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 a Callback Function
Supplying Callback Function
Supplying Argument to Callback
Summary
 
Chapter 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
Summary
 
Chapter 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
Summary
 
Chapter 15. 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
Summary
 
Chapter 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
Summary
 
Chapter 17. 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
Summary
 
Chapter 18. Advanced Custom Directive
 
Controller for a Directive
Example Controller
Using the Controller As Syntax
Using an Existing Standalone Controller
Controller and the Link Function
Compile and Link Phases
Example Source and Instance Trees
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
Summary
 
Chapter 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
Summary
 
Chapter 20. Module and Dependency Management
 
Nature of a Node.js Project
Introduction to Modules
A Simple Module
Using the Module
Directory Based Modules
Example Directory Based Module
Using the Module
Making a Module Executable
Core Modules
Loading Module from node_modules Folders
Dependency Management Using NPM
Installing a Package
About Global Installation
Setting Up Dependency
Package Version Numbering Syntax
Updating Packages
Uninstalling Packages
Alternate Dependency Management
Summary
 
Chapter 21. Testing JavaScript with Jasmine
 
What Is 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
More on Matchers
Examples of Using Matchers
Using the not Property
Test Failures
Setup and Teardown in Unit Test Suites
Example of beforeEach and afterEach Functions
Disabling Test Suites and Specs
Method Stubbing and Call Tracking with Spies
A Spy Example
spyOn Setup Variations
Simulating Exceptions
Asynchronous Calls
Summary
 
Chapter 22. Unit Testing AngularJS Code
 
Introduction
The ngMock Module
Creating the Spec Runner HTML
Testing a Service
Unit Test Specification for a Service
Better Injected Variable Names
Testing a Controller
Unit Test Specification for a Controller
Testing a "this" Based Controller
End-to-End Testing with Protractor
Installing Protractor
Testing a Web Page
How the Page Works
Write a Simple Test Specification
Create a Configuration File
Run the Test
Locating Elements by AngularJS Model
Locating Elements by Binding
Sending User Input
Summary
 
Chapter 23. Testing Using Karma
 
What Is Karma?
Installing Karma
Configuration File
Run the Test
Summary
 
Chapter 24. Build and Dependency Management
 
Introduction
Bower Package Manager
Managing Packages Using Bower
Using Bower Packages
Describing Dependency
Grunt Build Manager
Installing Grunt Components
Writing a Grunt Build Script
Running Grunt
Running JSHint Task
Compiling Less Files
Compressing CSS Files
Gulp Build Manager
Gulp vs. Grunt
Installing Gulp Components
Writing a Build Script
Running Gulp
Compiling Less Files
Summary
 
Chapter 25. Best Practices and Style Guides
 
About a Project Structure
Project Directory Structure
Component Files
Example Component Files
Concatenating Component Files
Named vs. Anonymous Functions
Make Dependency Injection Safe
Use the Newer Controller As Syntax
Controller Code Layout
Service Best Practices
Summary
 
Chapter 26. Bootstrap Overview
 
What Is Bootstrap
Keywords from bower.js
Bootstrap History
Responsive Web Development
Responsive Grid Layout
Reusable GUI Components
JavaScript
The Mobile First Philosophy
Why RWD Matters
Responsive Page Views
Less
Getting Bootstrap
Bootstrap Content Delivery Network
Other Setup Options
The Bootstrap Core Files
To Min or Not to Min
Summary
 
Chapter 27. Getting Started with Bootstrap
 
Bootstrap Basic Page Template
The Viewport Meta Tag
The user-scalable Property
Including Bootstrap JavaScript Files
Plugin Dependencies
Checking the Needed Version of jQuery
Resetting Styles
Customizing the CSS Global Settings
A Fragment of the scaffolding.less File
Bootstrap Components
Containers
Using Containers
Device Sizes
The Grid System
The Column Arithmetic
A Grid Example
CSS Media Queries (1/2)
CSS Media Queries (2/2)
Customizing Breakpoints
Responsive Grid Layout
Combining Column Styles
Other Column Operations
Navigation
Navigation (Desktop)
Navigation (Mobile)
Navigation Source
Navigation Explained
Navigation Elements and Styles
Glyphicons
Using
Glyphicons
Responsive Images
Styles for Image Shapes
Summary
 
Chapter 28. Bootstrap Miscellaneous Topics
 
Integrating Bootstrap Components with jQuery
Identifying the Required Version of jQuery
Minimizing Bootstrap's Download Size
Using the Customizer
Customizer Page Fragment
Compiling and Downloading Customized Bootstrap
Customizing Bootstrap Components
Light Customization Steps
Summary
 
Chapter 29. UI Bootstrap Overview
 
What Is UI Bootstrap?
UI Bootstrap Directives
Project Philosophy
The Angular UI Bootstrap Modules
Getting UI Bootstrap
The Direct Download
What Are the -tpls- Files?
Understanding Templates
Picking and Choosing Your Modules (1/2)
Picking and Choosing Your Modules (2/2)
Basic UI Bootstrap HTML Page
Referencing Angular UI Bootstrap Modules
Adding Component Prefixes in Release 0.14.0
Summary
 
Chapter 30. UI Bootstrap Directives
 
UI Bootstrap Directives
Directive Inter-Dependencies
Where to Get Help
Plunker
The Alert Directive
Carousel
Datepicker
Dropdown
Pagination
The Pagination Code
Progress Bar
Tabs
Summary

Course Directory [training on all levels]

Upcoming Classes
Gain insight and ideas from students with different perspectives and experiences.

Interesting Reads Take a class with us and receive a book of your choosing for 50% off MSRP.