AngularJS Summer Training Course Material (Batch 2)

Tools and Preparation :

  1. Install git on your system for here.
  2. Create an Account on Github.
  3. Download and install any one of IDE of your choice – VS Code, Webstorm, Atom, Sublime.
  4. Download and install node from here.
  5. Download and install SourceTree from here.
  6. Angular official site – Angular 1

PDF NOTES :

  1. HTML/CSS 
  2. JS + HTML FORMS
  3. AngularJS Introduction

HTML/CSS Reference Links :

  1. Code Academy – HTML/CSS Tutorials
  2. HTML 5 Cheatsheet – Download
  3. HTML 5 Official Mozilla Docs – For Geeks

JS References :

  1. A very good book on JavaScript  : Here

UI/UX References:

  1. Bootstrap – Here
  2. BootSwatch – Theme based on Bootstrap. Here

Sites and Resources to follow on Web and Other Technologies (More Updates soon) :

  1.  Hacker News
  2.  Tech Crunch
  3.  Google Developers – Youtube
  4.  Youstart Labs – Youtube
  5.  LearnCode.Academy – Youtube

Day 1 - Fundamentals of Web

  • Browsers [ For in-depth understanding Read this]
  • Frontend End Development vs Backend Development
  • UI/UX [Read This]
  • Single Page Apps and how they are different
  • Favorite Web IDEs – Atom, Webstorm, VSCode
  • Hybrid Apps vs Native Applications [ Read This ]
  • Javascript as a programming language – ES5/ES6 [ Watch JS/ Advanced JS ]

Day 2 - HTML and DOM

  • HTML Markups
  • HTML Elements – Tags and Attributes
  • HTML DOM Tree
  • HTML Tags – DIV, SPAN, A, IMG, P, H1, UL
  • Absolute and Relative Paths
  • ID vs CLASS attributes
  • Introduction to Chrome Dev Tools

Day 3 - CSS

  • Applying Styles in various methods  – external stylesheet (css), internal style, inline styles
  • Cascading stylesheets
  • User Agents Stylesheets
  • Priority of Styles
  • Use of !important
  • CSS Style element – Selectors, Property-Value pairs
  • CSS properties – background, color etc
  • CSS directional properties – Margin, padding, border (shorthand notations)
  • Special properties-  display, border-radius etc
  • Nesting of Selectors  [ Game Here ]

Day 4 - JS Basics

  • Javascript – Dynamically typed language
  • Chrome Console
  • Variables in JavaScript – (var)
  • Mutator vs Non-Mutator Methods
  • Array in Javascript
  • Object in Javascript
  • Array Methods – push, pop, splice, reverse, join
  • String Methods – split, indexOf, match, replace
  • Function chaining

Day 5 - JS Basics (Part 2)

    • Javascript Reference variables – Array and Object
    • Callback functions – function as arguments
    • Chaining of functions
    • Timers – SetTimeout and SetInterval

Day 6 - Introduction to AngularJS (DOM manipulation)

  • AngularJS – An Introduction to Framework
  • Using Angular library 1.6
  • Boot-strapping the application using ng-app
  • Using Data binding using ng-model
  • Angular expressions  – {{ }}

Day 7 - Angular JS : Controllers

  • Defining an Angular module
  • Creating a controller and attaching it using ng-controller
  • View Variables vs Normal JS variables
  • Using this vs $scope
  • Controllers and Different Scopes
  • Inheritance of Scopes
  • Installing Bower and Using Bower

Day 8 - Git Basics

  • Git Command Interface
  • Git config setup – user.name and user.email
  • Git Repository Creation – git init
  • Git Staging – git add
  • Git Commit – git commit
  • Saving Commit on Remote Server(Github) – git push
  • Adding remotes  – git remote
  • git status, git log
  • Using SourceTree to making changes from UI
  • Github repo creation
  • Git Clone

Day 9 - Angular JS : Controllers example (Game of Flags)

  • Creating a Game of Flags using Controller and Simple angular logic:
    • Random generators
    • Object arrays of Nations with Alpha-2 code [github]
    • ng-click
    • ng-if
    • Library for flags [ flag-icon-css]

Day 10 - Bootstrap

  • Bootstrap Install – using Bower
  • Bootstrap examples – buttons, alerts, forms, icons (glyphicons)
  • Bootstrap colors – successdangerinfoprimarydefault
  • Bootstrap Grid system – use of rows and cols and 12-col system
  • Responsive layout and use of – xs, smmdlg
  • BootSwatch themes

