Course Code: 5689

AngularJS Programming

Class Dates:
2/11/2019
Length:
3 Days
Cost:
$1495.00
Class Time:
Technology:
Developer
Delivery:

Overview

  • 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

Prerequisites

  • Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.
  • Recommended Courses:

Course Details

  • 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