Angular Programming - hqzhang/cloudtestbed GitHub Wiki

#build an Angular 8 app

1.install node and ngl
  brew install node
  brew postinstall node
  npm install -g @angular/cli

2.create proj
  ng new angular-example
  routing Yes; CSS Yes

3.running proj
 cd angular-example
 ng serve 

4.Adding HttpClient in src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

5. create UI component
ng g component home
ng g component about

6. Adding Routing
///const routes: Routes = [];
//add
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

7. Adding Angular Material
  ng add @angular/material
  vim src/app/app.module.ts
  add 
  //add manual
import { MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatButtonModule,
  MatProgressSpinnerModule } from '@angular/material';
and into @NgModule

8. add restful api
  npm install --save json-server

#create file myfirst.js

var http = require('http');  //import http as http
var formidable = require('formidable'); //import formidable as formidable
var fs = require('fs');                    //import fs module as fs

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm(); // provide file choice
    form.parse(req, function (err, fields, files) {
      var oldpath = files.filetoupload.path;    //provide file path
      var newpath = '/Users/hongqizhang/' + files.filetoupload.name; //destination file
      fs.rename(oldpath, newpath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');  
        res.end();
      });
 });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});  //provide html to client
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(8088);      //listen port 8088

run the nodejs server

node myfirst.js
⚠️ **GitHub.com Fallback** ⚠️