Introduction to Angular | Angular Essentials JumpStart

What You’ll Learn 

Working within in an engaging, hands-on learning environment, guided by our expert team, attendees will learn to:

• What Angular is and why should you use it
• How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
• What TypeScript is, why it is useful, and how to use it with Angular
• How to facilitate development and deployment using Angular CLI
• How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
• How Routers can support navigation within a Single Page Application
• What the best practices are for using Angular so that it works unobtrusively and performs well
• Working with the Ahead of Time compiler including its impact of developers and the development process
• How to facilitate testing and running Angular applications using various tools and techniques
• How to use Angular with HTTP to support JSON, REST, and other services

Hands-on Labs: Experiential Learning

Skill-focused, Hands- on Learning: This class is “technology-centric”, designed to train attendees in essential Object Oriented, Java development skills, coupling the most current, effective techniques with the soundest industry practices. This course is about 50% hands-on lab and 50% lecture, with extensive exercises designed to reinforce fundamental skills and concepts learned in the lessons. Our courses include a wide range of complementary materials and labs to ensure all students are appropriately challenged or assisted at all times, no matter their incoming skill level.

Student Materials: What Students Receive 

Our course materials include more than a simple slideshow presentation handout. Each student will receive a comprehensive course Student Guide, complete with detailed course notes, code samples, software tutorials, diagrams and related reference materials and links. Our courses also include detailed our Student Workbook, with step by step hands-on lab instructions and project code and solutions, clearly illustrated for users to complete hands-on work in class, and to revisit to review or refresh skills at any time.  Students will also receive the course set up files, project code and solutions required for the hands-on work.

Audience & Pre-requisites: Who Should Attend 

This is an introductory level Angular course, designed for experienced web developers who wish to extend their skills in web development. Attendees should have an extensive working knowledge in developing basic web applications.

Course Topics / Agenda

Session: Angular Overview

Lesson: HTML5, CSS3, RWD, and jQuery

• Leading to Angular
• Evolution of HTML and CSS
• Responsive Web Design
• jQuery Under the Covers
• Bootstrapping to Browsers

Lesson: Angular Framework

• Frameworks vs Libraries
• AngularJS to Angular2
• Angular Release Schedules
• Angular 4/5/6
• Ahead of Time (AOT) Compilation

Lesson: Overview of Angular Architecture

• TypeScript
• Model-View-*
• Data Binding
• Components and Events
• Dependency Injection and Services
• Component Lifecycle

Exercise: Hello Angular

Session: Getting Started with Angular

Lesson: Getting Started with TypeScript

• Angular, ES6, and TypeScript
• ES6 Fundamentals
• Typescript Fundamentals
• TypeScript Types and Interfaces

Exercise: Hello TypeScript

Lesson: Bootstrapping with Angular CLI

• Challenges in Setting up Projects
• Angular CLI Overview
• New Projects with CLI
• Testing and Generating with CLI

Lesson: Angular Project Structure

• Top-Level Files and Directories
• Folders: src and src/app

Exercise: Creating Projects with Angular CLI

Lesson: Components and Events

• Data Binding in Components
• Events and Parent/Child Events
• Emitters
• Custom Events

Exercise: Building Components

Lesson: Third Party Libraries

• Angular and the Need for Libraries
• Options for adding Libraries
• Working with npm install
• Working with angular-cli.json
• ng2 Wrappers

Exercise: Using Libraries

Session: Views

Lesson: Dynamic Views

• View Encapsulation
• Templates and Content
• Overview of Directives
• Custom Attribute Directives
• Binding to Host Events

Exercise: Working with Directives

Lesson: Pipes

• Overview of Pipes
• Built-in Pipes
• Parameterizing Pipes
• Pure vs Impure Pipes
• Custom Pipes

Exercise: Working with Pipes

Session: Angular Forms

Lesson: Forms and the Forms API

• Forms and NgModel
• NG Form Groups
• Model-Driven Reactive Forms
• Validation and Validators
• Custom Validators

Exercise: Basic Forms with Angular
Exercise: Powerful Forms with Angular

Session: Single Page Applications and Routes

Lesson: Single Page Applications

• Overview of SPA Concept
• Routing in SPAs
• Nested Routes
• Route Guards
• Lazy-Loading Angular Modules

Exercise: Routing in a Single Page Application

Lesson: Services and Dependency Injection (DI)

• Components and Injectables
• Services and DI
• DI Framework and Injector Mechanics
• Tree-Shakeable Providers
• Local Storage

Exercise: Local Storage Service

Lesson: Modules

• Module Overview
• Feature and Shared Modules
• Feature Module Routing

Session: Using RESTful Services

Lesson: Overview of REST

• REpresentational State Transfer
• REST and HTTP
• REST/HTTP: Representation-Oriented
• REST Design Principles

Lesson: Angular and REST

• REST in Angular
• Promises
• Observables
• Emitters vs Observables
• HttpClient and Observables
• Async Pipes and Observables
• RxJS Operators and Usage

Exercise: Using RESTful Services in Angular

Session: Unit Testing with Angular

Lesson: TDD, BDD, and ADD

• Test-Driven Development
• Testing Types
• Behavior-Driven Development
• Acceptance-Driven Development

Lesson: Testing and Angular

• Testing dependencies
• Options for Testing in Angular
• Components and Injectables
• Services
• LocalStorage

Exercise: Unit Tests with Angular, Karma, and Jasmine

Session: Angular Best Practices

Lesson: Upgrading from AngularJS

• Upgrading from Angular 1.x
• ngForward Walkthrough
• ngUpgrade Walkthrough

Lesson: Angular Best Practices and Style Guide

• Single Responsibility Principle
• Naming Conventions
• Coding Conventions
• Application Structure
• Components, Directives, Services
• Lifecycle Hooks
• Routing