This course includes advanced topics not covered in our 3 day Introduction to Angular 4 Programming class. This includes specifics about how to consume REST web services and WebSocket data from Angular 4 applications. Advanced use of the Angular Routing module and Angular Animations are covered. You will learn how to develop Angular 4 applications using Angular CLI. Details of how to test and debug Angular 4 applications are covered in addition to best practices for the style and organization of Angular 4 projects.
Lessons
- REST Web Services and Angular
- Understanding REST
- REST Example – Create
- REST Example – Retrieve
- REST Example – Update
- REST Example – Delete
- REST Example – Client Generated ID
- REST Example – JSON
- Knowledge of the REST API
- Common Angular Tasks for REST Communication
- Angular Service Class Using HTTP Client
- RequestOptions
- URL Path Parameters
- Query Parameters
- Common HTTP Request Headers
- Override Default Request Options
- Returning Response Data
- DELETE
- GET
- PUT
- POST
- Security of REST APIs
Lessons
- Web Sockets Overview
- Web Sockets Use Cases
- Web Socket URLs
- Web Sockets Servers
- Web Socket Client
- The socket.io-client library
- Using socket.io-client in JavaScript
- Setting up socket.io-client in Angular Projects
- Using socket.io-client in an Angular service
- Angular websocket.service Notes:
- The Angular Web Socket Client Sample App
- Angular websocket.component.ts
- The Full websocket.component.ts code
- Implementation Modifications
Lessons
- Routing Overview
- External Route Configuration File
- Dedicated Router Module
- routerLinkActive binding
- Wildcard Route Path
- redirectTo
- Default Route
- Child Routes
- Defining Child Routes
for Child Routes - routerLink Prefixes
- Invoking Child Routes
- Lazy Loading Modules via Child Routes
- Lazy Loading: The child routing module
- Lazy Loading: Add routing to the module
- Lazy Loading: Update the main routing file
- Navigation Guards
- Creating Guard Implementations
- Using Guards in a Route
- Route Animations
Lessons
- What is Animation?
- Animation Configuration
- Animation Techniques
- Animation Concepts
- CSS Property Animation
- Animation Property Settings
- CSS Transforms
- Starting and Stopping Animation
- Animation Events
- Browser Support
- Angular Animations
- Animation Imports
- Named Animation States
- Transitions
- Special States: void, *
- The animate() function
- Triggers
- Assigning Animations to Elements using Trigger
- Invoking Transitions
- Assigning Animation to Routes
- External Animation Definitions
Lessons
- Testing Angular Components
- Testing Tools
- Testing Setup
- Important Test Configuration Settings
- Typical Testing Process
- Jasmine Test Suites
- Jasmine Specs (Unit Tests)
- Expectations (Assertions)
- Matchers
- Examples of Using Matchers
- Using the not Property
- Setup and Teardown in Unit Test Suites
- Example of beforeEach and afterEach Functions
- Angular TestBed
- Typical Test Structure
- Example of Basic Angular Test
- Basic beforeEach Configuration
- Automatically Detecting Component Changes
- Testing External Templates
- Testing Components With Dependencies
- Getting Injected Services
- Testing With Dependencies – Test Double
- Testing With Dependencies – Spy
- Testing With Asynchronous Dependencies
- Testing Components With @Input and @Output
- Testing Routed Components
Lessons
- What is AngularCLI?
- AngularCLI Prerequisites
- Installing AngularCLI
- Command Help
- Creating an App
- Running Angular CLI Apps with ng serve
- ng serve options
- AngularCLI Blueprints
- Generating Components
- The .angular-cli.json Settings File
- Generated Modules
- Generated Services
- Generated Specs for Unit Testing
- An Example Unit Test Spec
- Running Unit Tests
- End to End Testing
- Example End to End Test:
Lessons
- Debugging Overview
- Basic Debugging Practices
- Development (Debug) Mode
- Selecting Elements to Inspect
- Inspecting Angular Components with ng.probe
- Saving ng.probe Component References
- Modifying Values using Component References
- Using Breakpoints in Angular Code
- Breakpoint in TypeScript Code
- What is Augury?
- Installing Augury
- Opening Augury
- Augury – Component Tree
- Augury – Router Tree.
- Augury – NgModules Tab
- Common Exceptions
- Common Exceptions: ‘No such file: package.json’
- Common Exceptions: ‘Cant bind to ngModel’
- Common Exceptions: ‘router-outlet not a known element’
- Common Exceptions: ‘No provider for Router!’
Lessons
- What is the Angular Style Guide?
- Style Categories
- Single Responsibility
- Naming
- Coding Conventions
- App Structure and Angular Modules
- Components
- Directives and Services
- Summary
- CHAPTER 9. OVERVIEW OF JSON WEB TOKENS (JWT)
- RESTful Web Service API Refresher
- JSON Web Tokens
- JSON Web Token Architecture
- JWT Header
- JWT Payload
- JWT Example Payload
- JWT Example Signature
- How JWT Tokens are Used
- Adding JWT to HTTP Header
- How The Server Makes Use of JWT Tokens
- What are “Scopes”?
- What About OAuth?
Before attending this course, students must have:Students must have some prior understanding of Angular fundamentals in addition to web development using, HTML, CSS and JavaScript.
After completing this course, students will be able to:
Register
Not currently scheduled
Fast track the availability of this course.
Add to watch list or call 1300 794 006.
Add to watch list or call 1300 794 006.
Request a Quote