AngularJS Training Material – Feb’2017 Batch

Day 1 - HTML CSS JS Introductions

  • HTML Basics
  • CSS Basics
  • URL Basics
  • Editor and Setups Required – Node, NPM, Bower, VS Code, Git, Android Studio, Ionic, Cordova

Day 2 - JS Basics - Part 1

  • JavaScript Basics – Native Data types, Arrays, Object and Functions
  • Callback functions
  • Functions as value
  • Hoisting of Function
  • Mutator vs Non-Mutator functions
  • Array Functions – Push, Pop, Unshift, Shift, Splice, Reverse, Join, Concat
  • JSON object Structure

Day 3 - JS Basics - Part 2

  • JavaScript Objects
  • Reference Copying vs Value Copying
  • String Functions – indexOf, charAt, split, match, replace
  • How to think in terms of JSON
  • Array Notation for Object
  • Function chaining

Day 4 - Higher-Order Functions / ES6

  • ES6 concepts
    • Let and Const
    • Arrow functions
    • Class and Constructor
    • Inheritance and extends
    • Template Literals
  • Higher Order Functions
    • Map
    • Reduce
    • Filter
    • Chaining of functions

Day 5 - First Angular Application

  • Angular Application
    • Module (ng-app)
    • 2-way Data Binding (ng-model)
    • Controller (ng-controller)
    • Scope of a controller
    • ng-show/ng-hide/ng-if

Day 6 - Todo List Application

  • Angular Todo Application
    • functions and ng-click
    • using Array and Ng-Repeat
    • using ng-class for styling
    • using ng-show/ng-hide

Day 7 - Bootstrap + Intro to Services

  • Bootstrap
    • Bootstrap Components
    • Bootstrap grid systems
    • Responsiveness using XS MD classess
  • Services
    • Using Factory method
    • Using in-built services $location

Day 8 - Services and Data sharing

  • Controller scopes
  • Sharing scope variables via $rootScope
  • Services
    • Using Factory method create own data-service
    • Using reference binding on services

Day 9 - ngRoute Module and Routing

  • ng-view Directive
  • Partials – HTML
  • angular-route library and NgRoute Module
  • $routeProvider service
  • config Section
  • routing basics
  • Using services and sharing Data across the view
  • Use of HashBang #!
  • Use of $location service for routing.

Day 10 - Routing Advanced and Filter Basics

  • $routeParams and variable routing
  • Angular Filter
  • Angular Filter ng-repeat
  • Using filter with Object and Strings

Day 11 - Use of filters and Custom filter

  • Creating  Custom Filters
  • Date filter
  • Uppercase, Number filters
  • Creating Demo eCommerce and using filters

Day 11 - Use of filters and Custom filter

  • Creating  Custom Filters
  • Date filter
  • Uppercase, Number filters
  • Creating Demo eCommerce and using filters


Create a TODO LIST APP with features as given below

  • The Home View of TODO LIST APP lets you create a new Todo List (Like Shopping TODO, Work TODO)
  • Single Todo List task  – Adding Task, Deleting Task, Checking off the tasks, Removing tasks.
  • TODO LIST should be able to retain the tasks in browsers storage (This part is optional as we haven’t discussed)
  • TODO LIST should automatically move completed tasks to bottom of the list.
  • TODO LIST tasks can only be deleted after confirmation from user. No 1-click delete
  • TODO LIST tasks can be clicked and edited
  • TODO LIST should have buttons to move task UP or DOWN. (However no completed tasks should mix with uncompleted ones)
  • TODO LIST should show up no. of tasks completed and total tasks.
  • UI should be intuitive to user and you can use Bootstrap for that.
  • Logics must be housed in services and not controllers.
  • You should be able to navigate between Home where all TODO LISTS are listed and Single TODO LIST
  • Create a Search box to filter out task based on text search, date of creation, status (completed/not-completed)

Day 12 - Local Storage in Browsers

  • LocalStorage
  • Localforage
  • JSON.stringify and JSON.parse
  • Angular-localforage

Day 13 - REST APIs and AJAX

  • REST APIs and AJAX calls
  • Using $http Service
  • GET and POST methods

Day 14 Using REST APIs and Common APIs

  • Using API with Keys
  • Using API data through $http serivce
  • Creating a Mock API using
  • Sending data from request in GET and POST requests