angular training course
2017-09-03 admin

Our Angular Training Course is intended for front-end developers who are familiar with Javascript and want to master Angular to move a gear up. Angular is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices.

Prerequisites

JavaScript

Further training

Node.JS

MEAN Stack

Ionic

Intended Audience

Front end developers who found that JavaScript is inadequate to develop a rich, fully-fledged front-end. Our Angular Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features Angular, going in-depth to

Course material:

DAY 1

Getting Started

  • Plunker
  • Intro to TypeScript .
  • Writing our first app.
  • String Interpolation
  • Looping
  • Property & Event Binding
  • Domain Model
  • Nesting Components & Inputs .
  • User Interaction & Outputs

ES6 JavaScript & TypeScript Overview

DAY 2

Angular CLI

Components

  • Architecting with Components
  • Templates, Styles & View Encapsulation
  • Content Projection
  • Lifecycle Hooks
  • ViewChildren & ContentChildren

Built-in Directives

  • NgIf & NgSwitch.
  • NgStyle & NgClass .
  • NgNonBindable
  • Structural Directives.

DAY 3

Custom Directives

  • HostListener & HostBinding
  • Inputs & Configuration

Reactive Programming with RxJS

  • Streams & Reactive Programming
  • Observables & RxJS .
  • RxJS & Angular

Pipes

  • Built-in Pipes
  • Async Pipe .
  • Custom Pipes

DAY 4

Forms

  • Model Driven Forms
  • Model Driven Form Validation
  • Submitting & Resetting
  • Reactive Model Form
  • Template Driven Forms

Dependency Injection & Providers.

  • Injectors
  • Provider
  • Tokens
  • Configuring Dependency Injection in Angular
  • NgModule.providers vs Component.providers vs Component.viewProviders

DAY 5

HTTP

  • Core HTTP API
  • HTTP Example with Promises .
  • HTTP Example with Observables . . . .
  • JSONP Example with Observables.

Routing

  • Route Configuration . .
  • Navigation.
  • Parameterised Routes
  • Nested Routes .
  • Router Guards
  • Routing Strategies

Unit Testing Overview

Duration and pricing

In Pricing Group A

Certificate

  • Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
  • You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  • Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R2950.

Bookings

You can download the course registration form on our home page or by clicking here

Brochure
You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions
Please email us

Schedule
On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.

angular training course
2017-07-19 admin

Our Angular Training Course is intended for front-end developers who are familiar with Javascript and want to master Angular to move a gear up. Angular is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices.

Prerequisites

JavaScript

Further training

Node.JS

MEAN Stack

Ionic

Intended Audience

Front end developers who found that JavaScript is inadequate to develop a rich, fully-fledged front-end. Our Angular Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features Angular, going in-depth to give you the knowledge you need.

Course Material

Provided in electronic format – we do have an extension monitor for you in our training room.

Course Info

DAY 1

HTML, JavaScript Review

  • HTML Elements
  • HTML Attributes
  • Attributes without values
  • Attributes with Literal values
  • HTML Element Content
  • Document Structure
  • Bootstrap Classes (Contextual, Margin, Padding, Element Sizes)
  • Styling Bootstrap Tables
  • Bootstrap Forms
  • Bootstrap Grids (Responsive, Simplified)
  • Example Project Preparation
  • Script Element
  • Functions
  • Variables and Types
  • JavaScript Operators
  • Arrays
  • Objects (Literals, Methods)
  • Defining Classes
  • Getters and Setters
  • Class Inheritance
  • Modules
  • Importing Specific Types
  • Renaming Imports
  • Importing All of the Types in a Module
  • Type Annotations
  • Properties and Variables
  • Specifying Multiple Types or any Type
  • Using Tuples
  • Indexable Tuples
  • Access Modifiers

Building A Real App

  • Folder Structure
  • NPM Packages
  • Restful Web Service
  • Index.html
  • Root Component
  • Root Module
  • Bootstrap File
  • Data Model
  • Starting The Store
  • Adding Store Features

Orders and Checkout

  • Creating The Shopping Cart
  • Adding URL Routing
  • Processing Orders
  • Using RestFul Web Service

Admin

  • Module
  • Routing System
  • Navigating Admin URL
  • Implementing Authentication
  • Structuring the Admin Feature
  • Implementing the Product Editor

DAY 2

Data Bindings

  • Data Bindings (One-way, Property, Attribute, Classes, Styles)
  • Built-in Directives (ngIf, ngSwitch, ngFor, ngTemplateOutlet)
  • One-way Data Binding Restrictions

Events and Forms

  • Event Binding
  • Two-way Data Bindings (ngModel Directive)
  • Form Data Validation
  • Entire Form Validation
  • Summary Validation Messages
  • Disabling the Submit Button
  • Model-Based Forms
  • Form Model Classes
  • Using the Model for Validation
  • Generating the Elements from the Model
  • Custom Form Validators

