Course Code:
bruat
Duration:
21 hours
Prerequisites:
- Should be familiar with any one web development technologies
- Should have intermediate level exposure in JavaScript
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 Outline:
A “Bug Tracker” application is built from the scratch as a part of the training program. The following use cases are implemented to give sufficient scope for experimenting with all the basic to advanced aspects of the framework.
Use Cases
- Add a new bug
- List the bugs
- Toggle the 'closed' status of a bug
- Remove closed bugs
- Display statistics
- Search the bugs
- Sort the bugs
- Improve the bug display
- Persist the bugs in the localStorage
- Display createdAt for each bug
- Persist the bugs in the server
- Every bug must have a unique url (Routing)
- Preparation for deployment
Agenda
Day-1
TypeScript
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
- 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
- Templates
- Interpolation
- Expressions and Statements
- Bindings
- Value Binding
- Property Binding
- Event Binding
- Two way Binding
Day-2
- Directives
- Components
- 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 applications
- Using builtin pipes
- Chaining Pipes
- Creating Custom Pipes
- Dependency Injection
- Configuring the Injector
- Importing & Exporting Components
- Importing & Exporting Services
- Registering Providers
- Class Providers and Value Providers
- Factory Providers
Day-3
- 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
- Other frequently used operators of Rx.Observable
- Testing
- Jasmine Overview
- Writing Tests in Typescript
- Testing Components, Pipes & Services
- Mocking dependencies
- Configure Karma to execute Tests
- Performance Optimizations
- Using Pure Pipes
- Using OnPush Change Notification Strategy
- Build Automation
- Using Webpack
- Module Bundling using Webpack