MEAN.JS-クイックガイド

MEAN.jsとは何ですか？

用語 MEAN.jsはフルスタックのJavaScriptオープンソースソリューションであり、動的なWebサイトやWebアプリケーションの構築に使用されます。MEANは、の略語です。MongoDB、 Express、 Node.jsと AMEANスタックの主要コンポーネントであるngularJS。

これは基本的に、これらのフレームワーク（Mongo、Express Nodejs、AngularJS）の接続に関する一般的な問題を解決し、日々の開発ニーズをサポートする堅牢なフレームワークを構築し、開発者が人気のあるJavaScriptコンポーネントを操作しながらより良いプラクティスを使用できるようにするために開発されました。

スタックとは、バックエンドでデータベースとWebサーバーを使用することを意味します。中央には、フロントエンドでのユーザーのアプリケーションと対話のためのロジックと制御があります。

MongoDB −データベースシステム
Express −バックエンドWebフレームワーク
Node.js −Webサーバープラットフォーム
AngularJS −フロントエンドフレームワーク

歴史

MEAN名は、MongoDB開発者のValeriKarpovによって造られました。

MEAN.jsを使用する理由

これは、無料で使用できるオープンソースフレームワークです。
アプリケーション全体でスタンドアロンソリューションとして使用できます。
開発コストが低くなり、開発者の柔軟性と効率が向上します。
MVCパターンをサポートし、データの転送にJSONを使用します。
追加のフレームワーク、ライブラリ、および再利用可能なモジュールを提供して、開発速度を向上させます。

さらなる概念を始める前に、MEAN.JSアプリケーションの基本的な構成要素を見ていきます。

MongoDBの紹介

ではMEAN頭字語、MMongoDBの略で、データをJSON形式で保存するオープンソースのNoSQLデータベースです。リレーショナルデータベースで使用するようなテーブルと行を使用する代わりに、ドキュメント指向のデータモデルを使用してデータを格納します。データをバイナリJSON（JavaScript Serialized Object Notation）形式で保存し、クライアントとサーバー間でデータを簡単に受け渡します。MongoDBは、コレクションとドキュメントの概念に取り組んでいます。詳細については、このリンクMongoDBを参照してください。

Expressの概要

ではMEAN頭字語、EExpressの略で、開発プロセスを容易にするために使用される柔軟なNode.jsWebアプリケーションフレームワークです。構成とカスタマイズが簡単で、安全でモジュール式の高速なアプリケーションを構築できます。HTTPメソッドとURLに応じてアプリケーションのルートを指定します。MongoDB、MySQL、Redisなどのデータベースに簡単に接続できます。詳細については、このリンクExpressを参照してください。

AngularJSの紹介

ではMEAN頭字語、AAngularJSの略で、WebフロントエンドJavaScriptフレームワークです。これにより、クリーンなModel View Controller（MVC）の方法で動的なシングルページアプリケーションを作成できます。AngularJSは、各ブラウザーに適したJavaScriptコードを自動的に処理します。詳細については、このリンクAngularJSを参照してください。

Node.jsの紹介

ではMEAN頭字語、NNode.jsの略で、ビデオストリーミングサイト、シングルページアプリケーション、その他のWebアプリケーションなどのWebアプリケーションの開発に使用されるサーバー側プラットフォームです。さまざまなJavaScriptモジュールの豊富なライブラリを提供し、Node.jsを使用したWebアプリケーションの開発を大幅に簡素化します。GoogleChromeのV8JavaScriptエンジン上に構築されているため、コードの実行が非常に高速です。詳細については、このリンクNode.jsを参照してください。

MEANはオープンソースのJavaScriptフレームワークであり、動的なWebサイトやWebアプリケーションを構築するために使用されます。これには、アプリケーションを構築するための次の4つのビルディングブロックが含まれます。

MongoDB −データを柔軟なJSONのようなドキュメントに格納するドキュメントデータベースです。
Express −Nodejs用のWebアプリケーションフレームワークです。
Node.js−Webサーバープラットフォームです。Webアプリケーションの開発を簡素化するさまざまなJavaScriptモジュールの豊富なライブラリを提供します。
AngularJS−これはWebフロントエンドJavaScriptフレームワークです。これにより、クリーンなModel View Controller（MVC）の方法で動的なシングルページアプリケーションを作成できます。

これらの詳細については、概要の章を参照してください。次の図は、MEANスタックアプリケーションのアーキテクチャを示しています。

上の画像に示されているように、クライアントの要求を処理するクライアント側の言語としてAngularJSがあります。

ユーザーがリクエストを行うたびに、最初にAngularJSによって処理されます。
次に、リクエストは第2段階に入ります。ここでは、サーバーサイド言語としてNode.jsがあり、バックエンドWebフレームワークとしてExpressJSがあります。
Node.jsはクライアント/サーバー要求を処理し、ExpressJSはデータベースに要求を行います。
最後の段階で、MongoDB（データベース）はデータを取得し、ExpressJSに応答を送信します。
ExpressJSは応答をNodejsに返し、次にAngularJSに返し、ユーザーに応答を表示します。

