MEAN.JS-퀵 가이드

MEAN.js는 무엇입니까?

용어 MEAN.js동적 웹 사이트 및 웹 응용 프로그램을 구축하는 데 사용되는 풀 스택 JavaScript 오픈 소스 솔루션입니다. MEAN은MongoDB, Express, Node.js 및 AMEAN 스택의 핵심 구성 요소 인 ngularJS.

기본적으로 이러한 프레임 워크 (Mongo, Express Nodejs, AngularJS) 연결과 관련된 일반적인 문제를 해결하고, 일상적인 개발 요구를 지원하는 강력한 프레임 워크를 구축하고, 개발자가 인기있는 JavaScript 구성 요소로 작업하면서 더 나은 방법을 사용할 수 있도록 개발되었습니다.

스택은 백엔드에서 데이터베이스와 웹 서버를 사용하는 것을 의미하며, 중간에는 프론트 엔드에서 사용자의 상호 작용 및 애플리케이션에 대한 논리와 제어가 있습니다.

• MongoDB − 데이터베이스 시스템

• Express − 백엔드 웹 프레임 워크

• Node.js − 웹 서버 플랫폼

• AngularJS − 프런트 엔드 프레임 워크

역사

MEAN 이름은 MongoDB 개발자 Valeri Karpov 가 만들었습니다 .

MEAN.js를 사용하는 이유는 무엇입니까?

• 무료로 사용할 수있는 오픈 소스 프레임 워크입니다.

• 전체 애플리케이션에서 독립형 솔루션으로 사용할 수 있습니다.

• 낮은 개발 비용을 제공하고 개발자의 유연성과 효율성을 높입니다.

• MVC 패턴을 지원하고 데이터 전송을 위해 JSON을 사용합니다.

• 개발 속도를 높이기 위해 추가 프레임 워크, 라이브러리 및 재사용 가능한 모듈을 제공합니다.

추가 개념을 시작하기 전에 MEAN.JS 애플리케이션 의 기본 구성 요소를 살펴 보겠습니다 .

MongoDB 소개

에 MEAN 약어,MMongoDB의 약자로 JSON 형식으로 데이터를 저장하는 오픈 소스 NoSQL 데이터베이스입니다. 관계형 데이터베이스에서 사용하는 테이블과 행을 사용하는 대신 문서 지향 데이터 모델을 사용하여 데이터를 저장합니다. 이진 JSON (JavaScript Serialized Object Notation) 형식으로 데이터를 저장하여 클라이언트와 서버간에 데이터를 쉽게 전달합니다. MongoDB는 수집 및 문서의 개념으로 작동합니다. 자세한 내용은이 링크 MongoDB를 참조하십시오 .

Express 소개

에 MEAN 약어,EExpress를 의미하며 , 이는 개발 프로세스를 더 쉽게 만드는 데 사용되는 유연한 Node.js 웹 애플리케이션 프레임 워크입니다. 쉽게 구성하고 사용자 정의 할 수 있으므로 안전하고 모듈 식이며 빠른 애플리케이션을 구축 할 수 있습니다. HTTP 메소드 및 URL에 따라 애플리케이션의 경로를 지정합니다. MongoDB, MySQL, Redis와 같은 데이터베이스에 쉽게 연결할 수 있습니다. 자세한 내용은이 링크 Express를 참조하십시오 .

AngularJS 소개

에 MEAN 약어,A웹 프런트 엔드 JavaScript 프레임 워크 인 AngularJS를 의미합니다 . 깨끗한 MVC (Model View Controller) 방식으로 동적 인 단일 페이지 응용 프로그램을 만들 수 있습니다. AngularJS는 각 브라우저에 적합한 JavaScript 코드를 자동으로 처리합니다. 자세한 내용은 AngularJS 링크를 참조하십시오 .

Node.js 소개

에 MEAN 약어,N비디오 스트리밍 사이트, 단일 페이지 애플리케이션 및 기타 웹 애플리케이션과 같은 웹 애플리케이션 개발에 사용되는 서버 측 플랫폼 인 Node.js를 의미 합니다. Node.js를 사용하여 웹 애플리케이션의 개발을 크게 단순화하는 다양한 JavaScript 모듈의 풍부한 라이브러리를 제공합니다. Google Chrome의 V8 JavaScript 엔진을 기반으로하므로 코드 실행이 매우 빠릅니다. 자세한 정보는이 링크 Node.js를 참조하십시오 .

