Outline of Solution Architecture Training: SA Practitioner's Guide (Extended)

WA2425 Introduction to AngularJS Programming Training Course Outline

Chapter 1. Advanced Objects and Functionality in JavaScript

• Basic Objects
• Constructor Function
• More on the Constructor Function
• Object Properties
• Deleting a Property
• 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
• 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. 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 15. 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 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
• Summary

Chapter 17. 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 18. 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 19. 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 20. Angular 2 Preview

• Two Versions of Angular
• Shared Features
• In Angular JS but not in Angular 2
• Changed in Angular 2
• New in Angular 2
• Directive Types
• Built-In Directives - Differences
• Data and Event Binding Differences
• What is TypeScript
• Other TypeScript Features
• TypeScript Advantages / Disadvantages
• TypeScript Compilation
• Programming Editor TypeScript Support
• Angular 2 Development Setup
• Basic Application Architecture
• Files
• Components
• Services
• Moving from Angular JS to Angular 2
• Summary

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. Basic Single Page Application (SPA)
Lab 16. Using the Route Service
Lab 17. Form Validation
Lab 18. Server Side Input Validation
Lab 19. Ajax Caching