Attribute Directives

  • A Simple Attribute Directive
  • Applying a Custom Directive
  • Accessing Application Data in a Directive
  • Reading Host Element Attributes
  • Using a Single Host Element Attribute
  • Creating Data-Bound Input Properties
  • Responding To Input Property Changes
  • Binding To a Custom Event
  • Creating Host Element Bindings
  • Creating a Two-Way Binding on the Host Element
  • Exporting a Directive for Use in a Template Variable

Structural Directives

  • A Simple Attribute Directive
  • Applying a Custom Directive
  • Accessing Application Data in a Directive
  • Reading Host Element Attributes
  • Using a Single Host Element Attribute
  • Creating Data-Bound Input Properties
  • Responding To Input Property Changes
  • Binding To a Custom Event
  • Creating Host Element Bindings
  • Creating a Two-Way Binding on the Host Element
  • Exporting a Directive for Use in a Template Variable

DAY 3

Components

  • Structuring an Application With Components
  • Creating New Components
  • Defining External Templates
  • Using Data Bindings in Component Templates
  • Using Input Properties to Coordinate Between Components
  • Using Directives in a Child Component Template
  • Using Output Properties To Coordinate Between Components
  • Projecting Host Element Content
  • Completing the Component Restructure

Pipes

  • Installing The Internationalization PolyFill
  • Registering a Custom Pipe
  • Applying A Custom Pipe
  • Combining Pipes
  • Creating Impure Pipes
  • Formatting Numbers
  • Formatting Currency Values
  • Formatting Percentages
  • Formatting Dates
  • Changing String Case
  • Serializing Data as JSON
  • Slicing Data Arrays

Services

  • The Object Distribution Problem
  • Distributing Objects as Services Using Dependency Injection
  • Preparing The Service
  • Preparing Dependent Components
  • Registering the Service
  • Reviewing the Dependency Injection Changes
  • Declaring a Dependency in a Pipe and in Directives
  • Isolating Components Using Services and Dependency Injection
  • Preparing and Registering The Service
  • Preparing The Dependent Component
  • Updating the Root Component
  • Updating The Child Components

Service Providers

  • Using The Class Provider
  • Using Opaque Tokens
  • Understanding the useClass property
  • Resolving a Dependency with Multiple Objects
  • Using the Value Provider
  • Using the Factory Provider
  • Using The Existing Service Provider
  • The Limitations of Single Service Objects
  • Creating Local Providers In a Directive
  • Creating a Local Provider for All Children of an Object
  • Creating a Local Provider for View Children
  • Restricting the Provider Search
  • Skipping Self-Defined Providers

Modules

  • The Imports Property of the Root Module
  • The Declarations Property of the Root Module
  • The Providers Property of the Root Module
  • The Bootstrap Property of the Root Module
  • The Model Module Definition
  • Other Classes In The Application
  • Updating The Root Module
  • Creating a Utility Feature Module
  • Creating a Feature Module With Components

DAY 4

Project

  • Configuring Packages
  • Model Module
  • Core Module
  • Messages Module
  • The Angular Bootstrap
  • The Reactive Extensions Module
  • The HTML Document

Reactive Extensions

  • Understanding Observables
  • Understanding Observers
  • Understanding Subjects
  • Using The Asynch Pipe
  • Scaling Up Application Feature Modules
  • Filtering Events
  • Transforming Events
  • Using Different Event ObJects
  • Receiving Only Distinct Events
  • Using a Custom Equality Checker
  • Taking and Skipping Events

Making Asynchronous HTTP Requests

  • Understanding RESTful Web Services
  • Replacing the Static Data Source Service
  • Setting Up the HTTP Request
  • Processing the Response
  • Configuring the Data Source
  • Using The Rest Data Source
  • Saving and Deleting Data
  • Consolidating HTTP Requests
  • Making Cross-Origin Requests
  • Using JSONP Requests
  • Configuring Request Headers
  • Handling Errors
  • Generating User-Ready Messages
  • Handling the Errors

Routing and Navigation – Starting

  • Disabling The State Change Event Display
  • Creating A Routing Configuration
  • Creating the Routing Component
  • Updating The Route Module
  • Adding Navigation Links
  • Understanding The Effect Of Routing
  • Handling Route Changes in Components
  • Using Multiple Route Parameters
  • Using Optional Route Parameters
  • Navigating in Code
  • Receiving Navigation Events
  • Removing The Event Bindings and Supporting Code

DAY 5

Routing and Navigation – Expanding

  • Adding Components to the Project
  • Using Wildcards in Routes
  • Using Redirections in Routes
  • Responding to Ongoing Routing Changes
  • Styling Links for Active Routes
  • Creating the Child Route Outlet
  • Accessing Parameters from Child Routes