Day 11 - Todo App using Controllers - In-built Directives

    • AngularJS Directives
      • ng-repeat ($index)
      • ng-if
      • ng-show
      • ng-hide
      • ng-click
    • Todo App
      • Layout Designing using bootstrap
        • form-control
        • list-group
        • btn classes
      • Creating add and remove function
    • Using ng-inspector to checkout different scopes

Day 12 - Todo App using Controllers - In-built Directives

  • AngularJS Directives
    • ng-class
  • Todo App
    • Creating a status variable
    • Changing value using ternary operators
    • Using Array of Objects
    • Edit functionality

Day 13 - Services

  • Communicating between controllers
    • Using Services – Factory method
  • Use of Services
  • Services as data storage

Day 14 - Routing

  • Downloading angular-route Library (Using Bower)
  • ngRoute module
  • Using .config() section
  • Using $routeProvider
  • Configuring $routeProvider as .when() switch
  • .otherwise() for default redirect URL
  • Using ng-view
  • Using partials
  • Using services for data sharing between controllers

Day 15 - Routing in Todo App

  • Variable Routing
  • $routeParams to access variable in URL
  • TODO application with multiple lists

Day 16 - Firebase : Setup and AngularFire

  • Firebase Project Config setup
  • AngularFire – A library for angular and Firebase
  • Firebase database – Hierarchical database
  • AngularFire – setup
  • AngularFire Services : $firebaseArray & $firebaseObject
  • AngularFire methods : $add

Day 17 - Firebase : Integrating Todo-App with Firebase

  • $firebaseObject and $firebaseArray
  • Thinking the data structure in Firebase
  • .Child()

Day 18 - Firebase : Social Authentication and User management

  • $firebaseAuth service
  • OAuth login mechanism
  • origins and redirect_urls
  • Facebook and Google logins
  • Permissions in Social Logins

Day 19 - Angular Filters

  • Angular In-built filters
    • Date
    • Number
    • Lowercase/uppercase
  • Ng-repeat  filters
    • filter
    • orderBy
  • Using custom filter
  • Using filters in TODO List

Day 20 - xyz

Day 21 - REST API : How to access using $http

  • REST APIs
  • Public APIs
  • Using $http service
  • $http.get
  • Marvel API example

Day 22 - Layouting the ChatApp and Project Development Stages

  • Chat App Layout using Bootstrap and Custom CSS
  • App Development Stages
    • Brainstorming
    • Mockups
    • Data Storage Modelling
    • Front end Development
    • Backend Integration

Day 23 - Localstorage

  • Localstorage
  • Using JSON.stringify and JSON.parse
  • Localforage – webSQL, IndexDB, LocalStorage
  • Angular Localforage

Day 24 - Mobile App Development - Ionic Framework v1

  • Ionic Installation
  • Ionic template projects – tabs, blank, sidemenu
  • Ionic CSS
  • Ionic JS components
  • Ionic Plugins
  • Ionic Build and Run
  • Chrome Inspect Devices

Day 25 - Mobile App Development - Ionic Framework v1 - CSS

  • Ionic CSS components
    • Ionic Header
    • Ionic Content
    • Ionic Footer
    • Ionic List
    • Ionic Tabs
    • Ionic Button – Clear buttons, Icon buttons
    • Ionicons
    • Ionic Forms – Checkbox, radio, Inputs
    • Ionic Grid system – Col and Row

Day 26 - Mobile App Development - Ionic Framework v1 - Routing and Plugin Components

  • Ionic JS components
    • Popover
    • Popup
    • Modal
    • Sidemenu
    • Tabs
    • List Items
  • Ionic Routing – UI Router
    • State Changes
    • Nesting of states
    • ion-nav-view tag
    • ui-sref usage

Day 27 - Mobile App Development - Ionic Framework v1 - Plugin Components

Ionic Plugins using Ng-Cordova Library

  • GeoLocation Plugin
  • Launch Navigation Plugin
  • FlashLight
  • Share plugin
  • SMS plugin
  • Camera plugin

Day 28 - File Uploads using Firebase Storage

  • Firebase Storage
  • File API in HTML – using File Blob Object
  • Firebase file reference system
  • Angular Fire Storage Service – $firebaseStorage
  • $firebaseStorage
    • $put
    • $getDownloadURL
    • uploadTask
      • $progress
      • $complete
      • $error
  • Using Database along with Firebase Storage service