Comprehensive AngularJS Programming Training Virtual Classroom Live October 30, 2017

Course Overview

• 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

Lab Excercises:

• 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
• Lab 20. A Directive with a Controller
• Lab 21. Testing
• Lab 22. Dependency Management Using Bower
• Lab 23. Automating Build Using Grunt
• Lab 24. Automating Build Using Gulp
• Lab 25. Understanding Bootstrap's Grid System
• Lab 26. Understanding Bootstrap's Navbar Component
• Lab 27. Using jQuery in Bootstrap
• Lab 28. Understanding UI Bootstrap Lab Files
• Lab 29. Customizing UI Bootstrap Templates
• Lab 30. Using UI Bootstrap Directives

Prerequisites

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