Routing and Navigation – Guarding

  • Guarding Routes
  • Delaying a Resolver Service
  • Creating, Registering and Applying a Resolver Service
  • Displaying Placeholder Content
  • Using a Resolver to Prevent URL Entry Problems
  • Preventing Navigation With Guards
  • Preventing Route Activation
  • Consolidating Child Route Guards
  • Preventing Route Deactivation
  • Loading Feature Modules Dynamically
  • Creating a Route to Dynamically Load a Module
  • Using a Dynamically Loaded Module
  • Guarding Dynamic Modules with a Loading Guard
  • Targeting Named Outlets
  • Creating Additional Outlet Elements
  • Navigating when Using Multiple Outlets

Animation

  • Adding the Animations Polyfill
  • Disabling The HTTP Delay
  • Simplifying the Table and Routing Configuration
  • Defining Style Groups
  • Defining Element States
  • Defining State Transitions
  • Defining The Trigger
  • Applying The Animation
  • Testing The Animation Effect
  • Understanding The Built-in Animation States
  • Understanding Element Transitions
  • Creating Transitions for Built-in States
  • Animating Element Addition and Removal
  • Controlling Transition Animations (Timing Function, Initial Delay, Additional Styles, Parallel Animations)
  • Animation Style Groups
  • Defining Common Styles
  • Using Element transformations, CSS Framework Styles, Animation Trigger Events

Unit Testing

  • Configuring Karma, TypeScript
  • Creating a Simple Unit Test
  • Starting the Tools
  • Working with Jasmine
  • Testing an Angular Component
  • Configuring the TestBed for Dependencies
  • Testing Data Bindings
  • Testing a Component with an External Template
  • Testing Component Events
  • Testing Output Properties
  • Testing Input Properties
  • Testing with Asynchronous Operations
  • Testing an Angular Directive

———————

Duration and pricing

In Pricing Group A

Certificate

  • Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
  • You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  • Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R2950.

Bookings

You can download the course registration form on our home page or by clicking here

Brochure
You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions
Please email us

Schedule
On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.

2017-02-27 admin

Our AngularJS Training Course is intended for front-end developers who are familiar with Javascript and want to master AngularJS to move a gear up. AngularJS is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices.

Prerequisites

JavaScript

Further training

Node.JS

MEAN Stack

Intended Audience

Front end developers who found that JavaScript is inadequate to develop a rich, fully-fledged front-end. Our AngularJS Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features AngularJS, going in-depth to give you the knowledge you need.

Course Material

Provided

Course Info

DAY 1

Introduction

  • What is Angular 2?
  • Creating an Angular 2 Project
  • Got Setup Issues (with Angular 2 CLI)?
  • Editing our First App
  • Understanding the Project Structure
  • Why TypeScript? What is TypeScript?

TypeScript Introduction (for Angular 2 Usage)

  • Introduction
  • Using Types
  • Classes
  • Interfaces
  • Generics
  • Wrap up & Modules
  • Deep dive into TypeScript

Components, Templates & Databinding

  • Getting Started with Components
  • How an Angular 2 App gets started
  • Understanding AppModules
  • Using Templates & Styles
  • First Summary
  • Creating a new Component
  • About Unique Selectors
  •  Using multiple Components
  • View Encapsulation & Styling
  • Inserting Content with ng-content
  • Databinding Overview
  • String Interpolation
  • Property Binding & Event Binding Overview
  • Property Binding
  • Binding to Custom Properties
  • Event Binding
  • Binding to Custom Events
  • More Information on Property & Event Binding
  • ngModel and AppModules
  • Two-Way Binding
  • The Component Lifecycle
  • Component Lifecycle Usage Examples
  • Template Access with Local References, ViewChild and ContentChild

Project – Components & Databinding

  • Project Setup
  • Creating the Header Component
  • Creating the Recipes Component
  • Creating Recipe Model & List Component
  • Recipe Detail & Databinding
  • Shopping List Component

Directives

  • What are Directives?
  • Attribute Directives
  • Building a Custom Attribute Directive
  • Element Interaction with HostListener & HostBinding
  • HostListener: Passing Data
  • Directive Property Binding
  • *ngIf
  • *ngFor
  • ngSwitch
  • Angular 2’s De-Sugaring Mechanism
  • Building a Custom Structural Directive
  • Using NgModules

Project – Directives

  • Ingredients List with *ngFor
  • Custom Dropdown Directive

DAY 2

Debugging an Angular 2 Application

  • Introduction
  • Chrome Debugger & Sourcemaps
  • If you don’t find the TypeScript Sourcemaps
  • Augury

