Angular 2 Programming

Join 132 students who already love this course!

(4.25 out of 5 )

Angular 2 training covers everything you need to know to get started with this next generation of the Angular framework. Angular 2 makes the creation of single page applications even easier that before. In this course, developers will learn to use Angular 2 Directives and to create Angular 2 Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular 2 Router. The course also covers everything you need to know about Typescript - a programming language based on JavaScript that is used to create Angular 2 applications. Lab exercises provide essential and practical hands-on experience for each topic.

  • What is Angular 2?
  • Central Features of the Angular Framework
  • Why Angular?
  • Scope and Goal of Angular
  • Angular 2 vs. AngularJS
  • Installing and Using Angular 2
  • Adding Angular 2 and Dependencies to Your App
  • Building Blocks of and Angular 2 Application
  • A Basic Angular 2 Application
  • Basic App - index.html - 1/2
  • Basic App - index.html - 2/2
  • Basic-App: Main Application File
  • Basic-App: The Component File - 1/2
  • Basic-App: The Component File - 2/2
  • Summary
  • Programming Languages for Use with Angular
  • TypeScript Syntax
  • The Type System – Defining Variables
  • The Type System – Defining Arrays
  • The Type System – Classes & Objects
  • Class Constructors
  • Class Constructors – Alternate Form
  • Interfaces
  • Parameter and Return Value Types
  • Working with Modules
  • TypeScript Transpilation
  • Arrow Functions
  • Template Strings
  • Template Strings – Variables and Expressions
  • Template Strings – Multiline
  • Generics - Class
  • Generics - Methods
  • Generics - Restricting Types
  • Generics - Restricting Types: Example
  • Summary
  • What is a Component?
  • An Example Component
  • Component Starter
  • Developing a Simple Login Component
  • Login Component: Add HTML
  • The HTML Component Template
  • The templateUrl property
  • Login Component: Add CSS Styling
  • Login Component: Hook Up Input Fields and Button
  • Login Component: Fields & Button in the Component Class
  • Component Decorator Properties
  • Component Lifecycle Hooks
  • Using a Lifecycle Hook: OnInit
  • Summary
  • Binding Syntax
  • One-Way Output Binding
  • Binding Displayed Output Values
  • Two-Way Binding of Input Fields
  • Input Binding Examples
  • Binding Events
  • Binding Events Examples
  • Setting Element Properties
  • Setting Properties: Examples
  • Summary
  • What are Directives
  • Directive Types
  • Apply Styles by Changing Classes
  • Changing Classes – Example
  • Applying Styles Directly
  • Applying Styles Directly - Example
  • Obsolete Directives and Property Binding
  • Controlling Element Visibility
  • Setting Image Source Dynamically
  • Setting Hyperlink Source Dynamically
  • Summary
  • Structural Directives
  • Adding and Removing Elements Dynamically
  • Looping Using ngFor
  • ngFor - Basic Syntax
  • ngFor - Full Template Syntax
  • Creating Tables with ngFor
  • ngFor Local Variables
  • ngFor Changes in the backing data source
  • Swapping Elements with ngSwitch
  • ngSwitch - Basic Syntax
  • ngSwitch - Full Template Syntax
  • Summary
  • Template Driven Forms
  • Note on Deprecated Forms APIs
  • A Basic Angular Form
  • Binding Input Fields
  • Accessing the Form Object
  • Binding the Form Submit Event
  • The Submit Function
  • Basic HTML5 Validation - "required" Attribute
  • HTML5 vs. Angular Validation
  • Angular Validators
  • Angular Validation State
  • Displaying Form Validation State
  • Displaying Field Validation State
  • Displaying Validation State Using Classes
  • Disabling Submit when Form is Invalid
  • Submitting the Form
  • Binding to Object Variables
  • Additional Input Types
  • Checkboxes
  • Select(drop down) Fields
  • Rendering Options for Select (drop down)
  • Date fields
  • Radio Buttons
  • Summary
  • What is a Service?
  • Creating a Basic Service
  • What is Dependency Injection?
  • What Dependency Injection Looks Like
  • Injecting Services
  • Using a Service in a Component: Dedicated Instance
  • Using a Service in a Component: Dedicated Instance - Example Code
  • Using onInit to Initialize Component Data
  • Using a Shared Service Instance
  • Dependency Injection and @Host
  • Dependency Injection and @Optional
  • Summary
  • The Angular HTTP Client
  • Using The HTTP Client - Overview
  • Setting up HTTP_PROVIDERS in the Root Component
  • Importing Individual Providers into Services
  • Service Using Http Client
  • Service Imports
  • The Observable object type
  • What does an Observable Object do?
  • Making a Basic HTTP GET Call
  • Using the Service in a Component
  • The PeopleService Client Component
  • Client Component Code Review
  • Importing Observable Methods
  • Enhancing the Service with .map() and .catch()
  • Using .map()
  • Using .catch()
  • Using toPromise()
  • GET Request
  • GET Request with Options
  • POST Request
  • POST Request Example
  • Reading HTTP Response Headers
  • Summary
  • What are Pipes?
  • More on Pipes
  • Formatting Changes in Angular 2
  • Using a Built-in Pipe
  • Built-In Pipes
  • Using Pipes in HTML
  • Chaining Pipes
  • Using Pipes in JavaScript
  • Some Pipe Examples
  • Decimal Pipe
  • CurrencyPipe
  • Custom Pipes
  • Custom Pipe Example
  • Using Custom Pipes
  • A Filter Pipe
  • A Sort Pipe
  • Pipe Category: Pure and Impure
  • Pure Pipe Example
  • Impure Pipe Example
  • Summary
  • What is a Single Page Application (SPA)
  • SPA Workflow
  • Traditional Web Application Capabilities
  • Single Page Application Advantages
  • SPA and Traditional Web Sites
  • SPA Challanges
  • Implementing SPA's Using Angular 2
  • Simple SPA Using Visibility Control
  • SPA Using Angular Components
  • SPA with Angular Components - Switching
  • SPA with Angular Components - The Displayed Component
  • Implement SPA Using an Angular Component Router
  • Summary
  • Routing and Navigation
  • The Component Router
  • Traditional Browser Navigation
  • Component Router Terminology
  • Setting up the Component Router
  • Local URL Links
  • Browser pushState and
  • Routes
  • The app.routes.ts File
  • The app.routes.ts File - Example
  • Bootstrapping Routing in Main.ts
  • A Basic App With Routing
  • App Routes
  • AppComponent - Code
  • AppComponent - Router Related Features
  • AppComponent -
  • AppComponent - precompile array
  • AppComponent - routerLinks
  • Programmatic Navigation
  • Basic Navigation
  • Passing Data During Navigation
  • Creating Routes with Route Parameters
  • Navigating with Route Parameters
  • Using Route Parameter Values
  • Retrieving the Route Parameter Synchronously
  • Retrieving a Route Parameter Asynchronously
  • Query Parameters
  • Query Parameters - Example Component
  • Query Parameters - queryParams
  • Query Parameters - Navigation
  • Retrieving Query Parameters Asynchronously
  • Problems with Manual URL entry and Bookmarking
  • Fixing Manual URL entry and Bookmarking
  • Summary
  • 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
  • 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
  • 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
Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with Angular JS(the prior version) is not required.
  • Create single page web applications using the MVC pattern of Angular 2,
  • Understand how write and organize Angular 2 code,
  • Program Angular 2 View Components and Services,
  • Use Angular 2 output, two-way, event and property bindings,
  • Exchange data with network servers using the Angular 2 HTTP Client,
  • Work with Angular 2 Pipes to format data,
  • Create and work with Angular 2 Forms

REGISTER NOW
top

OLLAnywhere is a revolutionary way of utilising cutting-edge technology to allow students to attend live instructor-led training from anywhere in or outside of Australia.