Build interactive web applications with Building RIA Using Angular with TypeScript, a practical training course designed for developers who want to strengthen their skills in modern frontend development. The course focuses on combining Angular’s component-based architecture with TypeScript to create structured, maintainable, and responsive Rich Internet Applications.
Course Overview:
This workshop is designed to equip participants with the practical knowledge and technical skills needed to build modern Rich Internet Applications (RIA) using Angular and TypeScript. Participants will learn how Angular’s component-based architecture, data binding, services, routing, and other core features can be applied to develop interactive, responsive, and maintainable web applications.
Through hands-on exercises and practical development activities, the workshop provides participants with experience in applying Angular to real-world application scenarios. By the end of the training, learners will have a stronger understanding of Angular development, TypeScript, and modern web application development practices, preparing them to create scalable and user-friendly Rich Internet Applications.
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