Services & Dependency Injection

  • What are Services?
  • Example: Logging Service
  • What is Dependency Injection?
  • Example: Injecting the Logging Service
  • Multiple Instances vs One Instance
  • Services & AppModules
  • Injecting Services into Services
  • Using Services for Cross-Component Interaction

Project – Services & Dependency Injection

  • Creating the Recipe Service
  • Creating the Shopping List Service
  • Cross-Service Communication
  • Cleanup

Routing

  • Introduction to the Angular 2 Route
  • Angular 2 Router Version & Changes
  • Setting up Routes
  • Loading Components
  • Navigation with Links
  • Understanding Navigation Paths
  • Imperative Routing (Triggered in Code)
  • Route Parameters
  • Extracting Route Parameters
  • Query Parameters
  • Query Params Changes in latest Router Version
  • Extracting Query Params
  • Query Parameters and the routerLink Directive
  • Passing Fragments and Preserving Query Params/ Fragments
  • Extracting Fragments in Code
  • Child Routes
  • Redirecting Request
  • Styling Active Route Links
  • Using Guards with AppModules
  • Guards: CanActivate
  • Guards: CanDeactivate
  • Routing-Cheat-Sheet.pdf
  • Routing – Finished.zip
  • Location Strategies

Routing Project

  • Introduction
  • Setting up the Main Routes
  • Adding Links to Navigate
  • Using Child Routes in the Recipe Section
  • Navigating between Child Routes
  • Extracting Recipe Data from Route Params
  • Styling the Active Recipe
  • Wiring “Edit” and “Delete” up
  • Finishing Touches and some Cleanup

DAY 3

Forms

  • Introduction to Forms in Angular 2
  • Template-Driven Approach Basics
  • Add FormsModule to your AppModule
  • Registering Controls (Template-Driven)
  • Submitting a Form and Using the Output (Template-Driven)
  • Form Properties
  • Input Validation (Template-Driven)
  • Form State & CSS Classes (Template-Driven)
  • Default Values with ngModel (Template-Driven)
  • Two-Way Binding with ngModel (Template-Driven)
  • Form Groups (Template-Driven)
  • Radio Button Controls (Template-Driven)
  • Using the Form State / Providing a better UX (Template-Driven)
  • The Data-Driven (Reactive) Approach (Intro)
  • Creating a Form (Data-Driven)
  • Important Changes with AppModules
  • Synchronizing HTML and the Angular 2 Form (Data-Driven)
  • Submitting a Form and Using the Output (Data-Driven)
  • Input Validation (Data-Driven)
  • Built-in Validators
  • Working with the State of the Form
  • Form Groups (Data-Driven)
  • Radio Buttons (Data-Driven)
  • Form Arrays / Arrays of Control (Data-Driven)
  • Creating a Form with the FormBuilder (Data-Driven)
  • Creating Custom Validators (Data-Driven)
  • Custom Asynchronous Validators (Data-Driven)
  • Listening to Status & Value Changes
  • Resetting Forms

Forms Project

  • Angular 2 Forms Usage
  • Shopping List Form HTML Setup (Template-Driven)
  • Adding & Editing Mode
  • Submitting the Shopping List Form
  • Selecting Items & Property Binding
  • Displaying Data with ngModel
  • Editing Items
  • Deleting Items & Clearing the Form
  • Editing & Adding Recipes (Intro)
  • Recipe Form – Preparation – Fetching the Active Recipe
  • Creating the Recipe Form with the Data-Driven Approach
  • Synchronizing the HTML Code with the Form
  • Submitting the Form and Editing Recipes
  • Managing Recipe Ingredients

Pipes

  • What are Pipes?
  • Using Pipes
  • Parametrizing Pipes
  • Pipe Documentation
  • Chaining Pipes
  • Custom Pipes
  • Important Adjustment: Just use “args”
  • Example: Creating a Filter Pipe
  • Using NgModules
  • “Pure” Pipe Limitations
  • “Impure” Pipes
  • The Async Pipe

DAY 4

Http

  • Required Adjustments in this Module
  • Http & Observables
  • Demo Data Source: Firebase Setup
  • Sending a GET Request
  • Using NgModules
  • The Power of Observables Operators – Map(ping Data)
  • Sending a POST Request
  • Retrieving and Transforming Data with Observables
  • Using the Async Pipe
  • Error Handling with Observables

Http Project

  • Http Intro & Setup
  • Storing Recipes on the Server (POST)
  • Getting and Changing Recipes (GET and PUT)
  • Finishing Touches & Bugfixes

Angular 2 Release Version / updated CLI

  • Updating the SystemJS CLI (beta.10)
  • NgModule Overview

