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.
Participants should be familiar with web application development concepts and have some knowledge of HTML, CSS and JavaScript.
This course is applicable for Angular 2 to the latest version.
For Angular.js training, see our Angular.js Developer Training Course.
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
What is Angular?
Angular versions
Angular hello world
ng serve
Live reloading
Understanding the project layout
The main Angular files
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
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
Angular template syntax
Attribute directives
Structural directives
*ngFor
Angular syntax for event handling
@Output
Event emitters
Creating a custom event
Adding a custom event handler
Creating a compound component
Components can be nested
Create a child component
Create a parent component
What is a pipe?
Examine the built-in pipes
Chain two pipes together
Debugging by piping an object to json
FormsModule
Template variables
Passing a control to an event handler
Two way data binding
Having two modes of operation
Using *ngIf to show two different UIs
Using data binding to read updated values
Implementing a cancel button
Understanding CSS inheritance
Component CSS encapsulation
Global styles
Adding external css frameworks - font-awesome, bootstrap
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
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
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 project
Adding a bootstrap navigation bar
Routing using path parameters
Reading the path parameters
Adding in a data service
Master list view
Detail view
Angular is under steady development, this module will cover the newer features that have been added to Angular in the latest release.
