Background and Overview
- Misko Hevery
- Why AngularJS were created
- Why Angular 2 was redesigned from the ground-up
- What happended to Angular version 3
- Angular version 6
- What is a single-page application (SPA)
- Angular alternatives
PART-1 - Angular Quick-Tour
In this section, we builds an app step-by-step, to given a better conceptual foundation for the remainder of the course.
Setting up the DEV Environment
- NodeJS and NPM
- TypeScript
- Angular CLI (ng)
- JetBrains WebStorm vs. MS Visual Code
Starting a Project
- Understanding the ng client
- Getting help from ng
- Creating a new project
- Generating components and other artefacts
- Inline templates and styles
- Text formattinbg using pipes
- Suppressing unit test files
- Creating a "Hello Angular" app
A Simple Calculator
- Understanding the root module and app component
- Import dependent module
- Two-way binding of form fields
- Component styling
- Handling events
Component Interaction
- Using Twitter Bootstrap
- Undestanding components
- Creating the operands component
- Creating the results component
- Formatting data
- Passing data between components
- Creating a service for the computation work
- Understanding dependency injection
PART-2 - Foundation
In this section, we discussion the techniques, tools and libraries used by the Angular framework.
JS Modules and Loaders
- What is a JS module
- Understanding the IFFE concept
- The module patter
- ES6 modules
Asynchronous Computation
- Execution models
- The JavaScript execution model
- JS-VM call-stack vs. call-back-queue
- Using call-backs
- Understanding the call-back boomerang effect
- Understanding promises
- Using promises
- Promise chains
- Understanding async function in modern JS
- Using async and await
RxJS
- What is reactive programming?
- Understanding event streams
- The Observable pattern
- Observables vs. Observers
- Common stream operations such as filter, map, reduce
Unit Testing in JavaScript
- The unit testing ecosystem of JS
- Installation of Jasmine
- Jasmine tests
- Matchers
- Life-cycle functions
- Test selection
- Testing async code
TypeScript
- What is TypeScript
- Relation to JS, ES5, ES6
- Understanding the type support in TS
- Installation of TypeScript
- Modules
- Scalar type types
- Composite data types
- ES6 Lambda expressions
- Functions
- Classes and member variables and functions
- Visibility and accessor methods
- Static members
- Interfaces
- Generic classes
PART-3 - Angular Explained
In this section, we discuss all core artifacts of Angular and how to use them.
Template Syntax
- HTML attributes vs DOM properties
- Understanding the DOM
- Interpolation with handlebar expressions
- Using the null-catch operator
- Template reference variables
- Property input [prp]=expr
- Event output (ev)=expr
- Two-way binding [(var)]=expr
- Implementation of the number-stepper component
Angular Pipes
- What is an Angular pipe
- Use the json pipe for debugging
- Various text transformation
- Formatting numbers
- Formatting dates
- Sub-lists
- Subscribing to RxJS feeds using the async pipe
- User-defined pipes
- Implementing the train-case pipe
Angular Directives
- What is an Angular directive
- What do the '*' prefix mean
- NG templates
- Conditional inclusion with *ngIf
- Using template-snippets with *ngIf
- Conditional inclusion with ngSwitch
- Repeating elements with *ngFor
- Support variables to *ngFor
- Setting CSS classing with ngClass
- Setting CSS styles with ngStyle
- User-defined directives
- Implementing the highlight directive
Modules & Components
- TypeScript modules vs Angular modules
- The root module and its purpose
- ngModule annotation attributes
- Module dependencies
- Entry components and what they are used for
- Bootstrap components
- Brief about component architecture
- Data flow between components
Services
- What is a service
- Understanding dependency injection in Angular
- Service definition
- Service usage, aka injection
- What is a provider
- Swapping service implementations
- Using constant value services
- Injecting a constant value service
Routing and Navigation
- What is routing
- Preparing the app for routing
- Defining routes
- Define the routing target
- How to switch to another page
- Redirecting routes
- Routing demo
- Setting a CSS class for an active route
- Route parameters
- Associating data to a route
- Router events
- Child routes
- Route guards
- Guard actions
- Sample entry guard
- Mock authentication
Working with Forms
- Different ways of using forms in Angular
- FormControl
- Validators
- User-defined validator
- FormGroup
- Using the FormBuilder service
- Model-driven forms
- Submitting a model-driven form
- Implementing a reactive form field
- Reactive incremental search demo
- Template-driven forms
- Template-driven field mapping
- Submitting a template-driven form
PART-4 - Angular Development
In this section, we discuss topics related to developing a webb-app ready to be deployed.
Back-end Calls
- Using the Angular HttpClient service
- Basci operations
- Invoking a public REST-WS service
Unit Testing in Angular
- Generating tests via ng-cli
- Running tests
- Running tests within WebStorm
- Angular TestBed and how to initialize
- Bootstrapping TestBed in async mode
- How to lookup view elements
- Trigger a change detection
- Testing @Input elements
- Testing @Output elements
- Mock dependencies
- Testing async operations
- Using FakeAsync() and tick()
- Performing fake HTTP operations
Function Testing in Angular
- What is e2e testing
- Understaing Protractor
- Using page objects
- Element locators
- Trigger element events/actions
Deployment
- Overview of the ng-cli documentation
- Upgrading ng-cli
- Upgrading Angular
- Adding BASH completion
- Configuring ng-cli
- Setting defaults for artefact generation
- Using a CSS pre-processor, such as SCSS
- Building an app
- Chosing a build target
- Using different environment config files
- Building for production deployment
- Configuring 3rd party CSS/JS libraries
- Server aspects, such as redirection and CORS
PART-5 - Project
In this section, you will have the opportunity to work with a complete Angular web-app and add features to it.
The Books & Video Store
- Domain Model
- REST-WS Back-End Server
- Store Components
- Cart and Checkout Components
- Order Component