Node.js is a JavaScript runtime built on Chrome's V8 engine that makes building network and server-side applications quick and easy. It is commonly used with AngularJS (Angular) for the front-end to create full-stack JavaScript (MEAN stack) applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Common uses of Node.js include building real-time applications, working with files and streams, and using modules to reuse and share code. MongoDB is often used as the database for MEAN stack applications and Mongoose provides an ORM for interacting with MongoDB from Node.js applications. Angular is a front-end web application framework that

1. NodeJS & AngularJS

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

3. NodeJS

4. What is NodeJS?
• Fast (built on Chrome's V8 JavaScript engine)
• FullStack JavaScript
• event-driven, non-blocking I/O
• Realtime Application

5. A quick look
var fs = require('fs');
fs.readFile('hello.txt', function(err, data){
console.log(data.toString());
});
console.log("hello world");

6. event-driven
readFile "hello world” data from file

7. Callback hell
promise, observable

8. Creating Module with
CommonJS
• require
• exports
• modules.export

9. example: exports
exports.run = function(){
console.log('print');
}
exports.walk = function(){
console.log('copy');
}
var dog = require("./dog");
dog.run();
dog.js app.js

10. example: modules.export
module.exports = function(){
console.log("export");
}
exports();
exports.js app.js

11. Module Type
• Core Module (Built-in Module) => fs , http
• File Module => exports.js
• Folder Module => folder has a package.json
• Third-party Module => npm

12. 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

13. Setting up the Project

14. https://nodejs.org/en/
Install NodeJS

15. https://drive.google.com/drive/folders/0B1nLyRIrgh3_dTh5ZFdsNVhHa0E
Seed Project

16. npm install
Install Dependencies

17. Understanding
structure

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

19. Working with
Request and Response

20. Request and Response
router.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);
});

21. 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>

22. 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

23. Data Format
• JSON
• Plain Text
• File
• URL
ref: https://expressjs.com/en/api.html#res

24. MongoDB

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

26. Stating Mongo Server & Mongo Shell

27. Mongoose
• ORM
• Schema
• Validation
ref: https://expressjs.com/en/api.html#res

28. Using Mongoose
• Install mongoose
• Connection URI
• Creating model
• Storing data
• Fetching data
ref: https://expressjs.com/en/api.html#res

29. Install mongoose
npm install mongoose —save
npm install mongoose-unique-validator —save
ref: https://expressjs.com/en/api.html#res

30. Connection URI
mongodb://username:password@hostname:port/database
ex. mongodb://localhost/my-project

31. AngularJS

32. What is AngularJS?
• Cross Platform ex. Progressive web apps
• Speed and Performance ex. Universal
• Productivity ex. Angular CLI
• Full Development Story ex. Testing, Animation

33. Single Page Application

34. TypeScript
• Types
• Classes
• Modules
• Decorators
• etc.
https://www.typescriptlang.org/

35. Why should I use
TypeScript?

36. [sudo] npm install typescript -g
Install TypeScript

37. Modules

38. Modules
• NgModule
• declarations
• exports
• imports
• providers
• bootstrap

39. Components

40. Components
• selector
• templateUrl
• providers

41. Staring an Angular

42. Interpolation
double-curly braces of interpolation, {{ and }}
Template expressions
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

43. Templates and Styles
• inline in the template HTML
• by setting styles or styleUrls metadata
• with CSS imports

44. Two-way data binding
<input [(ngModel)]="currentHero.firstName">

45. Creating Model

46. Multiple Components
reusing components

47. Property Binding
[property]="expression".
<img [src]="userImageUrl">

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

49. Data Binding
The binding punctuation: [], () or [()]

50. Built-in directives
• NgClass
• NgStyle
• NgIf
• NgSwitch
• NgFor

51. The asterisk (*)
* and <template>
example: Showing an array property with *ngFor
<h1 *ngFor="let student of students”> {{ student.id }} </h1>

52. Services

53. Creating a Services
@Injectable() decorator
https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

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

55. Getting message via a
Services

56. RouterModule
• RouterOutlet
• RouterLink
• RouterLinkActive
• Routes (a configuration)

57. Creating a Header

58. Setting up Routing
import { RouterModule, Routes } from '@angular/router';
<router-outlet></router-outlet>
<!-- Routed views go here -->
Configuration

59. Routing and Navigation
Router Links
<a routerLink=“/about">About Us</a>

60. 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);
}

61. 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);
}

62. Introduction to Angular Testing

63. Testing
• Jasmine
• Angular Testing Utilities
• Karma
• Protractor

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

65. Large Apps
/app
/admin
/vendor
/public
/shared
/auth
components
services
classes
interfaces
templates
directives