Setting up an Angular 4 MEAN Stack (Tutorial)

Transcription

1 Setting up an Angular 4 MEAN Stack (Tutorial) MEAN4 Stack, MongoDB, Express.js, Angular4, Node.js Installed Node.js Angular4 Express.js MongoDB Setup setup MongoDB locally api.js Once start MongoDB (mongod.exe) open another command prompt and connect to it through the shell by running mongo.exe Inside the shell create DB insert names into DB verified DB by accessing it by directly visiting the API endpoint URL Setup Angular to access data data.service.ts app.module.ts app.component.ts app.component.html ng build Angular 1

2 Testing run node server 2

3 localhost:3000 Supporting Files changed, added 3 Karma.conf.js // Karma configuration file, see link for more information // module.exports = function (config) { config.set({ basepath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma') ], client:{ clearcontext: false // leave Jasmine Spec Runner output visible in browser, coverageistanbulreporter: {

4 reports: [ 'html', 'lcovonly' ], fixwebpacksourcepaths: true, angularcli: { environment: 'dev', reporters: ['progress', 'kjhtml'] port: 9876, colors: true, loglevel: config.log_info, autowatch: true, browsers: ['Chrome'], singlerun: false ; server.js const express = require('express'); const bodyparser = require('body-parser'); const path = require('path'); const http = require('http'); const app = express(); // API file for interacting with MongoDB const api = require('./server/routes/api'); // Parsers app.use(bodyparser.json()); app.use(bodyparser.urlencoded({ extended: false)); // Angular DIST output folder app.use(express.static(path.join( dirname, 'dist'))); // API location app.use('/api', api); // Send all other requests to the Angular app app.get('*', (req, res) => { res.sendfile(path.join( dirname, 'dist/index.html')); //Set Port const port = process.env.port '3000'; app.set('port', port); const server = http.createserver(app); server.listen(port, () => console.log(`running on localhost:${port`)); 4

5 mongod.cfg systemlog: destination: file path: c:\data\log\mongod.log storage: dbpath: c:\data\db api.js const express = require('express'); const router = express.router(); const MongoClient = require('mongodb').mongoclient; const ObjectID = require('mongodb').objectid; // Connect const connection = (closure) => { return MongoClient.connect('mongodb://localhost:27017/mean', (err, db) => { if (err) return console.log(err); ; closure(db); // Error handling const senderror = (err, res) => { response.status = 501; response.message = typeof err == 'object'? err.message : err; res.status(501).json(response); ; // Response handling let response = { status: 200, data: [], message: null ; // Get users router.get('/users', (req, res) => { connection((db) => { db.collection('users').find().toarray().then((users) => { response.data = users; res.json(response); ) 5

6 .catch((err) => { senderror(err, res); module.exports = router;: data.service.ts import { Injectable from '@angular/core'; import { Http, Headers, RequestOptions from '@angular/http'; import export class DataService { result:any; constructor(private _http: Http) { getusers() { return this._http.get("/api/users").map(result => this.result = result.json().data); 6 app.module.ts import { BrowserModule from '@angular/platform-browser'; import { NgModule from '@angular/core'; import { AppComponent from './app.component'; // Import the Http Module and our Data Service import { HttpModule from '@angular/http'; import { DataService from declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule // <-Add HttpModule ], providers: [DataService], // <-Add DataService bootstrap: [AppComponent]

7 ) export class AppModule { app.component.ts import { Component from '@angular/core'; // Import the DataService import { DataService from selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'] ) export class AppComponent { // Define a users property to hold our user data users: Array<any>; // Create an instance of the DataService through dependency injection constructor(private _dataservice: DataService) { // Access the Data Service's getusers() method we defined this._dataservice.getusers().subscribe(res => this.users = res); app.component.html <div style="text-align:center"> <h1> MEAN Stack, MongoDB, Express.js, Angular4, Node.js <br> Mongo.exe connects thru this shell to Mongod.exe (MongoDB) </h1> </div> <ul> <li *ngfor="let user of users">{{ user.name </li> </ul> 7