Full Angular JS

No. of Days: 2

Who Should Attend :

• Web Developers who want to develop power web apps using Angular JS 2
• Front End Web Developers who want to migrate from Angular JS 1 to Angular JS 2

Course Outline                             16 Hours

Part 1  –                                               8 Hrs

Section 1 – TypeScript Overview

• ES6 & TypeScript
• Static Typing
• Constants
• Block Variables
• Template Strings
• Arrow Functions
• Spread parameters
• Rest parameters
• De structuring
• Classes
• Inheritance
• Interfaces
• Modules
• Decorators

Section 2 – Architecture Overview

• Setting up AngularJS 2
• Angular Hello World App
• Booststrapping angular to index.html
• Architecture Overview
• Core concepts

Section 3. Modules, Components and Templates

• Introduction to Modules
• Importing Modules
• What are components in Angular
• Component templates
• Component metadata
• Component decorator
• Decorator configurations
• Component Events
• Template Variables

Section 4. Data Binding

• What is Data Binding
• Property Events
• Passing data into a Component
• Passing data from parent component
• Event Bindings
• Passing Data Outside the Component
• Parent receiving data from child
• Two way Data Binding
• Hands on Data Binding – creating movie details screen

Section 5. Directives and Pipes

• What are Directives in Angular
• Structural directives
• Attribute directives
• Built In Pipes
• Hands on directives and pipes – updating movie details view
• Using ngIf and ngClass directive
• Using inbuilt pipes

Part 2  –                                               8 Hrs

Section 6. Services and Dependency Injection

• What are services
• Writing our custom service to load of movies
• What is Dependency Injection
• How Angular does dependency injection
• Using dependency injection to load services
• Hands on Services – load movies and then create a Grid View layout to display movies
• Using ngFor directive
• Creating grid layout

Section 7. Angular Routing

• Angular 2 routing
• Route configuration
• Route params
• Hands on Routing – navigating between grid view and details view
• Exercise – add route to navigate from details view to edit view

Section 8. Angular Forms & Validations

• User input
• Form Validations
• Form States
• Hands on Form Validation – adding a edit details form to update movie details

Section 9. Angular, MongoDB and Express

• Creating tables using MongoDB
• Adding and retrieving data from MongoDB
• Creating API’s in Express to fetch data
• Creating Services in Angular to connect to Mongo
• Using services to load data from Mongo

Section 10. Deploying Angular App to Heroku

• Publishing your app to Github
• Heroku Toolbelt overview
• Logging to Heroku inside toolbelt
• Updating package.json and testing the app locally
• Deploying app to Heroku