Comprehensive AngularJS Programming Training

5 Days

Description

 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.

Objectives:

In this training, attendees will learn how to:

  • Create single page web applications using the MVC pattern of AngularJS
  • Understand the programming model provided by the AngularJS framework
  • Define Angular controllers and directives
  • Control Angular data bindings
  • Implement Responsive Web Applications with AngularJS
  • Use popular build tools to speed development.

Upcoming Classes

Virtual Classroom Live
October 30, 2017

$2,895.00
5 Days    10:00 AM EDT - 6:00 PM EDT
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date

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

Upcoming Classes

Virtual Classroom Live
October 30, 2017

$2,895.00
5 Days    10:00 AM EDT - 6:00 PM EDT
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date

Prerequisites

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

Upcoming Classes

Virtual Classroom Live
October 30, 2017

$2,895.00
5 Days    10:00 AM EDT - 6:00 PM EDT
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date