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
node myfirst.js