Course Description
This course is approximately 50% hands-on lab to 50% lecture ratio, combining engaging lecture, demos, group activities and discussions with machine-based practical labs and exercises. Student machines are required.
COURSE OBJECTIVES:This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of web development.
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
Agenda
HTML5, CSS3, RWD, and jQuery
- Leading to Angular
- Evolution of HTML and CSS
- Responsive Web Design
- jQuery Under the Covers
- Bootstrapping to Browsers
Angular Framework
- Frameworks vs Libraries
- AngularJS to Angular2
- Angular Release Schedules
- Angular 4/5
Overview of Angular Architecture
- Architectural Elements and Concepts
- TypeScript
- Model-View-*
- Data Binding
- Components and Services
- Factories and Events
- Exercise: Hello Angular
Getting Started with TypeScript
- Why Use Typescript
- Typescript Module System
- Types/Keywords/Concepts
- Transpilers
- Angular and TypeScript
- Exercise: Hello TypeScript
Bootstrapping with Angular CLI
- Challenges in Setting up Projects
- Angular CLI Overview
- New Projects with CLI
- Testing and Generating with CLI
- Ahead of Time (AOT) Compilation
- Implications of using AOT
Angular Project Structure
- Top-Level Files and Directories
- Folders” src and src/app
- Exercise: Creating Projects with Angular CLI
Components and Events
- Usable Classes in Angular
- HTML, CSS, and TypeScript in Components
- Data Binding and Events
- Exercise: Building Components
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
Dynamic Views
- Overview of Directives
- Built-in Directives
- ngIf and else
- ngFor and ngSwitch
- Conditional Styling
- Exercise: Working with Directives
Pipes
- Overview of Pipes
- Built-in Pipes
- Formatting and Conversions
- Parameterizing Pipes
- Exercise: Working with Pipes
Forms and the Forms API
- Forms and NgModel
- NG Form Groups
- NG Form Validation
- Built-in Validators
- Exercise: Basic Forms with Angular
- Exercise: Powerful Forms with Angular
Single Page Applications
- Overview of SPA Concept
- Routing in SPAs
- Creating Routes
- Routing Options
- Exercise: Routing in a Single Page Application
Injectables and Local Storage
- Components and Injectables
- Services
- Service Interfaces
- Local Storage
- Exercise: Local Storage
TDD, BDD, and ADD
- Test-Driven Development
- Testing Types
- Behavior-Driven Development
- Acceptance-Driven Development
Testing and Angular
- Testing dependencies
- Options for Testing in Angular
- Components and Injectables
- Services
- LocalStorage
- Exercise: Unit Tests with Angular, Karma, and Jasmine
- Exercise: Local Storage Service
Angular Best Practices
- Upgrading from Angular 1.x
- Angular Style Guide
- Single Responsibility Principle
- Naming Conventions
- Coding Conventions
- Application Structure
- Components, Directives, Services
- Lifecycle Hooks
- Routing
Overview of REST
- REpresentational State Transfer
- REST and HTTP
- REST/HTTP: Representation-Oriented
- REST Design Principles
Angular and REST
- REST in Angular
- Promises
- Observables
- Http Module
- Putting it all Together
- Exercise: Using RESTful Services in Angular
Audience
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.