Authentication & Route Protection

  • Required Adjustments in this Module
  • Introduction
  • Setting up Routes
  • Backend (Firebase) Setup
  • User Signup
  • User Signin & Managing the User State
  • User Logout
  • Protecting a Route from Unauthorized Access
  • Finishing Touches
  • How it looks using Angular 2.0 Final
  • Enhancing the App with Observables Magic!

Angular 2 Applications for bigger Projects

  • Introduction
  • Using Feature Modules
  • Creating a Feature Module
  • Creating a Feature Module for Child Routes
  • Lazy Loading of Routes
  • Implementing Lazy Loading
  • Using Lazy Loading to load the ShoppingListModule
  • Using Shared Modules
  • Using a Core Module
  • Understanding Module Encapsulation
  • When to use which Module
  • Diving Deeper into Modules
  • Performance and File Size Improvements with Offline (Ahead-of-time) Compilation
  • Adding Ahead-of-time Compilation to your Workflow

Angular 2 Animations

  • Introduction
  • Setting up the Starting Project
  • Animations Triggers and State
  • Switching between States
  • Transitions
  • Advanced Transitions
  • Transition Phases
  • The “void” State
  • Using Keyframes for Animations
  • Grouping Transitions
  • Using Animation Callbacks

DAY 5

Deploying an Angular 2 Application

  • About the New Project Structure (same Video as in Custom Project Module)
  • Intro & What to Deploy
  • Setting up an App for Deployment
  • Deploying to Github Pages with the Angular 2 CLI
  • Deploying to Github Pages Manually
  • Deploying to AWS S3
  • Deployment – Cheat Sheet

Angular 2 CLI

  • Intro
  • Installation
  • New Project: ng new and ng init
  • Building your Project: ng build & ng serve
  • Understanding the Project Structure
  • Linting your Code: ng lint
  • Unit Tests: ng test
  • Managing Project Content: ng generate & ng destroy
  • Putting it into Production: ng build -prod and ng github-pages:deploy
  • Using Third-Party packages with the CLI
  • Learning More: ng –help and Wrap Up

Unit Testing in Angular 2 Apps

  • Introduction
  • Why Unit Tests?
  • Analyzing the Testing Setup (as created by the CLI)
  • Running Tests (with the CLI)
  • Adding a Component and some fitting Tests
  • Testing Dependencies: Components and Services
  • Simulating Async Tasks
  • Using “fakeAsync” and “tick”
  • Isolated vs Non-Isolated Tests
  • Further Resources & Where to Go Next

Example Project

  • Introduction
  • Creating the Project
  • Setting up the Angular 2 App
  • Adding Development Dependencies and Types
  • Setting up TypeScript Compilation (tsconfig) and the Basic Webpack Config
  • Creating a Development Workflow & Script
  • Adding Routing
  • Enabling Lazy Loading
  • Adding Ahead-of-Time Compilation
  • Setting up a Webpack Production Configuration
  • Final Touches & Finishing the Production Workflow
  • AoT Bugfixing

———————

Duration and pricing

In Pricing Group A

Certificate

  • Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
  • You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  • Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R2950.

Bookings

You can download the course registration form on our home page or by clicking here

Brochure
You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions
Please email us

Schedule
On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.

Angular 2 Training Course
2017-01-30 admin

Our AngularJS Training Course is intended for front-end developers who are familiar with Javascript and want to master AngularJS to move a gear up. AngularJS is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices.

Prerequisites

JavaScript

Further training

Node.JS

MEAN Stack

Intended Audience

Front end developers who found that JavaScript is inadequate to develop a rich, fully-fledged front-end. Our AngularJS Training Course starts with the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features AngularJS, going in-depth to give you the knowledge you need.

Course Material

Provided

Course Info

DAY 1

Introduction

  • What is Angular 2?
  • Creating an Angular 2 Project
  • Got Setup Issues (with Angular 2 CLI)?
  • Editing our First App
  • Understanding the Project Structure
  • Why TypeScript? What is TypeScript?

TypeScript Introduction (for Angular 2 Usage)

  • Introduction
  • Using Types
  • Classes
  • Interfaces
  • Generics
  • Wrap up & Modules
  • Deep dive into TypeScript

Components, Templates & Databinding

  • Getting Started with Components
  • How an Angular 2 App gets started
  • Understanding AppModules
  • Using Templates & Styles
  • First Summary
  • Creating a new Component
  • About Unique Selectors
  •  Using multiple Components
  • View Encapsulation & Styling
  • Inserting Content with ng-content
  • Databinding Overview
  • String Interpolation
  • Property Binding & Event Binding Overview
  • Property Binding
  • Binding to Custom Properties
  • Event Binding
  • Binding to Custom Events
  • More Information on Property & Event Binding
  • ngModel and AppModules
  • Two-Way Binding
  • The Component Lifecycle
  • Component Lifecycle Usage Examples
  • Template Access with Local References, ViewChild and ContentChild

