AngularJS Summer Training Course Material

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

  • Internet and 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
  • AngularJS vs jQuery vs JS
  • 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
  • Absolute and Relative Paths
  • HTML 5 – Semantic Web
  • HTML forms – Inputs Types : Text, Password, Select, TextArea, Radio, Checkbox
  • “name” and “value” attributes
  • GET and POST Requests
  • ID vs CLASS attributes
  • Introduction to Chrome Dev Tools

Day 3 - 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 4 - 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- z-index,
  • RGB values and Hex Codes
  • Animate CSS
  • Nesting of Selectors  [ Game Here ]

Day 5 - Javascript 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, unshift, shift, join
  • String Methods – split, indexOf, match, replace
  • Function chaining
  • Declaring function in JS – The 2 ways
  • Global and Local scopes

Day 6 - Javascript Basics - Part 2

  • Javascript Reference variables – Array and Object
  • Callback functions – function as arguments
  • Nesting of functions
  • Timers – SetTimeout and SetInterval
  • Date Object
  • Math Object – Random numbers

Day 7 - Angular JS - Introduction

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

Labs Session

  • Practice Problems on Github – Here (Lab1.md)
  • More Practice Problems – Here

Day 8 - AngularJS - Controller and View-Model Bindings

  • 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

Day 9 - AngularJS : Controller and View-Model 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 – success, danger, info, primary, default
  • Bootstrap Grid system – use of rows and cols and 12-col system
  • Responsive layout and use of – xs, sm, md, lg
  • BootSwatch themes

Day 11 - AngularJS : In-buit Directives using TODO App

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

Day 12 - AngularJS : In-buit Directives using TODO App

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

Labs Session 2

    • Practice Problems on Github – Here (Lab2)

 

Day 13 - AngularJS : Services

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

Day 14 - AngularJS : 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 - AngularJS : Variable Routing and Creating a TODO List App

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

Day 16 - AngularJS : Filters

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

Day 17 - 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 18 - Firebase : Integrating Todo-App with Firebase

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

Day 19 - Firebase : Integrating Todo-App with Firebase

  • Firebase Hosting
  • Firebase CLI
  • Firebase optimum data storage strategies
  • firebase.json

Day 20 - Firebase : Social Logins using FirebaseAuth

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

Day 21 - Project Discussions

  • Project of Various nature

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

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

Day 23 - App Development Stages

  • Brainstorming
  • Mockups
  • Data Storage Modelling
  • Front end Development
  • Backend Integration

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 JS 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 - Plugins

  • Ionic Plugins using Ng-Cordova Library
    • GeoLocation Plugin
    • Launch Navigation Plugin
    • FlashLight
    • Share plugin
    • SMS plugin
    • Camera plugin

Day 28 - Form Validations using AngularJS

  • Form Directives
    • ng-submit
    • classes – ng-dirty, ng-pristine, ng-valid, ng-invalid
    • services – $dirty, $valid, $invalid, $pristine, $submi
    • Form validation error – $error and its properties

Day 29 - Layouting the ChatApp and Localstorage

  • Chat App Layout using Bootstrap and Custom CSS
  • Localstorage
  • Using JSON.stringify and JSON.parse
  • Localforage – webSQL, IndexDB, LocalStorage
  • Angular Localforage

Day 30 - 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

Day 31 - Chat App - Part 1

  • Creating the Dynamic Chat bubble using ng-class and ng-if
  • Storing chats in Firebase
  • Creating login and signup
  • Redirecting using $location.path
  • Creating multi-user scenario

Day 32 - Chat App - Part 2

  • Chat App session management
    • Chat App Firebase login Service
    • Chat App resolve method and $waitforSignIn
    • Using session to make app redirect correctly.

Day 33 - Angular Directives - Part1

  • Angular Directives
    • Restrict
    • Link
    • Template and Template Url
    • Link – Element, Attributes, and JQlite functions
  • Popover directive and its usage

Day 34 - Angular Directives - Part2

  • Angular Directives
    • Require
    • Scope – true, false and separate scope values
    • Controller
    • Directive to Directive relations
  • Using Directives available on web

Day 35 - Introduction to Node

  • Node Server
  • Npm init and Package.json
  • Node Server and Port number
  • Node APIs
  • GET and POST handles
  • Node Request and Response Object
  • Middlewares
  • Node and Mongo Connection
  • Mongo Queries

Day 36 - Firebase Queries and Limiting the results

  • Firebase Queries
    • startAt
    • endAt
    • orderBy
    • equalTo
  • Firebase Events
    • value
    • on_added
    • on_change
    • on_deleted

