NodeJS & AngularJS

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.7lpkhdldx

MEAN Stack

NodeJS

What is NodeJS?

• Fast (built on Chrome's V8 JavaScript engine)

• FullStack JavaScript

• event-driven, non-blocking I/O

• Realtime Application

A quick lookvar fs = require('fs');

fs.readFile('hello.txt', function(err, data){ console.log(data.toString()); });

console.log("hello world");

event-driven

readFile "hello world” data from file

Callback hell

promise, observable

Creating Module with CommonJS

• require

• exports

• modules.export

example: exportsexports.run = function(){ console.log('print'); }

exports.walk = function(){ console.log('copy'); }

var dog = require("./dog");

dog.run();

dog.js app.js

example: modules.export

module.exports = function(){ console.log("export"); } exports();

exports.js app.js

Module Type

• Core Module (Built-in Module) => fs , http

• File Module => exports.js

• Folder Module => folder has a package.json

• Third-party Module => npm

npm install <module_name> npm install -g <module_name>

https://www.npmjs.com/

example: npm i bootstrap 4.0.0, npm -g install forever

NPM

Setting up the Project

https://nodejs.org/en/

Install NodeJS

https://drive.google.com/drive/folders/0B1nLyRIrgh3_dTh5ZFdsNVhHa0E

Seed Project

npm install

Install Dependencies

Understanding structure

Webpack

https://webpack.github.io/docs/configuration.html

Working with Request and Response

Request and Responserouter.get('/message/', function (req, res, next) { res.render('node', {message: ‘Hello world’}); });

router.get('/message/:msg', function (req, res, next) { res.render('node', {message: req.params.msg}); });

router.post('/message', function(req, res, next) { var message = req.body.message; res.redirect('/message/' + message); });

Request and Response

<h1>A NodeJS View</h1> {{ message }}

<form action="/message" method="post"> <input type="text" name="message"> <button type="submit">Submit</button> </form>

Request

• req.body => http://project/user/5?token=abc

• req.param => http://project/user/5?

• req.query => http://project/user/?token=abc

ref: https://expressjs.com/en/api.html#req

Data Format

• JSON

• Plain Text

• File

• URL

ref: https://expressjs.com/en/api.html#res

MongoDB

https://www.mongodb.com/download-center#community

Install MongoDB

Stating Mongo Server & Mongo Shell

Mongoose

• ORM

• Schema

• Validation

ref: https://expressjs.com/en/api.html#res

Using Mongoose

• Install mongoose

• Connection URI

• Creating model

• Storing data

• Fetching data

ref: https://expressjs.com/en/api.html#res

Install mongoose

npm install mongoose —save

npm install mongoose-unique-validator —save

ref: https://expressjs.com/en/api.html#res

Connection URI

mongodb://username:password@hostname:port/database

ex. mongodb://localhost/my-project

AngularJS

What is AngularJS?

• Cross Platform ex. Progressive web apps

• Speed and Performance ex. Universal

• Productivity ex. Angular CLI

• Full Development Story ex. Testing, Animation

Single Page Application

TypeScript

• Types

• Classes

• Modules

• Decorators

• etc.

https://www.typescriptlang.org/

Why should I use TypeScript?

[sudo] npm install typescript -g

Install TypeScript

Modules

Modules• NgModule

• declarations

• exports

• imports

• providers

• bootstrap

Components

Components

• selector

• templateUrl

• providers

Staring an Angular

Interpolation

double-curly braces of interpolation, {{ and }}

Template expressions

<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

Templates and Styles

• inline in the template HTML

• by setting styles or styleUrls metadata

• with CSS imports

Two-way data binding

<input [(ngModel)]="currentHero.firstName">

Creating Model

Multiple Components

reusing components

Property Binding

[property]="expression".

<img [src]="userImageUrl">

Property Binding (2)

<user-detail [user]=“currentUser"></user-detail> a custom component (a great way for parent and child components to communicate):

Data Binding

The binding punctuation: [], () or [()]

Built-in directives• NgClass

• NgStyle

• NgIf

• NgSwitch

• NgFor

The asterisk (*) * and <template>

example: Showing an array property with *ngFor

<h1 *ngFor="let student of students”> {{ student.id }} </h1>

Services

Creating a Services

@Injectable() decorator

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Lifecycle Hooks

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Getting message via a Services

RouterModule

• RouterOutlet

• RouterLink

• RouterLinkActive

• Routes (a configuration)

Creating a Header

Setting up Routing

import { RouterModule, Routes } from '@angular/router';

<router-outlet></router-outlet> <!-- Routed views go here -->

Configuration

Routing and Navigation

Router Links

<a routerLink=“/about">About Us</a>

HTTP

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

private productsUrl = 'api/products'; // URL to web api

constructor(private http: Http) { }

getProducts(): Promise<Products[]> { return this.http.get(productsUrl) .toPromise() .then(res => res().data) .catch(this.handleError); }

Observables

https://github.com/Reactive-Extensions/RxJS

constructor(private http: Http) {}

search(term: string): Observable<any[]> { return this.http .get(`app/products/?name=${term}`) .filter(price => price > 30) .map((res) => res.json().data); }

Introduction to Angular Testing

Testing

• Jasmine

• Angular Testing Utilities

• Karma

• Protractor

https://embed.plnkr.co/?show=preview&show=app%2Fbanner-inline.component.spec.ts

The first component spec

Large Apps

/app /admin /vendor /public /shared

/auth

components services classes interfaces templates directives