Course Overview:
This workshop aims at equipping the participants with the necessary knowledge and skills required to build rich internet applications using cutting edge RIA framework from google “Angular”.
Course Objectives:
- Be able build RIA using Angular
- Be able to write front end applications using typescript
- Exploit two-way binding offered by Angular
- Use dependency injection for better maintainability
- Understand and use various directives offered by Angular
- Create custom components
- Use gulp for commonly performed tasks in JavaScript application development
Pre-requisites:
- Should be familiar with any one web development technologies
- Should have intermediate level exposure in JavaScript
Target Audience:
- Web Developer who wants to build best-of-breed web applications with the simplicity and elegance of JavaScript.
Course Duration:
- 35 hours – 5 days
Course Content:
TypeScript
- Building Blocks
- Modules
- Interfaces
- Class
- Functions
- Enum
- Types
- Static, Dynamic & Optional Types
- Inferred Types
- Builtin Types
- Custom Types
- Type Declaration
- Type Inference
- Abstractions
- Defining Interfaces
- Creating Interface Methods
- Class
- Private and Public Scope
- Defining Members
- Static Functions
- Default and Optional Parameters
- Overloading functions
- Constructors
- Implementing Interfaces
- Inheritance and Polymorphism
Angular
- Introduction to Angular
- How Angular is opinionated
- Difference between Angular 1.0 Angular 2.0 and above (Optional)
- Angular Building Blocks
- Module
- Component
- Template
- Metadata
- Data Binding
- Service
- Directive
- Dependency Injection
- Anatomy of an Angular Applications
- Assembling applications using Modules
- Identifying UI layers for Components
- Metadata for Components
- Testing
- Jasmine Overview
- Writing Tests in Typescript
- Configure Karma to execute Tests
- Components & Templates
- Interpolation
- Expressions and Statements
- Bindings
- Value Binding
- Property Binding
- Event Binding
- Two way Binding
- Component Life Cycle
- Testing Components
- Directives
- Attribute Directives
- Structural Directives
- Using the Template Tag
- Using the “*” in directives
- Creating Components
- Extending Directives
- Creating Custom Directives
- Updating DOM Nodes
- Handling DOM Events
- Pipes
- Role of pipes in Angular 2 applications
- Using builtin pipes
- Chaining Pipes
- Creating Custom Pipes
- Testing Direvtives
- Dependency Injection
- Configuring the Injector
- Importing & Exporting Components
- Importing & Exporting Services
- Registering Providers
- Class Providers and Value Providers
- Factory Providers
- Forms
- Building forms using components and Templates
- Two way binding
- Change Tracking using ngControl
- Validation
- Error Handling
- Testing Angular Forms
- Routing and Navigation
- Including the Router
- Configuring the routes
- Router Outlets and Links
- Nested Routes
- Accessing Route Params
- Lazy loading of Modules and Components
- Communicating with Servers
- Using the http provider
- Async Programming Using Promises
- Resolving and Rejecting Promises
- Configuring the requests
- Sending Http Headers
- Caching Responses
- Request and Response Transformation
- Using RESTful Resources
- Using RxJS Objservables
- RxJs
- Streams as data source
- Difference between Iterators and Observables
- Using RxJs for observable manipulation
- Sequences
- Using sequence operators such as map(), filter(), concatAll(), reduce(), zip()
- Handling Errors
- Authentication & Authorization
- Authentication Using JWT
- Using Route Guards
- CanActivate
- CanActivateChild
- CanDeactivate
- CanLoad
- JWT Http Interceptors
- Authorization Workflow
- Role-based Authorization
- State Management (ngRx)
- State Management Strategies
- Redux as a state management solution
- Store Vs Services
- Application Store
- Reducers
- Actions
- Dispatching Actions
- Action Creators
- Using ngRx
- Handling Errors
- Realtime Updates using WebSockets
- Need for bidirectional realtime communication
- WebSockets overview
- Using WebSockets in Angular
- Subscribing and Publishing websocket events using RxJs
- Build Automation
- Using Webpack
- Module Bundling using Webpack
- Using Ahead Of Time compilation (AOT)
- Summary and Closing Remarks
