Course Code: 5690

Comprehensive AngularJS Programming

Class Dates:
5/20/2019
7/29/2019
Length:
5 Days
Cost:
$2495
Class Time:
Technology:
developer
Delivery:

Overview

  • Course Overview
  • he 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.

  • Audience
  • This course is designed for Web Developers looking to use the AngularJS JavaScript framework for development of modern web applications.

Course Disclaimer

*Course Cost listed does not include the cost of courseware or lunch. Course is subject to minimum enrollment. Course may run virtually as a Virtual Instructor-Led (VILT) class if minimum enrollment is not met.

Follow Up

  • Recommended Training:

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
  • The instanceof Operator
  • Constructor and Instance Objects
  • Namespace
  • Functions Are First-Class Objects
  • Closures & Private Variables with Closures
  • Immediately Invoked Function Expression (IIFE)
  • The Module Pattern
  • Prototype
  • Inheritance in JavaScript & Using Prototype
  • Inheritance with Object.create
  • The hasOwnProperty Method
  • Module 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
  • The View
  • The Controller
  • Data Binding
  • Basics of Dependency Injection (DI)
  • Other Client Side MVC Frameworks
  • Module 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 ResponsibilitiesAbout Constructor and Factory Functions
  • Defining & 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
  • Example Use of ng-class
  • Setting Image Source
  • Setting Hyperlink Dynamically
  • Preventing Initial Flash
  • Module 7: Advanced View Directives
  • The ng-repeat Directive
  • Dynamically Adding Items
  • Special Properties
  • Scope and Iteration
  • Event Handling in Iterated Elements
  • 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 Checkbox - Advanced
  • Using Select
  • Using Select – Advanced
  • Disabling an Input
  • Reacting to Model Changes in a Declarative Way
  • Module 9: Formatting Data with Filters in AngularJS
  • What Are AngularJS Filters?
  • The Filter Syntax
  • Using Filters in JavaScript
  • The date Filter
  • The date's format Parameter
  • The limitTo Filter
  • The 'filter' Filter
  • Filter Performance Considerations
  • Module 10: AngularJS $watch Scope Function
  • The $watch Function
  • The $watch Function Signature
  • The $watch Function Details
  • Canceling the Watch Action
  • Items of Note
  • Performance Considerations
  • Module 11: Communicating with Web Servers
  • The $http AngularJS ServiceThe Promise Interface
  • Shortcut Functions
  • Using $http.get() & $http.post()
  • Combining $http POST Request Data with URL Parameters
  • Direct $http Function Invocation
  • Caching Responses
  • 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
  • Module 12: Custom Directives
  • Directive Usage Types
  • Defining a Custom 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 & 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 ApproachAbout Configuring a Service using its Provider
  • Configuring a Service using its Provider
  • Module 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
  • Module 15: The Route Service
  • Introduction & Downloading the Route Service Code
  • Using the Route Service
  • Setting up the Route Table
  • URL Fragment Identifier
  • 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 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
  • Module 17: 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 18: Advanced Custom Directive
  • Controller for a Directive
  • Using the Controller As Syntax
  • Using an Existing Standalone Controller
  • Controller and the Link Function
  • Compile and Link Phases
  • 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
  • Module 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
  • Core Modules
  • Nature of a Node.js Project
  • Introduction to Modules
  • A Simple Module & Using the Module
  • Directory Based Modules
  • Making a Module Executable
  • Loading Module from node_modules Folders
  • Dependency Management Using NPM
  • About Global Installation
  • Setting Up Dependency
  • Package Version Numbering Syntax
  • Installing a Package, Updating & Uninstalling Packages
  • Alternate Dependency Management
  • Module 21: Testing JavaScript with Jasmine
  • Supported Integrations
  • Jasmine in Standalone Mode & Fold Structure
  • The Spec Runner Page Viewing Test Results
  • Specs (Unit Tests), Expectations (Assertions), & Matchers
  • Using the not Property
  • Test Failures
  • Setup and Teardown in Unit Test Suites
  • Disabling Test Suites and Specs
  • Method Stubbing and Call Tracking with Spies
  • spyOn Setup Variations
  • Simulating Exceptions
  • Asynchronous Calls
  • Module 22: Unit Testing AngularJS Code
  • The ngMock Module
  • Creating the Spec Runner HTML
  • Testing a Service
  • Better Injected Variable Names
  • Testing a Controller
  • End-to-End Testing with Protractor
  • Testing a Web Page
  • How the Page Works
  • Create a Configuration File
  • Run the Test
  • Locating Elements by AngularJS Model & Binding
  • Sending User Input
  • Module 23: Testing Using Karma
  • What Is Karma?
  • Installing Karma
  • Configuration File
  • Run the Test
  • Module 24: Build and Dependency Management
  • Bower Package Manager
  • Managing Packages Using Bower
  • Describing Dependency
  • Grunt Build Manager
  • Installing Grunt Components
  • Writing a Grunt Build Script
  • Running Grunt & JSHint Task
  • Compiling Less Files & Compressing CSS Files
  • Gulp vs. Grunt
  • Installing Gulp Components
  • Writing a Build Script
  • Running Gulp
  • Module 25: Best Practices, Style Guides & Using Bootstrap
  • Project Directory Structure
  • Named vs. Anonymous Functions
  • Make Dependency Injection Safe
  • Service Best Practices
  • Responsive Web Development
  • The Grid System
  • CSS Media Queries & Navigation
  • Integrating Bootstrap Components with jQuery
  • The Angular UI Bootstrap Modules
  • Plunker
  • Carousel, Datepicker, Dropdown, Pagination, Progress Bar, Tabs