새소식
반응형
JavaScript/AngularJS
nodejs(express 모듈)를 활용한 angularjs 구축 - 2
- -
반응형
5. 설치한 express 모듈을 사용하여 웹서버 구동
package.json 과 npm 명령어를 사용하여 다양한 모듈이 설치된 폴더 node_modules 가 존재하는 곳에 server.js를 생성한다.
- server.js 소스코드
var express = require('express'); //웹서버를 구동할 모듈인 express 모듈을 가져온다.
var path = require('path'); //경로에 사용될 path 모듈
var app = express(); // express 모듈 구동
app.use('/', express.static(path.join(__dirname, '/app')));
: / 인 루트경로로 들어올 경우 정적인 파일들이 존재하는 절대경로를 설정한다(해당경로/app 위치)
app.get('/', function(req, res){
res.render('/index.html');
}); // 루트 경로(/)로 get 요청이 올경우 응답을 /app 경로에 존재하는 index.html 파일을 렌더링 시킨다.
app.listen(3000, function(){
console.log('Node.js On');
}); // 3000포트로 웹서버를 구동시킨다
server.js
package.json 및 server.js가 존재하는곳에 app 이라는 폴더를 생성한다.
생성한 후 Node.js Command prompt 를 열어 server.js가 존재하는 폴더로 이동한 후 "npm start" 명령어를 사용하여 node_modules에 존재하는 필요한 모듈들을 /app 폴더에 복사한다.
6. app 폴더 안에 angularjs를 사용하기 위한 설정
- SPA(Single Page Application)를 설정하기 위한 angularjs 설정파일인 app.js, 메인 view인 index.html 생성
app/app.js
- 소스코드
angular.module('AngularTest', [ //angularjs 모듈 생성
'ui.router'
])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function($stateProvider, $locationProvider, $urlRouterProvider){
$locationProvider.hashPrefix('');
}]);
app/index.html
- 소스코드
<!DOCTYPE html>
<html ng-app="AngularTest"> <!-- app.js 모듈 -->
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
</head>
<body>
<ui-view></ui-view> //ui-router를 사용하기 위해 태그 생성, 이 부분에서 view 페이지들이 로드된다.
</body>
</html>
7. 화면에 보여질 view 생성
7-1. angulartest.js 생성
- 소스코드
angular.module('AngularjsCtrl', []) //angularjs 모듈 생성
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('ViewTest', {
url:'/angular', //url 주소
templateUrl:'view/angulartest.html', //해당 모듈의 view 파일 설정
controller:'angularCtrl' //컨트롤러
})
}])
.controller('angularCtrl', ['$scope', function($scope){
$scope.test = 'complete';
}])
angulartest.html 생성
- 소스코드
안녕하세요
Node.js, angularjs 테스트입니다.
{{test}}
7-2. 모듈을 관리하는 메인 app.js에 angulartest.js 모듈 추가
angular.module('AngularTest', [
'ui.router',
'AngularjsCtrl'
])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function($stateProvider, $locationProvider, $urlRouterProvider){
$locationProvider.hashPrefix('');
}]);
7-3. 메인 view 파일인 index.js에 js 파일 추가
<!DOCTYPE html>
<html ng-app="AngularTest"> <!-- app.js 모듈 -->
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script> //모듈을 관리하는 메인 app.js 추가
<script src="view/angulartest.js"></script> //7번에서 생성한 angulartest.js의 모듈 추가
</head>
<body>
<ui-view></ui-view> //ui-router를 사용하기 위해 태그 생성, 이 부분에서 view 페이지들이 로드된다.
</body>
</html>
8. 웹서버 접속
- localhost:3000/#/angular //#은 angularjs의 구분자 역할
완료!
반응형
'JavaScript > AngularJS' 카테고리의 다른 글
| Spring Boot와 Angulrjs(run 메소드를 이용한 로그인 설정 (0) | 2021.10.03 |
|---|---|
| http-proxy 모듈을 이용한 get, post 요청 proxy 설정 (0) | 2021.10.03 |
| nodejs(express 모듈)를 활용한 angularjs 구축 - 1 (0) | 2021.10.03 |
Contents
소중한 공감 감사합니다