About this course
Angular is one of the most popular client-side JavaScript frameworks. It is used to create dynamic, interactive and responsive cross platform applications. It is a full-featured Single Page Application (SPA) framework. This workshop is designed for software professionals who want to learn the basics of Angular 4 and its building blocks in simple and easy steps. It follows a hands-on approach. It is structured around a small sample application. Different concepts will be explained in detail as they are introduced in the application.
Duration
- 3 weeks certification course.
- 16 hours of classroom training (also available online via webinar).
- 15 hours of assignments.
- 20 hours of final project.
Schedule
We have monthly batches. Next batch starts Saturday July 8th, 2017. From 10:00 AM to 2:30 PM.
Prerequisites
- Bring your laptop (Windows, Linux or Mac)
- Basic Knowledge of HTML & CSS
- Knowledge of JavaScript language
- [Optional] Knowledge of TypeScript language
Topics Covered
MV* FRAMEWORKS
- Why do we need a MV* framework?
- Benefits of a MV* framework
ABOUT ANGULAR
- What is Angular?
- Advantages of Angular
- Where does Angular fit within a modern web app?
- Traditional web app – Request & response
- Angular app – Request & response
ARCHITECTURE OVERVIEW
- Introduction to key building blocks of Angular
TYPESCRIPT
- What is TypeScript?
- Why TypeScript?
SETTING UP THE DEVELOPMENT ENVIRONMENT
- Introduction to Angular CLI
- Setting up Angular
CREATING AN APP USING ANGULAR CLI
- Setting up Bootstrap for styling
- How an Angular app gets loaded and started?
COMPONENTS & TEMPLATES
- What is a Component? What are its benefits?
- The Root component
- What are Decorators?
- Understanding the component decorator
- Creating and using components
- Component templates
- Component styles
DATA BINDING
- What is Data Binding?
- Interpolation
- Property binding
- Event binding
- Passing and using event data
- Two-way data binding
- Component interaction
- Parent to child interaction
- Child to parent interaction
DIRECTIVES
- Understanding Directives
- ngIf – Outputting data conditionally
- ngStyle – Styling elements dynamically
- ngClass – Applying CSS classes dynamically
- ngFor – Outputting lists
- Creating custom directives
SERVICES & DEPENDENCY INJECTION
- Need for a Service
- Creating a service
- Understanding Dependency Injection (DI) and its benefits
- Using a service within a component
- Using a service within another service
- Cross component interaction using a service
BUILDING SINGLE PAGE APPS USING ROUTING
- Need for a Router
- Setting up and loading routes
- Navigating with router links
- Styling active links
- Navigating programmatically
- Passing parameters to routes
- Fetching route parameters
- Passing query parameters
- Retrieving query parameters
- Setting up nested routes
UNDERSTANDING OBSERVABLES
- Introduction to Reactive Extensions (RxJS)
- Observables
- Creating Observables
- Using Observable operators
- Transforming Observables
- Cancelling Subscriptions
FORMS & VALIDATION
- Template-driven forms vs Reactive forms
- Building a form
- Registering form controls
- Submitting the form
- Understanding form state
- Adding form validation
- Outputting Validation Error messages
- Using two-way binding
- Grouping form controls
- Resetting forms
PIPES
- Introduction to Pipes
- Using pipes
- Parameterizing pipes
- Chaining multiple pipes
- Creating custom pipes
SERVER COMMUNICATION
- Introduction to Angular Http service
- Sending requests to server
- Getting data from the server
- Sending data to the server
- Transform responses with Observable operators
- Handling Http errors
CAPSTONE PROJECT
- Implement a product catalog (Angular CRUD Web App).