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