MEAN은 동적 웹 사이트 및 웹 애플리케이션을 구축하는 데 사용되는 오픈 소스 JavaScript 프레임 워크입니다. 여기에는 응용 프로그램을 빌드하기위한 다음 네 가지 구성 요소가 포함됩니다.

• MongoDB − 유연하고 JSON과 유사한 문서에 데이터를 저장하는 문서 데이터베이스입니다.

• Express − Nodejs 용 웹 애플리케이션 프레임 워크입니다.

• Node.js− 웹 서버 플랫폼입니다. 웹 애플리케이션 개발을 단순화하는 다양한 JavaScript 모듈의 풍부한 라이브러리를 제공합니다.

• AngularJS− 웹 프론트 엔드 JavaScript 프레임 워크입니다. 깨끗한 MVC (Model View Controller) 방식으로 동적 인 단일 페이지 응용 프로그램을 만들 수 있습니다.

이에 대한 자세한 내용은 개요 장을 참조하십시오 . 아래 다이어그램은 MEAN 스택 애플리케이션의 아키텍처를 보여줍니다.

위의 이미지에서 볼 수 있듯이 클라이언트의 요청을 처리하는 클라이언트 측 언어로 AngularJS가 있습니다.

• 사용자가 요청할 때마다 AngularJS에서 먼저 처리합니다.

• 다음으로 요청은 두 번째 단계로 들어가서 Node.js를 서버 측 언어로, ExpressJS 를 백엔드 웹 프레임 워크로 사용합니다.

• Node.js 는 클라이언트 / 서버 요청을 처리하고 ExpressJS 는 데이터베이스에 요청을합니다.

• 마지막 단계에서 MongoDB (데이터베이스)는 데이터를 검색하고 응답을 ExpressJS로 보냅니다.

• ExpressJS는 Nodejs와 AngularJS에 대한 응답을 반환 한 다음 사용자에게 응답을 표시합니다.

이 장에는 MEAN 응용 프로그램 생성 및 설정이 포함됩니다. 우리는 NodeJS와 ExpressJS를 함께 사용하여 프로젝트를 만들고 있습니다.

전제 조건

MEAN 애플리케이션 생성을 시작하기 전에 필요한 필수 구성 요소를 설치해야합니다.

당신은에서 Node.js를 웹 사이트에 방문하여 Node.js를 최신 버전을 설치할 수 있습니다 Node.js를을 (이것은 윈도우 사용자를위한 것입니다). Node.js를 다운로드하면 npm이 시스템에 자동으로 설치됩니다. Linux 사용자는이 링크 를 사용하여 Node 및 npm을 설치할 수 있습니다 .

아래 명령을 사용하여 Node 및 npm의 버전을 확인하십시오.

$ node --version
$ npm --version

명령은 아래 이미지와 같이 버전을 표시합니다.

Express 프로젝트 생성

아래와 같이 mkdir 명령을 사용하여 프로젝트 디렉토리를 만듭니다.

$ mkdir mean-demo //this is name of repository

위의 디렉토리는 노드 응용 프로그램의 루트입니다. 이제 package.json 파일을 생성하려면 아래 명령을 실행하십시오.

$ cd webapp-demo
$ npm init

init 명령은 package.json 파일 생성 과정을 안내합니다.

이 유틸리티는 package.json 파일을 만드는 과정을 안내합니다. 가장 일반적인 항목 만 다루며 합리적인 기본값을 추측합니다.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

예를 클릭하면 아래와 같은 폴더 구조가 생성됩니다.

-mean-demo
   -package.json

package.json의 파일은 다음과 같은 정보를해야합니다 -

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

이제 Express 프로젝트를 현재 폴더에 구성하고 프레임 워크에 대한 구성 옵션을 설치하려면 아래 명령을 사용하십시오.

npm install express --save

프로젝트 디렉토리로 이동하여 package.json 파일을 열면 아래 정보가 표시됩니다.

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

여기에서 명시 적 종속성이 파일에 추가 된 것을 볼 수 있습니다. 이제 프로젝트 구조는 다음과 같습니다.

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