この章には、MEANアプリケーションの作成と設定が含まれています。NodeJSとExpressJSを一緒に使用してプロジェクトを作成しています。

前提条件

MEANアプリケーションの作成を開始する前に、必要な前提条件をインストールする必要があります。

あなたはでNode.jsのウェブサイトを訪問してのNode.jsの最新バージョンをインストールすることができますNode.jsの（これはWindowsユーザーのためです）。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。チュートリアルポイントへようこそ！以下に示すテキスト-

この章では、アプリケーションのルートの構築について説明します。 Node そして Express。

前の章では、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は、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内のconfig / db.jsを。ファイルの内容は以下のとおりです。

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

ここで、testはデータベース名です。

ここでは、MongoDBがローカルにインストールされていることを前提としています。インストールしたら、Mongoを起動し、名前テストでデータベースを作成します。このデータベースには、学生という名前のコレクションがあります。このコレクションにいくつかのデータを挿入します。この例では、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メソッドを使用してRESTAPIを介してデータベースとアプリケーションが相互作用することを確認します。RESTという用語はREpresentationalState Transferの略で、Webサービスと通信するように設計されたアーキテクチャスタイルであり、APIはアプリケーションの相互作用を可能にするApplication ProgramInterfaceの略です。

まず、RESTful APIを作成して、すべてのアイテムを取得し、アイテムを作成して、アイテムを削除します。アイテムごとに、_idはMongoDBによって自動的に生成されます。次の表は、アプリケーションがAPIからデータを要求する方法を示しています-

HTTPメソッド	URLパス	説明
取得する	/api/students	コレクションStudentからすべての学生を取得するために使用されます。
役職	/api/students/send	コレクションStudentに学生レコードを作成するために使用されます。
削除	/api/students/student_id	コレクションStudentから学生レコードを削除するために使用されます。

RESTfulAPIルート

最初に、RESTfulAPIルートのPostメソッドについて説明します。

役職

まず、RESTAPIを介してコレクション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 RESTClientと呼ばれるChromeのユーザーフレンドリーな拡張機能の1つを使用しています。

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メソッドを選択し、[送信]ボタンをクリックして、すべての生徒を取得します。

削除

次に、RESTapi呼び出しを介して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から削除するレコードです）。

DELETEメソッドを選択し、[送信]ボタンをクリックして、すべての生徒を取得します。

GET呼び出しを行うことで、削除されたデータについてMongoDBを確認できます。 http://localhost:3000/api/students/5d1492fa74f1771faa61146d。

この章では、アプリケーションに角度コンポーネントを追加します。これはWebフロントエンドJavaScriptフレームワークであり、Model View Controller（MVC）パターンを使用して動的な単一ページアプリケーションを作成できます。MEAN.JSアーキテクチャの章では、AngularJSがクライアントリクエストを処理し、データベースから結果を取得する方法を説明しました。

AngularJSを知る

AngularJSは、HTMLをテンプレート言語として使用し、HTMLの構文を拡張して、アプリケーションコンポーネントを明確に表現するオープンソースのWebアプリケーションフレームワークです。AngularJSは、データバインディング、モデル、ビュー、コントローラー、サービスなどのいくつかの基本機能を提供します。AngularJSの詳細については、このリンクを参照してください。

ページにAngularを追加することで、ページをAngularアプリケーションにすることができます。ダウンロードするか、CDNバージョンで直接参照できる外部JavaScriptファイルを使用するだけで追加できます。

次のようにページに追加して、ファイルをダウンロードし、ローカルで参照したとします。

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

ここで、このページがAngularアプリケーションであることをAngularに伝える必要があります。したがって、以下に示すように、属性ng-appを<html>または<body>タグに追加することでこれを行うことができます-

<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は2番目のJavaScriptフレームワークとして知られており、クリーンなModel View Controller（MVC）の方法でシングルページアプリケーションを作成できます。

フロントエンドフレームワークとしてのAngularJSは、次のものを使用します-

Bowerを使用してファイルとライブラリをインストールします
Angularアプリケーション構造にコントローラーとサービスを使用します
さまざまなHTMLページを作成します
ngRouteモジュールを使用してAngularJSアプリケーションのルーティングとサービスを処理します
Bootstrapを使用してアプリケーションを魅力的にする

Angularアプリケーションのセットアップ

Node.jsバックエンドとAngularJSフロントエンドを持つ単純なアプリケーションを構築しましょう。Angularアプリケーションの場合、次のようになります。

2つの異なるページ（自宅、学生）
それぞれに異なる角度コントローラー
ページを切り替えるときにページが更新されない

バウアーとコンポーネントの引き込み

アプリケーションには、ブートストラップや角度などの特定のファイルが必要になります。これらのコンポーネントを取得するように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がプルするのを見ることができます。

$ 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

Angularコントローラー

私たちのコントローラー（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>

実行中のアプリケーション

実行

$ 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記録し、学生の記録を削除できるようにします。これらの操作はすべて、RESTAPI呼び出しを介して実行されます。

ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。

$ npm install

次に、以下のコマンドを使用してBowerコンポーネントをインストールします。public / libsの下にあるすべてのファイルをbowerがプルするのを見ることができます。

$ 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
      });
   };
}]);