Node.js
angular.js가있는 Node.js (express.js) 샘플 코드

소개

프로젝트 만들기.

우리는 콘솔에 다음과 같이 다시 실행합니다.

mkdir our_project
cd our_project

이제 우리는 코드가 생기는 곳에 있습니다. 프로젝트의 메인 아카이브를 생성하려면 다음을 수행하십시오.

좋습니다. 그렇지만 우리는 어떻게 표현 뼈대 프로젝트를 만드나요?

간단 해:

npm install -g express express-generator

Linux 배포판과 Mac은 root 사용자 만 액세스 할 수있는 nodejs 디렉토리에 설치되어 있기 때문에 sudo 를 사용하여 설치해야합니다. 모든 것이 잘 되었다면 드디어 익스프레스 앱 스켈레톤을 만들 수 있습니다.

express

이 명령은 익스프레스 예제 응용 프로그램을 폴더 내부에 생성합니다. 구조는 다음과 같습니다.

bin/
public/
routes/
views/
app.js
package.json

이제 우리가 npm 을 실행하면 http : // localhost : 3000으로 이동합니다 . 익스프레스 앱이 제대로 작동하고 있음을 알게 될 것입니다. 우리는 너무 어려움없이 익스프레스 앱을 만들었지 만 AngularJS와 어떻게 혼합 할 수 있습니까? .

어떻게 표현이 간단합니까?

Express 는 Nodej의 위에 구축 된 프레임 워크입니다. Express Site 에서 공식 문서를 볼 수 있습니다. 그러나 우리의 목적을 위해 우리는 입력 할 때 Express 가 책임이 있음을 알아야합니다. 예를 들어 http : // localhost : 3000 / home 에서 응용 프로그램의 홈 페이지를 렌더링합니다. 최근에 생성 된 앱에서 다음을 확인할 수 있습니다.

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

이 코드가 말하는 것은 사용자가 http : // localhost : 3000으로 갈 때 인덱스 뷰를 렌더링하고 title 속성과 Express라는 JSON 을 전달해야한다는 것입니다. 그러나 views 디렉토리를 확인하고 index.jade를 열면 다음과 같이 표시됩니다.

extends layout
block content
    h1= title
    p Welcome to #{title}

이는 또 다른 강력한 Express 기능인 템플릿 엔진으로 , 변수를 전달하거나 다른 템플릿을 상속하여 페이지의 컨텐츠를 렌더링 할 수있게하여 페이지가 더욱 컴팩트 해지고 다른 사람들이 더 잘 이해할 수있게합니다. 파일 확장자는 Jade 가 Pug 의 이름을 변경했다는 것을 아는 한 .jade입니다 . 기본적으로 동일한 템플릿 엔진이지만 일부 업데이트와 핵심 수정이 있습니다.

Pug 설치 및 Express 템플릿 엔진 업데이트.

Pug를 우리 프로젝트의 템플릿 엔진으로 사용하려면 다음을 실행해야한다.

npm install --save pug

그러면 Pug가 프로젝트의 종속물로 설치되어 package.json에 저장됩니다. 이 파일을 사용하려면 app.js 파일을 수정해야합니다.

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

보기 엔진을 pug로 바꾸면됩니다. 우리는 npm start로 프로젝트를 다시 실행할 수 있으며 모든 것이 잘 작동하는 것을 볼 수 있습니다.

Angular는 어떻게이 모든 것에 적합합니까?

AngularJS는 주로 SPA (Simple Page Application) 설치를 만드는 데 사용되는 Javascript MVW (Model-View-Whatever) 프레임 워크이며, AngularJS 웹 사이트 로 이동하여 v1.6.4 최신 버전을 다운로드 할 수 있습니다.

우리가 AngularJS를 다운로드 한 후에 파일을 우리 프로젝트의 public / javascript 폴더에 복사해야합니다. 약간의 설명이 있습니다.이 파일은 우리 사이트의 정적 자산, 이미지, CSS, javacript 파일 등을 제공하는 폴더입니다. 물론 이것은 app.js 파일을 통해 구성 할 수 있지만 간단하게 유지할 것입니다. 이제 AngularJS가 사는 javascripts 공용 폴더에서 ng-app.js 라는 파일 (응용 프로그램이 살 수있는 파일)을 만듭니다. AngularJS를 가져 오려면 다음 과 같이 views / layout.pug 의 내용을 수정해야합니다.

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

여기서 우리는 무엇을하고 있습니까? 음, 우리는 AngularJS 코어와 최근 만든 ng-app.js 파일을 포함하고 있습니다. 따라서 템플릿이 렌더링되면 AngularJS가 올라올 것이고, ng-app 지시어를 사용하게됩니다. 이것은 AngularJS는 이것이 애플리케이션 이름이며이를 준수해야합니다.
따라서 ng-app.js 의 내용은 다음과 같습니다.

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

여기서는 가장 기본적인 AngularJS 기능인 양방향 데이터 바인딩을 사용 하고 있습니다. 이렇게하면 뷰와 컨트롤러의 내용을 즉시 새로 고칠 수 있습니다. 이것은 매우 간단한 설명이지만 Google 또는 StackOverflow에서 조사하여 그것이 실제로 어떻게 작동하는지.

따라서 AngularJS 응용 프로그램의 기본 블록을 만들었지 만 할 일이 있습니다. 각도 응용 프로그램의 변경 사항을 보려면 index.pug 페이지를 업데이트해야합니다.

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

여기에 우리 컨트롤러의 AngularJS 범위에 정의 된 속성 이름에 입력을 바인딩하는 것입니다.

$scope.name = 'sigfried';

이것의 목적은 입력에서 텍스트를 변경할 때마다 위 단락이 {{name}}에서 내용을 업데이트 할 것입니다. 이것은 보간 이라고하며 또 다시 AngularJS 기능을 사용하여 템플릿에 내용을 렌더링합니다.

이제는 모든 것이 설정되었으며, 이제 npm start를 실행할 수 있습니다 . http : // localhost : 3000으로 이동하여 빠른 서비스를 제공하는 응용 프로그램과 응용 프로그램 프론트 엔드를 관리하는 AngularJS를 참조하십시오.