응용 프로그램 실행

새로 생성 된 프로젝트 디렉토리로 이동하여 아래 내용으로 server.js 파일을 생성합니다.

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

다음으로 아래 명령으로 응용 프로그램을 실행하십시오-

$ npm start

아래 이미지와 같이 확인을 받게됩니다.

Express 응용 프로그램이 실행 중임을 알려줍니다. 브라우저를 열고 다음을 사용하여 애플리케이션에 액세스합니다.http://localhost:3000. Tutorialspoint에 오신 것을 환영합니다! 아래에 표시된 텍스트-

이 장에서는 Node 과 Express.

이전 장에서 노드 익스프레스 애플리케이션을 만들었습니다. mean-demo 라는 프로젝트 디렉토리로 이동합니다 . 아래 명령을 사용하여 디렉토리로 이동하십시오-

$ cd mean-demo

경로 설정

경로는 들어오는 요청의 URL을 사용하여 매핑 서비스로 사용됩니다. 열기server.js 파일을 작성하고 아래와 같이 라우팅을 설정하십시오-

// modules =================================================
const express = require('express');
const app = express();

// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

응용 프로그램 실행

다음으로 아래 명령으로 응용 프로그램을 실행하십시오-

$ npm start

아래 이미지와 같이 확인을 받게됩니다.

이제 브라우저로 이동하여 http://localhost:3000/myroute. 아래 이미지와 같이 페이지가 표시됩니다.

이 장에서는 Node-express 애플리케이션에서 데이터 모델을 사용하는 방법을 보여줍니다.

MongoDB는 JSON 형식으로 데이터를 저장하는 오픈 소스 NoSQL 데이터베이스입니다. 관계형 데이터베이스에서 사용하는 테이블과 행을 사용하는 대신 문서 지향 데이터 모델 을 사용하여 데이터를 저장합니다. 이 장에서는 Mongodb를 사용하여 데이터 모델을 구축합니다.

데이터 모델은 문서에있는 데이터와 문서에 있어야하는 데이터를 지정합니다. MongoDB를 설치 하려면 공식 MongoDB 설치를 참조하십시오 .

이전 챕터 코드를 사용합니다. 이 링크 에서 소스 코드를 다운로드 할 수 있습니다 . zip 파일을 다운로드하십시오. 시스템에서 추출하십시오. 터미널을 열고 아래 명령을 실행하여 npm 모듈 종속성을 설치하십시오.

$ cd mean-demo
$ npm install

응용 프로그램에 Mongoose 추가

Mongoose는 MongoDB를 강력하게 만들어 데이터의 환경과 구조를 지정하는 데이터 모델링 라이브러리입니다. 명령 줄을 통해 Mongoose를 npm 모듈로 설치할 수 있습니다. 루트 폴더로 이동하여 아래 명령을 실행하십시오-

$ npm install --save mongoose

위의 명령은 새 패키지를 다운로드 하여 node_modules 폴더에 설치 합니다. --save 플래그는이 패키지를 추가합니다 package.json의 파일.

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1",
      "mongoose": "^5.5.13"
   }
}

연결 파일 설정

데이터 모델 작업을 위해 app / models 폴더를 사용 합니다. 다음 과 같이 students.js 모델을 만들어 보겠습니다.

var mongoose = require('mongoose');

// define our students model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('Student', {
   name : {type : String, default: ''}
});

파일을 생성하고 애플리케이션에서 사용하여 연결 파일을 설정할 수 있습니다. 라는 파일 만들기 db.js 에서 설정 / db.js을 . 파일 내용은 다음과 같습니다.

module.exports = {
   url : 'mongodb://localhost:27017/test'
}

여기 test 는 데이터베이스 이름입니다.

여기에서는 MongoDB를 로컬에 설치했다고 가정합니다. 일단 설치되면 Mongo를 시작하고 이름 테스트로 데이터베이스를 만듭니다. 이 db에는 students라는 이름의 컬렉션이 있습니다. 이 컬렉션에 데이터를 삽입하십시오. 우리의 경우 db.students.insertOne ({name : 'Manisha', place : 'Pune', country : 'India'});을 사용하여 레코드를 삽입했습니다.

db.js 파일을 응용 프로그램 (예 : server.js) 으로 가져옵니다 . 파일의 내용은 다음과 같습니다.

