Angular

Core Training Topics

Below are the high-level topics that will be covered

  • ES6
  • Typescript
  • NodeJS
  • NPM
  • Angular CLI
  • Angular 6
  • Mockable IO
  • Post Man
  • Case Study

Detailed Course Content:

  • ES6
    • Introduction
    • Variable and parameters
      • let – block scope
      • const
      • Default parameters
      • Rest parameters
      • Spread parameters
      • Template literals
    • Arrays
      • filter
      • find
      • map
      • reduce
      • etc
    • Arrow functions
    • Classes
      • Declaring class
      • Inheriting a class
      • Override
      • static property
    • Modules
      • Creating a module
      • Importing a module
  • Nodejs
    • Introduction
    • Installation
    • Executing JS Expressions in Node.js
    • Executing JS code(js files) in Node.js
    • Module basics
    • Event System and Architecture
  • NPM
    • Introduction
    • Installation
    • Installing NPM packages 
    • How to build and deploy npm packages
    • Usages of the npm packages
      • http-server
      • typescript

  • TypeScript
    • Introduction
    • What is TypeScript
    • Why and where to use TypeScript
    • How TypeScript help in Angular Development
    • Why Angular Development is done through TypeScript
    • Variables and Functions
      • Defining Types
      • String
      • Int
      • Bool
      • Type Inference
    • Object types
    • Function types
    • Arrow Functions
    • Classes and Interfaces
      • Defining Class
      • Properties
      • Methods
      • Extending the Classes
      • Using Interfaces
      • Implementing the Interfaces
    • Modules
      • Creating a Module
      • Using Modules
      • Module Dependencies
  • Angular CLI
    • Introduction 
    • Installing 
    • How Angular CLI helps in Angular Development
    • Create new app
    • Create new service
    • Create new component
    • Create new class
    • Create new pipe
    • Create new interface
    • Run web server
    • etc
    • Web Pack- bundling, minification etc
  • Angular 2/4/5/6/7/8
    • Introduction
    • Introduction to MVC
    • Why Angular 2/4/5/6
    • Expressive HTML
    • Powerful Data Binding
    • Modular by Design
    • Built-in Back-End Integration
    • Components
      • Introduction
      • Template
      • URL
      • Class
      • Properties
      • Method
      • Metadata
      • Decorator
      • Using As Directives
      • Modules
      • Export Module
      • Import Module
    • Data Binding
      • Interpolation
      • Property Binding
      • Two way Binding
      • ngModel
      • Event Binding
  • Directives
    • Angular Built-in Directives
    • Structural/Attribute Directives
      • *ngIf
      • *ngFor
    • # – Local Variable
  • Pipes
    • Introduction
    • Built in Pipes
      • lowercase
      • uppercase
      • currency
      • JSON
      • date
      • decimal
  • Creating Custom Pipes
    • statusPipe
    • Using Custom Pipes
  • Advanced Components
  • Strong Typing and Interfaces
    • Specify types to variables
    • Create interface and use interface to denote object and arrays
  • Component Styles
    • Encapsulating styles
    • styles
    • styleUrls
  • Filter APIs
    • Filter Items
  • Component Lifecycle
    • Create
    • Render
    • Render children
    • Process changes
    • Destroy
  • Component Lifecycle hooks
    • OnInit
    • OnChanges
    • OnDestroy
  • Nested Components
    • Building Nested Component
    • Using Nested Component
    • Pass data to Nested Component
      • Input binding
    • Raise Event from Nested Component
      • Output binding
      • Events
      • Event emitter

  • Services and Dependency Injection
    • What is service
    •  Build service
    • Register service
    • Injecting the service
  • Using Built In Services
    • Data Exchange Using Http
    • Get
    • Post
    • Update
    • Delete

  • Observables and Reactive Extensions
    • Receiving Data Using Http
    • Sending Data using Http
    • Handling Errors
    • Subscribing to an Observable
  • Angular Forms
    • User Input
    • Binding to user input events
    • Get user input from the $event object
  • Template-drive forms
    • Form Validation
    • Template reference variables
    • Pattern validation
    • ngModel
  • Reactive Forms
    • Dynamic Forms
    • Form Group
    • Form Control
    • Form Builder
    • Pattern Validation

  • Navigation and Routing
    • Routing
    • Configuring Routes 
    • Tying Routes to Actions 
    • Passing Parameters to a Route 
    • Routing through API
    • Access Route Parameters through API
  • Custom Validators
    • noSpace Validator
    • comparePassWord Validator
  • Building Directives
    • ngClass
    • ngStyle
    • hidden
    • ngSwith
  • Build custom attribute directive
    • introduction
    • maxQuantity
  • Build custom structural directive
    • Custom ngIF
  • Route Guards
    • Introduction
    • What are they
    • Authentication route guards
    • Authorization route guards
    • localStorage and sessionStorage
  • Modules
    • Shared Module
    • Feature Module
    • Root Module
    • Lazy loading vs Eagerly Loading
    • Routing in Feature Modules
  • Advanced Routing
    • resolve
    • canActivate
    • canDeactivate
  • Unit Testing
    • Service
    • Pipe
    • Directive
    • Component
  • Mockable IO
    • Create Mockable Web API
    • httpGet
    • httpPost
    • Using it in application
  • Post Man
    • Tool to Verify Web API’s
    • httpGet
    • httpPost
    • Passing data

Case study :

  • As part of the Case study we are going to create the Mobile Kart App where users will be able to do following use cases
  • Navigation Menu to displaying difference categories of mobiles
  • See list of mobiles available on sale
  • Hide and display the images of the mobiles for the optimum view
  • Select the mobile to display more information about the mobile
  • Go back to the mobile list once done with the mobile detail view
  • Able to filter the mobiles based on text
  • Add mobile to cart
  • Each mobile should display the rating available to that.
  • Register with App
  • Login to App
  • Welcome and Support screen
  • For Developing above Project using we will use below said features on Angular (2 and above)
  • Components to display list of mobiles
  • Classes (as component) to get the data of the mobiles
  • Custom Service to fetch the data from the server
  • http service to get the data
  • Pipes to filter the data 
  • Custom pipe status Pipe to specify availability of the mobile 
  • Component to display the star rating for device (as Nested Component)
  • Communicating between components
  • Property binding to set image source
  • Interpolation to display the mobile content to page
  • ngIf directive to display and hide the image
  • Event Binding login to application
  • Template forms with registering application
  • Reactive forms with logging into application
  • Form validation in login and registration screen
  • Routing from login to welcome
  • API routing from mobile list to mobile detail component
  • Max quantity attribute directive
  • Custom ngif directive
  • Router guards
    • Authentication
    • authorization
  • Create tiles module and push all the tiles related components, pipes etc there
  • Make tiles module lazy loading
  • Create shared module and use it in the tile’s module
  • Create user module and move the login and register component there and make it as eagerly loaded module