Project – Components & Databinding

  • Project Setup
  • Creating the Header Component
  • Creating the Recipes Component
  • Creating Recipe Model & List Component
  • Recipe Detail & Databinding
  • Shopping List Component

Directives

  • What are Directives?
  • Attribute Directives
  • Building a Custom Attribute Directive
  • Element Interaction with HostListener & HostBinding
  • HostListener: Passing Data
  • Directive Property Binding
  • *ngIf
  • *ngFor
  • ngSwitch
  • Angular 2’s De-Sugaring Mechanism
  • Building a Custom Structural Directive
  • Using NgModules

Project – Directives

  • Ingredients List with *ngFor
  • Custom Dropdown Directive

DAY 2

Debugging an Angular 2 Application

  • Introduction
  • Chrome Debugger & Sourcemaps
  • If you don’t find the TypeScript Sourcemaps
  • Augury

Services & Dependency Injection

  • What are Services?
  • Example: Logging Service
  • What is Dependency Injection?
  • Example: Injecting the Logging Service
  • Multiple Instances vs One Instance
  • Services & AppModules
  • Injecting Services into Services
  • Using Services for Cross-Component Interaction

Project – Services & Dependency Injection

  • Creating the Recipe Service
  • Creating the Shopping List Service
  • Cross-Service Communication
  • Cleanup

Routing

  • Introduction to the Angular 2 Route
  • Angular 2 Router Version & Changes
  • Setting up Routes
  • Loading Components
  • Navigation with Links
  • Understanding Navigation Paths
  • Imperative Routing (Triggered in Code)
  • Route Parameters
  • Extracting Route Parameters
  • Query Parameters
  • Query Params Changes in latest Router Version
  • Extracting Query Params
  • Query Parameters and the routerLink Directive
  • Passing Fragments and Preserving Query Params/ Fragments
  • Extracting Fragments in Code
  • Child Routes
  • Redirecting Request
  • Styling Active Route Links
  • Using Guards with AppModules
  • Guards: CanActivate
  • Guards: CanDeactivate
  • Routing-Cheat-Sheet.pdf
  • Routing – Finished.zip
  • Location Strategies

Routing Project

  • Introduction
  • Setting up the Main Routes
  • Adding Links to Navigate
  • Using Child Routes in the Recipe Section
  • Navigating between Child Routes
  • Extracting Recipe Data from Route Params
  • Styling the Active Recipe
  • Wiring “Edit” and “Delete” up
  • Finishing Touches and some Cleanup

DAY 3

Forms

  • Introduction to Forms in Angular 2
  • Template-Driven Approach Basics
  • Add FormsModule to your AppModule
  • Registering Controls (Template-Driven)
  • Submitting a Form and Using the Output (Template-Driven)
  • Form Properties
  • Input Validation (Template-Driven)
  • Form State & CSS Classes (Template-Driven)
  • Default Values with ngModel (Template-Driven)
  • Two-Way Binding with ngModel (Template-Driven)
  • Form Groups (Template-Driven)
  • Radio Button Controls (Template-Driven)
  • Using the Form State / Providing a better UX (Template-Driven)
  • The Data-Driven (Reactive) Approach (Intro)
  • Creating a Form (Data-Driven)
  • Important Changes with AppModules
  • Synchronizing HTML and the Angular 2 Form (Data-Driven)
  • Submitting a Form and Using the Output (Data-Driven)
  • Input Validation (Data-Driven)
  • Built-in Validators
  • Working with the State of the Form
  • Form Groups (Data-Driven)
  • Radio Buttons (Data-Driven)
  • Form Arrays / Arrays of Control (Data-Driven)
  • Creating a Form with the FormBuilder (Data-Driven)
  • Creating Custom Validators (Data-Driven)
  • Custom Asynchronous Validators (Data-Driven)
  • Listening to Status & Value Changes
  • Resetting Forms

Forms Project

  • Angular 2 Forms Usage
  • Shopping List Form HTML Setup (Template-Driven)
  • Adding & Editing Mode
  • Submitting the Shopping List Form
  • Selecting Items & Property Binding
  • Displaying Data with ngModel
  • Editing Items
  • Deleting Items & Clearing the Form
  • Editing & Adding Recipes (Intro)
  • Recipe Form – Preparation – Fetching the Active Recipe
  • Creating the Recipe Form with the Data-Driven Approach
  • Synchronizing the HTML Code with the Form
  • Submitting the Form and Editing Recipes
  • Managing Recipe Ingredients

Pipes

  • What are Pipes?
  • Using Pipes
  • Parametrizing Pipes
  • Pipe Documentation
  • Chaining Pipes
  • Custom Pipes
  • Important Adjustment: Just use “args”
  • Example: Creating a Filter Pipe
  • Using NgModules
  • “Pure” Pipe Limitations
  • “Impure” Pipes
  • The Async Pipe