// modules =================================================
const express = require('express');
const app = express();
var mongoose = require('mongoose');
// set our port
const port = 3000;
// configuration ===========================================

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// frontend routes =========================================================
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

//defining route
app.get('/tproute', function (req, res) {
   res.send('This is routing for the application developed using Node and Express...');
});

// sample api route
// grab the student model we just created
var Student = require('./app/models/student');
app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

다음으로 아래 명령으로 응용 프로그램을 실행하십시오-

$ npm start

아래 이미지와 같이 확인을 받게됩니다.

이제 브라우저로 이동하여 http://localhost:3000/api/students. 아래 이미지와 같이 페이지가 표시됩니다.

이 장에서는 HTTP 메서드를 사용하여 데이터베이스와 REST API를 통해 상호 작용하는 애플리케이션을 살펴 봅니다. REST 라는 용어 는 웹 서비스와 통신하도록 설계된 아키텍처 스타일 인 REpresentational State Transfer의 약자 이고 API 는 서로 상호 작용하는 애플리케이션을 허용하는 Application Program Interface를 나타냅니다.

먼저 RESTful API를 만들어 모든 항목을 가져오고 항목을 만들고 항목을 삭제합니다. 각 항목에 대해 _id 는 MongoDB에 의해 자동으로 생성됩니다. 아래 표는 애플리케이션이 API에서 데이터를 요청하는 방법을 설명합니다.

HTTP 방식	URL 경로	기술
가져 오기	/api/students	컬렉션 Student에서 모든 학생을 가져 오는 데 사용됩니다.
우편	/api/students/send	Student 컬렉션에서 학생 레코드를 만드는 데 사용됩니다.
지우다	/api/students/student_id	학생 컬렉션에서 학생 기록을 삭제하는 데 사용됩니다.

RESTful API 경로

먼저 RESTful API 경로의 Post 메서드에 대해 설명합니다.

우편

먼저 REST API를 통해 Student 컬렉션에 레코드를 생성 해 보겠습니다. 이 특별한 경우에 대한 코드는 server.js 파일 에서 찾을 수 있습니다 . 참고로 여기에 코드의 일부를 붙여 넣습니다.

app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         res.json({ message: 'student created!' });
   });
});

실행

이 링크 에서이 애플리케이션의 소스 코드를 다운로드 할 수 있습니다 . zip 파일을 다운로드하십시오. 시스템에서 추출하십시오. 터미널을 열고 아래 명령을 실행하여 npm 모듈 종속성을 설치하십시오.

$ cd mean-demon-consuming_rest_api
$ npm install

요청을 파싱하려면 본문 파서 패키지가 필요합니다. 따라서 아래 명령을 실행하여 애플리케이션에 포함하십시오.

npm install --save body-parser

첨부 된 소스 코드에는 이미이 종속성이 있으므로 위의 명령을 실행할 필요가 없으며 단지 정보 용입니다.

응용 프로그램을 실행하려면 새로 만든 프로젝트 디렉토리로 이동하고 아래에 주어진 명령으로 실행하십시오.

npm start

아래 이미지와 같이 확인을 받게됩니다.

API 호출을 테스트하는 많은 도구가 있습니다. 여기서는 Postman REST Client 라는 Chrome 용 사용자 친화적 확장 프로그램 중 하나를 사용하고 있습니다 .

Postman REST 클라이언트를 열고 URL을 다음과 같이 입력하십시오. http://localhost:3000/api/students/send, POST 방법을 선택하십시오 . 다음으로 아래와 같이 요청 데이터를 입력합니다.

이름 데이터를 x-www-form-urlencoded 로 전송하고 있습니다. 그러면 모든 데이터가 쿼리 문자열로 노드 서버에 전송됩니다.

보내기 버튼을 클릭 하여 학생 기록을 만듭니다. 아래와 같이 성공 메시지가 나타납니다.

가져 오기

다음으로 mongodb에서 모든 학생 기록을 가져옵니다. 다음 경로를 작성해야합니다. server.js 파일 에서 전체 코드를 찾을 수 있습니다 .