Day 37 - NodeJS - Setup and Basics

  • Node Installation
  • HTTP server creation
  • Express JS
  • Request and Response objects
  • Creating a simple API in Node

Project Choices

Geo-Fencing is an important feature in modern mobile applications. Geo Fencing refers to generating triggers on the event of entering or exiting certain geographic boundaries. These boundaries are defined by software and maintained via the latitude-longitude information. These apps use GPS to detect any occurrence of events where subject crosses the boundaries of the certain region.

Geofencing is used in various sectors where the subject – Human or Devices need to be inside or outside a certain region. It informs the Authority of any such rule violations.

Here are the areas where Geo-Fencing is used:

  • Driver route management – especially for trucks
  • Drones management – Specially restricting the Fly zones
  • Markets and Shopping zones provide geo-fencing based coupon alerts to customers
  • Asset Management – where devices and machinery can’t be taken out of premises.
  • Law Enforcement – for people under house arrest
  • Home Automation

You are free to choose your area of interest where you want to apply GeoFencing, But here is a minimum list of features to be incorporated.

  • User identity management: log in or any authentication
  • Geo-fencing triggers – moving inside or outside
  • Geo-fencing alarms – sound alarms or any other notification to admin including email, SMS, push notification etc.

Tic Tac Toe is quite ubiquitous and a popular game. We have a 3 x 3 grid with traditional cross and circle notation. However playing tic tac toe with a distant friend connected via social media is a dream come true. Here is the simple game:

  • Connect with Facebook to user Identity.
  • Find all people logged in via Facebook on this application
  • Challenge someone to play with you
  • Have a separate scorecard for each pair of users.
  • Also, show world leaderboard – where you can have your algorithms to show chart toppers – may be a number of wins or win/lose ratio.
  • UI should be simple and understandable.
  • Use of animation is preferable but should not too much
  • Mobile friendly-ness is required
  • Sounds are optional but can add a lot to the game.
This Chat Room is a multiuser open chatroom which can work over LAN or public internet. You can chat on common group page or send somebody a private message only visible to them. It is an interesting platform to make teamwork happen in colleges and open teams. One great feature to this application will be that it should work over the LAN also – after the initial authentication process is over. This helps it to be more useful in offline mode.

These are few feature which can be used:

  • Chat Room Should be accessed via name credentials ( later on social login)
  • All online users should be shown in side-pane
  • Click on a user to send private message to them
  • Group chat should be visible to all
  • Provide theme color to user which will be used as there chat text also
  • Allow #tag feature where one can tag a statement which be later searched on via a search box
  • Search box should be able to search all text, usernames
  • Time stamp must be visible in Chat (in form of time Ago)
  • Chat should auto scroll to lowest part
  • Create a directive for smiley detection and image replacement in HTML
  • See the chat from where you have left
  • only show last 100 messages and load old ones on demand via a scroll function.
  • Use a sound for special characters

Organizations, people, businesses need feedback from their customers or stakeholders. However providing a true feedback is hard as people start judging the intentions according to sender identity. Anonymous feedback provides a way to people to provide a true feedback. This system can be integrated into any website or app to make it more useful to people. Here are the features of this application:

  • User Login is necessary of the people creating survey/feedbacks.
  • Users should create a survey/feedback form and share a unique URL of that survey.
  • Feedback forms can contain – a survey with choices, comment box or rating stars.
  • All users can access the URL
  • Users can share the URL to his/her friends via Email or Social Media
  • Final results should only be accessible to user who created the polls/survey
  • There can be filters to avoid any spammers/abusers from posting comments.
  • Forms should be simple and responsive for the web and mobile platform.

This app uses APIs like Clarifai to do object recognition. We can recognize any simple object and create a list of objects detected. These objects will not have 100% accuracy of detection but can tell us a lot about the objects. This can help in education related applications where someone can upload a picture and identity the objects.

  • Interface to upload images or link images available on the internet
  • A list of results will be available to us
  • Using list of words one can create game to match right words for an Image
  • Each right word provides some points
  • Wrong word leads to negative points and also provide right answer suggestions.

Chat bots are the need of the time. With too much information overload and lots of application to interact with – humans need a way to interact with devices in the more human way. Chat bots make your life easy by putting up intelligent question, suggestions and making choice simple enough. We are designing a chat bot which may diagnose simple disease or common problem with health.

  • Chatbot should be invoked as soon as you open the app
  • Chatbot should provide few options for any questions you put up
  • By navigation through choices, you should be able to reach to final search results.
  • Chatbot should start with category of malice you have and then dive into details of each
  • You can categorize few common symptoms like a headache, flu and food allergies.
  • This app will not recommend any medicine but can recommend simple cure which is available in the household.