Angular

Introduction:
    ☐ What is Angular?
    ☐ Why is Angular?

Start:
    ☐ How to Install?
    ☐ How to create App?
    ☐ How to run App?

Architecture:
    ☐ Base
    ☐ Decorator
    ☐ Module
    ☐ Component
    ☐ Service/DI
    ☐ Router
    ☐ Life Cycles

File Structure:
    ☐ Src
    ☐ package.json
    ☐ angular.json
    ☐ tsconfig.json
    ☐ tslint.json
    ☐ editorconfig

Dive deep into Components:
    ☐ Parent and Child
    ☐ data binding
    ☐ pipes

    directive:
        ☐ component
        ☐ Structure
        ☐ Attribute

Extending Boilerplate with Home page

    ☐ Create Simple Component
    ☐ Create Simple Router
    ☐ Create Simple Service

PlayGround
    Create Front end of Task management app:
        ☐ Create header Component
        ☐ Create home Component
        ☐ Create request Service
        ☐ List all tasks list on home Component
        ☐ Add new task from home Component

    Your tasks:
        Extending Task Manager:
            ☐ Update task
            ☐ Delete task
            ☐ Export to PDF
            ☐ Export to Excel
        Create Front end for Contact manager:
            No auth required
            Create Home component
            Create header component
            Create footer component
            make header and footer as fixed
            create router
            Add new Contact -> new component
            create service -> handle all requests
            List all contacts
            Delete Contact
            Update Contact

Angular CheatSheet

Introduction:

    What is Angular? -> One Framework across devices
    Why Angular -> Single page Application, Speed, performance, Scalability, RXJS ( Reactive Ext for JS -> bring ASYNC programming, Eg: Observables support to angular)
        What is Observables
        compare to Promises
        Simple Example
        Example:

        apiData.subscribe({
            next(x) { console.log('data: ', x); },
            error(err) { console.log('errors already caught... will not run'); }
        });

Install
    Install Angular CLI -> npm install -g @angular/cli
        this will install a global program called `ng` -> mean a"NG"ular

Create App

    `ng new my-app` 'my-app' is user-defined
    ng will prompt you features, accept defaults and enter



File Structure:
    e2e => Test classes
    src
        app => dir has our all codes
        asset => asset stuffs like img, css
        environments => configurations
        polyfills => browser compatibilty
        style.css => affects entire app
        karma => Test cases
    package.json => project's meta
    angular.json => Angular meta
    tsconfig.json => ts configuration like compile info
    tslint.json => linter config
    editorconfig => Code standards protocals


Run App:
    `ng serve` => will compile TS into JS and run the app.
    `ng serve --open` => Opens running app into browser


Architecture:
    Base
        Written on Typescript
        NgModules is the heart of Angular, it helps to angular to differentiate components, module and inject dependencies on run time..etc
    Decorator
        With decorators, we can configure and customize our classes.
        anything starting with `@` is a decorator, there are dozen of decorators available. we can see them on the flow.
    Module
        Every module has @ngModule decorator and it has the following metadata
            declarations - The set of components, directives, and pipes (declarable) that belong to this module.
            exports - Makes the declared view public so they can be used by other modules.
            imports - This is where you import other modules.
            providers - DEFINES SERVICES that can be injected into this module’s views.
            bootstrap - The component used to launch the app, the AppComponent by default. All apps must have at least one. - Don't care now.
            routers - define router here
    Component
        it has own decorator @Component and it controls the `view`
            selector: CSS goes here either inline or external file
            templateURL: html template either inline or external file
            providers: services that this component requires
    Service and dependency injection
        Service
            Hold values, function features that app needs.
            Anything common should be here for reusability
            usage:
                Making requests,
                Logs
                validating user inputs such as authentication..etc
        DI
            service will be injected into components when they need it so service is DI and it should have a @injectable decorator
    Routing
        All navigation paths are handled here

    Lifecycle:
        ngOnInit() - on init -> only once => do all network request here best practice
        https://angular.io/guide/lifecycle-hooks - remaining check here


Create Component

`ng generate component tour`

create routing

add new routing in router file then add `routeLink`

Create header

https://demo.tutorialzine.com/2015/02/freebie-7-responsive-header-templates/header-login-signup.html

use material if possible

https://reqres.in/


directives:

    components
    strucutural -> changes the template strcuture -> ngIf, ngFor..etc
    attribute -> change attr of tag -> ngStyle, [src] ,


binding syntax:

    {{}}, [] -> 1 way src to view
    () ->  one way view to src
    [()] => two way

MongoDB

Introduction:
  ☐ What is NoSQL and why should we use it - done
    storage vs developer cost - done
    Mongodb(Nosql) - done
  ☐ Difference and Similarity between NoSQL and SQL - done
    Type, Scalability, Structure - done
  ☐ Advantages and Disadvantages - done

Install:
  ☐ Install and start MongoDB and Robo Mongo - done
  ☐ Install mongoose npm also show doc

Work with Mongoose:
  ☐ What is collection and how to use them
  ☐ Schema design ( don't too strict about relations)
  ☐ Creating models with Mongoose

  CURD operations:
    ☐ create()
    ☐ insertMany()

    ☐ findOne()
    ☐ find()

    ☐ updateOne()
    ☐ update()
    ☐ updateMany()

    ☐ deleteOne()
    ☐ deleteMany()

  Aggregation - http://excellencenodejsblog.com/mongoose-aggregation-count-group-match-project/:
    ☐ $group
    ☐ $match
    ☐ $project
    ☐ count
    ☐ distinct

stage 1-> stage 2 -> stage 3....so on

  ☐ What are indexes and how to use them - https://stackoverflow.com/a/56357057
  ☐ regex - https://regexr.com/
  ☐ Search with regex for Where condition 



PlayGround:
  Phone Contacts Application:
    ☐ Design and Create Collections
    ☐ Insert/Update/Delete/Read Contacts (CURD)
    ☐ View the total number of contact ( Aggregation - Count)
    ☐ View group of contact from the same city ( Aggregation - group )

  Task Management Application:
    ☐ Design and Create Collections
    ☐ Insert/Update/Delete/Read Tasks (CURD)
      {
        name: String
        description: String
        startDate: String
        endDate: String
        isDone: String
      }

    ☐ View the total number of tasks ( Aggregation - Count)
    ☐ View group of contact from the same date ( Aggregation - group )

Node JS

NodeJS:
  Introduction:
    ☐ What is nodejs
    ☐ Single thread and event driven language and run time
    ☐ Why nodejs
    ☐ Nodejs depth - v8, event loop
    ☐ All about npm

  Install:
    ☐ Node + npm locally globally and set environment paths

  Ecma Script:
    ☐ What is ES
    ☐ Asynchronous vs Synchronous
    ☐ Class, Template strings, Object literals, Promise, await/async, Hoisting and Closure

  Express:
    ☐ What is express
    ☐ Install express
    ☐ create basic API

  REST API:
    ☐ What is REST
    ☐ Available methods
    ☐ Basic API creation with express

  MVC pattern:
    ☐ Creating strong and extendable MVC pattern for node app

  Unit testing:
    ☐ Introduction for TDD
    ☐ Create sample unit testing with mocha, chai

  Play Ground:
    ☐ Calculator app for understanding routes
    ☐ URL shortner with cleanuri.com (Public API) to understand about making requests
    ☐ Get whether details from metaweather for handling multiple requests - Their Task for week ( Send City -> get ID -> make another request with woid -> parse sun rise and set timing)