app.get('/api/students', function(req, res) {
   // use mongoose to get all students in the database
   Student.find(function(err, students) {
      // if there is an error retrieving, send the error.
      // nothing after res.send(err) will execute
      if (err)
         res.send(err);
      res.json(students); // return all students in JSON format
   });
});

다음으로 Postman REST 클라이언트를 열고 URL을 다음과 같이 입력하십시오.

http://localhost:3000/api/students, GET 방법을 선택하고 보내기 버튼을 클릭하여 모든 학생을 가져옵니다.

지우다

다음으로 REST API 호출을 통해 mongo 컬렉션에서 레코드를 삭제하는 방법을 살펴 보겠습니다.

다음 경로를 작성해야합니다. server.js 파일 에서 전체 코드를 찾을 수 있습니다 .

app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
   }, function(err, bear) {
      if (err)
         res.send(err);
      res.json({ message: 'Successfully deleted' });
   });
});

다음으로 Postman REST 클라이언트를 열고 URL을 다음과 같이 입력하십시오.

http://localhost:3000/api/students/5d1492fa74f1771faa61146d

(여기서 5d1492fa74f1771faa61146d는 Student 컬렉션에서 삭제할 레코드입니다).

삭제 방법을 선택하고 보내기 버튼을 클릭하여 모든 학생을 가져옵니다.

GET 호출을 수행하여 MongoDB에서 삭제 된 데이터를 확인할 수 있습니다. http://localhost:3000/api/students/5d1492fa74f1771faa61146d.

이 장에서는 응용 프로그램에 각도 구성 요소를 추가합니다. MVC (Model View Controller) 패턴을 사용하여 동적 단일 페이지 애플리케이션을 만들 수있는 웹 프런트 엔드 JavaScript 프레임 워크입니다. MEAN.JS 아키텍처 장에서 AngularJS가 클라이언트 요청을 처리하고 데이터베이스에서 결과를 얻는 방법을 보았습니다.

AngularJS 알아보기

AngularJS는 HTML을 템플릿 언어로 사용하고 HTML 구문을 확장하여 애플리케이션 구성 요소를 명확하게 표현하는 오픈 소스 웹 애플리케이션 프레임 워크입니다. AngularJS는 데이터 바인딩, 모델, 뷰, 컨트롤러, 서비스 등과 같은 몇 가지 기본 기능을 제공합니다. AngularJS에 대한 자세한 내용은이 링크를 참조하십시오 .

페이지에 Angular를 추가하여 페이지를 Angular 응용 프로그램으로 만들 수 있습니다. 외부 JavaScript 파일을 사용하여 추가 할 수 있으며 다운로드하거나 CDN 버전에서 직접 참조 할 수 있습니다.

파일을 다운로드하고 다음과 같이 페이지에 추가하여 로컬로 참조했다고 가정합니다.

<script src="angular.min.js"></script>

이제 Angular에이 페이지가 Angular 애플리케이션임을 알려줘야합니다. 따라서 아래와 같이 <html> 또는 <body> 태그에 ng-app 속성을 추가하여이를 수행 할 수 있습니다.

<html ng-app>
or
<body ng-app>

ng-app은 페이지의 모든 요소에 추가 할 수 있지만 Angular가 페이지 내 어디에서나 작동 할 수 있도록 종종 <html> 또는 <body> 태그에 삽입됩니다.

모듈로서의 Angular 애플리케이션

Angular 애플리케이션으로 작업하려면 모듈을 정의해야합니다. 애플리케이션과 관련된 구성 요소, 지시문, 서비스 등을 그룹화 할 수있는 곳입니다. 모듈 이름은 HTML의 ng-app 속성에서 참조됩니다. 예를 들어, Angular 애플리케이션 모듈 이름을 myApp으로 말하고 아래와 같이 <html> 태그에 지정할 수 있습니다.

<html ng-app="myApp">

외부 JavaScript 파일에서 아래 문을 사용하여 응용 프로그램에 대한 정의를 만들 수 있습니다.

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

컨트롤러 정의

AngularJS 애플리케이션은 컨트롤러를 사용하여 애플리케이션의 데이터 흐름을 제어합니다. 컨트롤러는 ng-controller 지시문 을 사용하여 정의됩니다 .

예를 들어 사용하려는 컨트롤러의 이름과 함께 ng-controller 지시문을 사용하여 컨트롤러를 본체에 연결합니다. 아래 줄에서는 컨트롤러의 이름을 "myController"로 사용하고 있습니다.