DAY 4

Http

  • Required Adjustments in this Module
  • Http & Observables
  • Demo Data Source: Firebase Setup
  • Sending a GET Request
  • Using NgModules
  • The Power of Observables Operators – Map(ping Data)
  • Sending a POST Request
  • Retrieving and Transforming Data with Observables
  • Using the Async Pipe
  • Error Handling with Observables

Http Project

  • Http Intro & Setup
  • Storing Recipes on the Server (POST)
  • Getting and Changing Recipes (GET and PUT)
  • Finishing Touches & Bugfixes

Angular 2 Release Version / updated CLI

  • Updating the SystemJS CLI (beta.10)
  • NgModule Overview

Authentication & Route Protection

  • Required Adjustments in this Module
  • Introduction
  • Setting up Routes
  • Backend (Firebase) Setup
  • User Signup
  • User Signin & Managing the User State
  • User Logout
  • Protecting a Route from Unauthorized Access
  • Finishing Touches
  • How it looks using Angular 2.0 Final
  • Enhancing the App with Observables Magic!

Angular 2 Applications for bigger Projects

  • Introduction
  • Using Feature Modules
  • Creating a Feature Module
  • Creating a Feature Module for Child Routes
  • Lazy Loading of Routes
  • Implementing Lazy Loading
  • Using Lazy Loading to load the ShoppingListModule
  • Using Shared Modules
  • Using a Core Module
  • Understanding Module Encapsulation
  • When to use which Module
  • Diving Deeper into Modules
  • Performance and File Size Improvements with Offline (Ahead-of-time) Compilation
  • Adding Ahead-of-time Compilation to your Workflow

Angular 2 Animations

  • Introduction
  • Setting up the Starting Project
  • Animations Triggers and State
  • Switching between States
  • Transitions
  • Advanced Transitions
  • Transition Phases
  • The “void” State
  • Using Keyframes for Animations
  • Grouping Transitions
  • Using Animation Callbacks

DAY 5

Deploying an Angular 2 Application

  • About the New Project Structure (same Video as in Custom Project Module)
  • Intro & What to Deploy
  • Setting up an App for Deployment
  • Deploying to Github Pages with the Angular 2 CLI
  • Deploying to Github Pages Manually
  • Deploying to AWS S3
  • Deployment – Cheat Sheet

Angular 2 CLI

  • Intro
  • Installation
  • New Project: ng new and ng init
  • Building your Project: ng build & ng serve
  • Understanding the Project Structure
  • Linting your Code: ng lint
  • Unit Tests: ng test
  • Managing Project Content: ng generate & ng destroy
  • Putting it into Production: ng build -prod and ng github-pages:deploy
  • Using Third-Party packages with the CLI
  • Learning More: ng –help and Wrap Up

Unit Testing in Angular 2 Apps

  • Introduction
  • Why Unit Tests?
  • Analyzing the Testing Setup (as created by the CLI)
  • Running Tests (with the CLI)
  • Adding a Component and some fitting Tests
  • Testing Dependencies: Components and Services
  • Simulating Async Tasks
  • Using “fakeAsync” and “tick”
  • Isolated vs Non-Isolated Tests
  • Further Resources & Where to Go Next

Example Project

  • Introduction
  • Creating the Project
  • Setting up the Angular 2 App
  • Adding Development Dependencies and Types
  • Setting up TypeScript Compilation (tsconfig) and the Basic Webpack Config
  • Creating a Development Workflow & Script
  • Adding Routing
  • Enabling Lazy Loading
  • Adding Ahead-of-Time Compilation
  • Setting up a Webpack Production Configuration
  • Final Touches & Finishing the Production Workflow
  • AoT Bugfixing

———————

Duration and pricing

  • Full-time over 5 days (R9995)
  • Part-time over 4 weeks (2 nights per week, 3 hour sessions) (R11995)
  • Part-time over 8 Saturdays, 3 hour sessions (R11995)
  • Please note : For part-time courses we do not have a fixed schedule and you will be placed on a waiting list until we get a group of 4+ together. Please book with no dates on the bookings form. This will automatically put you on the waiting list. We will confirm with you as soon as we have a part-time group together.
  • Distance-learning over up to 3 months (R9995)
  • International exams are not included in the course price.
  • Prices exclude Vat for Vat-registered companies

Certificate

  • Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
  • You may sit for our competency assessment test and on passing you will obtain our competency certificate.
  • Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R2950.

Bookings

You can download the course registration form on our home page or by clicking here

Brochure
You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions
Please email us

Schedule
On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.

angularjs training course
2015-04-16 Alta

