Projects
Assignments
Overview
Angular training teaches participants how to build applications using ES6, TypeScript, and modern front-end tools, including npm and Webpack.
Objectives
At the end of AngularJS training course, participants will be able to
- Understand how single-page web application architectures are different than traditional web application architectures
- Use new JavaScript (ES6) language features including Classes, Modules, and Arrow Functions
- Use new TypeScript language features including Types, Decorators, Interfaces, and Generics
- Learn Angular coding and architecture best practices including project layout and using container and presentation components
- Understand and use Angular model-driven forms, observables, dependency injection, and routing
- Communicate with a backend server using Angular’s HttpClient to load and save data
- Configure the router and navigate between components
- Leverage IVY, the new Angular compiler, for faster and smaller builds
Prerequisites
All participants must have object-oriented programming experience. Some experience with JavaScript is helpful; the new language features of JavaScript and TypeScript are covered/reviewed in class.
Course Outline
TypeScript and ECMAScript 6 (ES6) Fundamentalsedforce2021-06-25T15:55:37+05:30
- TypeScript Installation, Configuration & Compilation
- Type Annotations
- Classes
- Scoping using let, var, and const Keywords
- Arrow Functions
- ES Modules
- Decorators
- Template Literals
- Spread Syntax and Rest Parameters
- Destructuring
Angular Overviewedforce2021-06-25T15:56:24+05:30
- Benefits of Building using Angular
- Understanding Angular Versions
- Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures
- Angular Style Guide
- Angular Architecture
- Angular Compared to Other JavaScript Libraries and Frameworks (React, VueJS, etc…)
- Your First Angular Application
Componentsedforce2021-06-25T15:56:43+05:30
- Understanding Components
- Component Properties & Methods
- Templates: Inline, Multi-line, and External with Component-relative Paths
Angular Modules (NgModule)edforce2021-06-25T15:57:09+05:30
- Angular Modules vs. ES Modules
- Organizing your code into Feature Modules
Project Set-Up (Using the Angular CLI)edforce2021-06-25T15:57:28+05:30
- Angular CLI Features
- Creating a New Project (with new CLI Prompts)
- Generating Code
- Customizing the Angular CLI
Data Bindingedforce2021-06-25T15:57:54+05:30
- Interpolation
- Property binding
- Event binding
- Two-way data binding
Directivesedforce2021-06-25T15:58:18+05:30
- Structural: ngFor, ngIf, ngSwitch
- Attribute: ngClass, ngStyle
Advanced Componentsedforce2021-06-25T15:59:04+05:30
- Component Communication using @Input, @Output
- Component Architecture
- Component Styles
- Component Lifecycle Hooks
- Evaluating UI Component Frameworks & Libraries
Services & Dependency Injectionedforce2021-06-25T15:59:21+05:30
- Using a service to access data
- Using a service to encapsulate business logic
- Understanding the scope of services
Dependency Injectionedforce2021-06-25T15:59:43+05:30
- Understanding Dependency Injection
- Angular’s Dependency Injection System
- Registering
- Injecting
Model-driven Forms (Reactive Forms)edforce2021-06-25T16:00:04+05:30
- Importing the ReactiveFormsModule
- FormControl, FormGroup, and AbstractControl
- Binding DOM Elements to FormGroups and FormControls
- Validation Rules, Messages, and Styles
- Refactoring Reactive Forms for Reuse
- Custom Validators
Communicating with the Server using the HttpClient Serviceedforce2021-06-25T16:00:26+05:30
- Deciding between Promises or Observables (RxJS)
- Making an HTTP GET Request
- Sending data to the server using Http POST and PUT Requests
- Issuing an HTTP DELETE Request
- Intercepting Requests and Responses
Routeredforce2021-06-25T16:00:43+05:30
- Importing the RouterModule
- Configuring Routes
- Displaying Components using a RouterOutlet
- Navigating declaratively with RouterLink
- Navigating with code using the Router
- Accessing parameters using ActivatedRoute
Deploying an Angular Application to Productionedforce2021-06-25T16:01:05+05:30
- Building an application using the Angular CLI
- Differential loading: creating a modern build (ES2015) and a legacy build (ES5)
- Deploying to a web server
Ivy: New Compilation & Rendering Pipelineedforce2021-06-25T16:01:28+05:30
- Understanding Ivy
- Ivy Goals
- Ivy Benefits
- Ivy Bundle Sizes
Upgrading to the latest version of Angular from earlier versionsedforce2021-06-25T16:01:50+05:30
- 2.x and above
- Update Guide
- Deprecation Guide
- Patching Dependencies: npm audit fix
- Looking for AngularJS to Angular upgrades? See Advanced and Comprehensive Angular courses