<body ng-controller="myController">

아래 그림과 같이 컨트롤러 (myController)를 Angular 모듈 (myApp)에 연결할 수 있습니다.

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

가독성, 재사용 성 및 테스트 가능성을 위해 익명 함수 대신 명명 된 함수를 사용하는 것이 좋습니다. 아래 코드에서 우리는 컨트롤러 코드를 유지하기 위해 새로운 이름의 함수 "myController"를 사용하고 있습니다.

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

컨트롤러에 대한 자세한 내용은이 링크를 참조하십시오 .

범위 정의

범위는 컨트롤러를 뷰와 연결하고 모델 데이터를 포함하는 특수 JavaScript 개체입니다. 컨트롤러에서 모델 데이터는 $ scope 개체를 통해 액세스됩니다. 컨트롤러 함수는 Angular에 의해 생성 된 $ scope 매개 변수를 취하며 모델에 직접 액세스 할 수 있습니다.

아래 코드 스 니펫은 $ scope 매개 변수를 수신하고 기본값을 설정하도록 컨트롤러 함수를 업데이트하는 방법을 지정합니다.

var myController = function($scope) {
   $scope.message = "Hello World...";
};

컨트롤러에 대한 자세한 내용은이 링크를 참조하십시오 . 다음 장에서는 Angular를 사용하여 단일 페이지 응용 프로그램 만들기를 시작합니다.

MEAN 스택에서 Angular는 두 번째 JavaScript 프레임 워크로 알려져 있으며,이를 통해 깨끗한 MVC (Model View Controller) 방식으로 단일 페이지 애플리케이션을 만들 수 있습니다.

프론트 엔드 프레임 워크로서 AngularJS는 다음을 사용합니다.

• Bower를 사용하여 파일 및 라이브러리 설치

• Angular 애플리케이션 구조에 컨트롤러 및 서비스 사용

• 다른 HTML 페이지를 만듭니다.

• ngRoute 모듈을 사용 하여 AngularJS 애플리케이션에 대한 라우팅 및 서비스 처리

• Bootstrap을 사용하여 매력적인 애플리케이션 만들기

Angular 애플리케이션 설정

Node.js 백엔드와 AngularJS 프런트 엔드가있는 간단한 애플리케이션을 빌드 해 보겠습니다. Angular 애플리케이션의 경우 다음을 원할 것입니다.

• 두 개의 다른 페이지 (홈, 학생)

• 각기 다른 각도 컨트롤러

• 페이지 전환시 페이지 새로 고침 없음

Bower 및 구성 요소 당기기

부트 스트랩 및 앵귤러와 같은 애플리케이션을위한 특정 파일이 필요합니다. 우리는 bower에게 해당 구성 요소를 가져 오도록 지시합니다.

먼저 명령 터미널에서 아래 명령을 실행하여 컴퓨터에 bower를 설치하십시오.

npm install -g bower

이렇게하면 bower가 설치되고 시스템에서 전역 적으로 액세스 할 수 있습니다. 이제 .bowerrc 및 bower.json 파일을 루트 폴더 아래에 배치하십시오. 우리의 경우에는mean-demo. 두 파일의 내용은 다음과 같습니다.

.bowerrc - 이것은 Bower에게 파일을 저장할 위치를 알려줍니다.

{
   "directory": "public/libs"
}

bower.json -이것은 package.json과 유사하며 Bower에게 필요한 패키지를 알려줍니다.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

다음으로 아래 명령을 사용하여 Bower 구성 요소를 설치합니다. public / libs 아래의 모든 파일에서 bower pull을 볼 수 있습니다 .

$ bower install

우리의 디렉토리 구조는 다음과 같습니다.

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

각도 컨트롤러

우리의 컨트롤러 (public / js / controllers / MainCtrl.js)는 다음과 같습니다.

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

컨트롤러 public / js / controllers / StudentCtrl.js는 다음과 같습니다-

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

각도 루트

경로 파일 (public / js / appRoutes.js)은 다음과 같습니다.

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

이제 컨트롤러와 라우트가 생겼으니 , 모두 결합하고 다음과 같이이 모듈을 기본 public / js / app.js 에 삽입합니다.

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

