Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js

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