Angular Developer Training - Introduction
Course Description
This course is a comprehensive introduction to the Angular framework up to the latest version. It covers both the ES6 JavaScript syntax and Typescript needed to work with Angular. It gives practical examples of the main Angular concepts including Components, Directives, Dependency Injection, Pipes and Single Page Applications (SPA). Angular is a large framework and it can be intimidating to get started with because it uses both a new language, Typescript, and has a large range of concepts that need to be understood before you can get started. This course is the perfect introduction for people who have worked with web applications who are embarking on a project that requires Angular.
Duration: 5 days
Prerequisites
Participants should be familiar with web application development concepts and have some knowledge of HTML, CSS and JavaScript.
Versions
This course is applicable for Angular 2 to the latest version. For Angular.js training, see our Angular.js Developer Training Course.
The Angular Development environment
Visual Studio Code
Integrated terminal - command line interface
What is node.js?
What is the relationship between node.js and Angular?
What is npm?
Installing the Angular CLI
Introduction to Angular
What is Angular?
Angular versions
Angular hello world
ng serve
Live reloading
Understanding the project layout
The main Angular files
Understanding TypeScript
What is Typescript?
Basic javascript (ES5) features that are important for Angular development
ES6 features that are used for Angular development
Typescript features that are used in Angular
Components
What is a component?
What is a component framework?
ng generate
How do you customise / configure a component in html
How do we customise or configure components in Angular
@Input parameters
Directives
Angular template syntax
Attribute directives
Structural directives
*ngFor
Events
Angular syntax for event handling
@Output
Event emitters
Creating a custom event
Adding a custom event handler
Compound Components
Creating a compound component Components can be nested Create a child component Create a parent component
Pipes
What is a pipe?
Examine the built-in pipes
Chain two pipes together
Debugging by piping an object to json
Data Binding
FormsModule
Template variables
Passing a control to an event handler
Two way data binding
Creating a more complicated component
Having two modes of operation
Using *ngIf to show two different UIs
Using data binding to read updated values
Implementing a cancel button
CSS
Understanding CSS inheritance
Component CSS encapsulation
Global styles
Adding external css frameworks - font-awesome, bootstrap
Services
The MVC (Model View Controller) family of design patterns
Separation of concerns
What is an Angular Service
Creating a data service
Using a service
Understanding dependency injection
HttpClient
RESTful web services
An external web service
Creating our own test web service
Adding HTTP support
Introduction to Observables
Asynchronous operations using Observables
Updating the data service to read from an external source
Single Page Applications
What is a Single Page Application (SPA)
Understanding the UX requirements of the Back button
Understanding the UX requirements for bookmarking a page
Introduction to routing
Angular Router
Setting up routes
Creating a working Single Page Application
Creating a project
Adding a bootstrap navigation bar
Routing using path parameters
Reading the path parameters
Adding in a data service
Master list view
Detail view
Whats new in Angular
Angular is under steady development, this module will cover the newer features that have been added to Angular in the latest release.