[wp_objects_pdf]
Angular JS

 

Prerequisites

 

This is not a beginners course, to get the most out of the course, you should be at a minimum be familiar with HTML and Javascript. The following of our courses can be recommended :

 

HTML / CSS,  HTML5 / JavaScript Beginning SQL  and Intro to Programming

Intended Audience

  • Web developers that want to update on tips and techniques used by experienced web developers.

Further Training

HTML5 / JavaScript

Course Contents

Day 1

Maximizing AngularJS Directives

  • Building a simple element directive
  • Working through the directive spectrum
  • Manipulating the DOM
  • Linking directives
  • Interfacing with a directive using isolate scope
  • Interaction between nested directives
  • Optional nested directive controllers
  • Directive scope inheritance
  • Directive templating
  • Isolate scope
  • Directive transclusion
  • Recursive directives

 

Expanding Your Toolkit with Filters and Service Types

  • Using the uppercase and lowercase filters
  • Using the number and currency filters
  • Using the date filter
  • Debugging using the json filter
  • Using data filters outside the template
  • Using built-in search filters
  • Chaining filters
  • Creating custom data filters
  • Creating custom search filters
  • Filtering with custom comparators
  • Building a search filter from scratch
  • Building a custom search filter expression from scratch
  • Using service values and constants
  • Using service factories
  • Using services
  • Using service providers
  • Using service decorators

Day 2

AngularJS Animations

  • Creating a simple fade in/out animation
  • Replicating jQuery’s slideUp() and slideDown() methods
  • Creating enter animations with ngIf
  • Creating leave and concurrent animations with ngView
  • Creating move animations with ngRepeat
  • Creating addClass animations with ngShow
  • Creating removeClass animations with ngClass
  • Staggering batched animations
  • Sculpting and Organizing your Application

 

  • Manually bootstrapping an application
  • Using safe $apply
  • Application file and module organization
  • Hiding AngularJS from the user
  • Managing application templates
  • The “Controller as” syntax

 

Day 3

Working with the Scope and Model

  • Configuring and using AngularJS events
  • Managing $scope inheritance
  • Working with AngularJS forms
  • Working with <select> and ngOptions
  • Building an event bus
  • Testing in AngularJS

 

  • Configuring and running your test environment in Yeoman and Grunt
  • Understanding Protractor
  • Incorporating E2E tests and Protractor in Grunt
  • Writing basic unit tests
  • Writing basic E2E tests
  • Setting up a simple mock backend server
  • Writing DAMP tests
  • Using the Page Object test pattern
  • Day 4
  • Screaming Fast AngularJS
  • Recognizing AngularJS landmines
  • Creating a universal watch callback
  • Inspecting your application’s watchers
  • Deploying and managing $watch types efficiently
  • Optimizing the application using reference $watch
  • Optimizing the application using equality $watch
  • Optimizing the application using $watchCollection
  • Optimizing the application using $watch deregistration
  • Optimizing template-binding watch expressions
  • Optimizing the application with the compile phase in ng-repeat
  • Optimizing the application using track by in ng-repeat
  • Trimming down watched models
  • Promises
  • Understanding and implementing a basic promise
  • Chaining promises and promise handlers
  • Implementing promise notifications
  • Implementing promise barriers with $q.all()
  • Creating promise wrappers with $q.when()
  • Using promises with $http
  • Using promises with $resource
  • Using promises with Restangular
  • Incorporating promises into native route resolves
  • Implementing nested ui-router resolves
  • Day 5
  • What’s New in AngularJS 1.3
  • Using HTML5 datetime input types
  • Combining watchers with $watchGroup
  • Sanity checking with ng-strict-di
  • Controlling model input with ngModelOptions
  • Incorporating $touched and $submitted states
  • Cleaning up form errors with ngMessages
  • Trimming your watch list with lazy binding
  • Creating and integrating custom form validators
  • AngularJS Hacks
  • Manipulating your application from the console
  • DRYing up your controllers
  • Using ng-bind instead of ng-cloak
  • Commenting JSON files
  • Creating custom AngularJS comments
  • Referencing deep properties safely using $parse
  • Preventing redundant parsing

 

 

Duration and pricing

  • Full-time over 5 days (R8995 excl VAT)
  • Part-time over 4 weeks (2 nights per week, 3 hour sessions) (R10995 excl Vat)
  • Part-time over 8 Saturdays, 3 hour sessions (R10995 excl Vat)
  • Distance-learning over up to 3 months (R7995 excl Vat)

Certificate

1. Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
2. You have the option to get the competency / academic certificate if you :
hand in a project (pre-approved) covering most of the topics in the book.

Schedule

Please enquire via our ‘Contact Us’ page.

Bookings

You can download the course registration form on our home page or by clicking here