#ANGULAR CLI 설치
npm install -g @angular/cli
# NG 명령어로 앵귤러 프로젝트 폴더생성
ng new ngApp --routing
# 프로젝트 폴더로 가서 NG SERVER 명령어로 서버가동
cd ngApp
ng serve
# EXPRESS와 연동해주기 위해서 NG BUILD 명령어로 배포 준비
ng build (dist 폴더와 build된 파일들이 생성됨)
# Express 패키지와 미들웨어인 body-parser , db페키지를 다운로드 한다
npm install --save express body-parser mysql
#ngApp 폴더 안에 server.js 파일을 만들고 express 서버 소스 작성
server.js
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
//routes
var api = require('./server/routes/api');
var port = 3000;
var app = express();
//set static folder
app.use(express.static(path.join(__dirname,'dist')));
//view Engin
//app.set('view engine', 'ejs');
//app.engine('html',require('ejs').renderFile);
//body parser mw
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use('/api',api);
app.get('*',function(req,res){
res.sendFile(path.join(__dirname,'dist/index.html'));
});
//run server
app.listen(port, function(){
console.log("master kang!, server runing on location" + port);
});
#ngApp 폴더 안에 routes 폴더를 만들고 api.js 파일(라우터) 작성
api.js
var express = require('express');
var router = express.Router();
router.get('/', function(req,res){
res.send('api works')
});
module.exports = router;
#파일 경로
#ng build 로 dist 폴더를 만든후 node server.js 로 node 서버 가동
ng build
node server.js
#localhost:3000 으로 접속해서 확인
#참고 사이트
https://angular.io/guide/quickstart
출처: https://abc1211.tistory.com/296 [길위의 개발자][출처] abc1211.tistory.com/296
우분투 16.04 Mysql, Express, Angular& node js를 npm페키지로 초간단 간단셋팅
우분투 16.04 Mysql, Express, Angular& node js npm페키지로 초간단 셋팅 #ANGULAR CLI 설치 npm install -g @angular/cli # NG 명령어로 앵귤러 프로젝트 폴더생성 ng new ngApp --routing # 프로젝트 폴더로..
abc1211.tistory.com
'Language > Angular' 카테고리의 다른 글
How to create a Drag and Drop file directive in angular2 with angular-cli [Part 1] (0) | 2019.01.30 |
---|