파일보기

Angular는 index.html 파일의 <div ng-view> </ div>에 삽입 할 수있는 템플릿 파일을 사용합니다. ng-view 지시문은 구성에 따라 해당보기 (HTML 또는 ng-template보기)를 배치 할 수있는 자리 표시자를 만듭니다. 각도보기에 대한 자세한 내용은이 링크를 참조하십시오 .

라우팅이 준비되면 더 작은 템플릿 파일을 만들고 index.html 파일에 삽입합니다 . 있는 index.html 파일은 코드 다음해야합니다 -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

응용 프로그램 실행

실행

이 링크 에서이 애플리케이션의 소스 코드를 다운로드 할 수 있습니다 . zip 파일을 다운로드하십시오. 시스템에서 추출하십시오. 터미널을 열고 아래 명령을 실행하여 npm 모듈 종속성을 설치하십시오.

$ cd mean-demo
$ npm install

다음으로 아래 명령을 실행하십시오-

$ node start

아래 이미지와 같이 확인을 받게됩니다.

이제 브라우저로 이동하여 http://localhost:3000. 아래 이미지와 같이 페이지가 표시됩니다.

학생 링크를 클릭 하면 아래와 같은 화면이 나타납니다.

Angular 프런트 엔드는 템플릿 파일을 사용하여 index.html 파일 의 <div ng-view> </ div>에 삽입 합니다. 페이지 새로 고침없이이 작업을 수행합니다.

이전 장에서 Angularjs를 사용하여 단일 페이지 meanjs 애플리케이션을 만드는 것을 보았습니다. 이 장에서는 Angular 애플리케이션이 API를 사용하여 Mongodb에서 데이터를 가져 오는 방법을 살펴 보겠습니다.

이 링크 에서이 애플리케이션의 소스 코드를 다운로드 할 수 있습니다 . zip 파일을 다운로드하십시오. 시스템에서 추출하십시오.

소스 코드의 디렉토리 구조는 다음과 같습니다.

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -home.html
         -student.html
      -index.html
   -.bowerrc
   -bower.json
   -package.json
   -server.js

이 응용 프로그램에서는 Student 컬렉션의 모든 학생을 나열하는 뷰 (home.html)를 만들었습니다. student기록하고 학생 기록을 삭제할 수 있습니다. 이러한 모든 작업은 REST API 호출을 통해 수행됩니다.

터미널을 열고 아래 명령을 실행하여 npm 모듈 종속성을 설치하십시오.

$ npm install

다음으로 아래 명령을 사용하여 Bower 구성 요소를 설치합니다. public / libs 아래의 모든 파일에서 bower pull을 볼 수 있습니다.

$ bower install

애플리케이션의 노드 구성은 server.js 파일에 저장됩니다. 이것은 노드 앱의 기본 파일이며 전체 애플리케이션을 구성합니다.

// modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
// set our port
const port = 3000;
// configuration ===========================================
// configure body parser
app.use(bodyParser.json()); // parse application/json

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public'));

// config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url); //Mongoose connection created

// grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
      // if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students); // return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student(); // create a new instance of the student model
   student.name = req.body.name; // set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
// startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

프런트 엔드 경로 정의

공공 / index.html을 파일 코드 다음해야합니다 -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

API 호출을하고 API 요청을 실행하는 서비스를 작성했습니다. 우리의 서비스 인 StudentService 는 아래와 같습니다.

angular.module('StudentService', [])
// super simple service
// each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

컨트롤러 (MainCtrl.js) 코드는 다음과 같습니다.

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
   // CREATE 
   // when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
      // validate the formData to make sure that something is there
      // if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
         // call the create function from our service (returns a promise object)
         Student.create($scope.formData)
         // if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
   // DELETE
   ==================================================================
   // delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
      // if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

응용 프로그램 실행

프로젝트 디렉토리로 이동하여 아래에 주어진 명령을 실행하십시오-

$ npm start

이제 다음으로 이동 http://localhost:3000 그러면 아래 이미지와 같이 페이지가 표시됩니다.

텍스트 상자에 텍스트를 입력하고 Add단추. 레코드가 추가되고 다음과 같이 표시됩니다.

확인란을 선택하여 레코드를 삭제할 수 있습니다.