Meanjs-quick-guide

MEAN.JS-概要

MEAN.jsとは何ですか？

*MEAN.js* という用語は、動的なWebサイトおよびWebアプリケーションの構築に使用されるフルスタックのJavaScriptオープンソースソリューションです。 MEANは、MEANスタックの主要コンポーネントである* *M* * ongoDB、* *E* * xpress、* *N* * ode.jsおよび* *A* * ngularJSを表す頭字語です。

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

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

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

歴史

MEAN名は、MongoDB開発者である_Valeri Karpov_によって作成されました。

MEAN.jsを使用する理由

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

さらに概念を説明する前に、_MEAN.JS_アプリケーションの基本的な構成要素を確認します。

MongoDBの概要

_MEAN_の頭字語では、 M はMongoDBを表します。これは、JSON形式でデータを保存するオープンソースのNoSQLデータベースです。 リレーショナルデータベースで使用するテーブルと行を使用する代わりに、ドキュメント指向のデータモデルを使用してデータを保存します。 クライアントとサーバー間でデータを簡単に渡すために、バイナリJSON（JavaScript Serialized Object Notation）形式でデータを保存します。 MongoDBは、コレクションとドキュメントの概念に基づいて機能します。 詳細については、このリンクhttps://www.finddevguides.com/mongodb/mongodb_overview[MongoDB]を参照してください。

Expressの概要

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

AngularJSの概要

_MEAN_の頭字語では、 A は_AngularJS_を表します。これはWebフロントエンドJavaScriptフレームワークです。 クリーンなModel View Controller（MVC）の方法で動的な単一ページアプリケーションを作成できます。 AngularJSは、各ブラウザーに適したJavaScriptコードを自動的に処理します。 詳細については、このリンクhttps://www.finddevguides.com/angularjs/angularjs_overview[AngularJS]を参照してください。

Node.jsの概要

_MEAN_の頭字語では、 N は_Node.js_を表します。これは、ビデオストリーミングサイト、単一ページアプリケーション、その他のWebアプリケーションなどのWebアプリケーションの開発に使用されるサーバー側プラットフォームです。 Node.jsを使用したWebアプリケーションの開発を大幅に簡素化するさまざまなJavaScriptモジュールの豊富なライブラリを提供します。 Google ChromeのV8 JavaScriptエンジン上に構築されているため、コード実行が非常に高速です。 詳細については、このリンクhttps://www.finddevguides.com/nodejs/nodejs_introduction[Node.js]を参照してください。

MEAN.JS-アーキテクチャ

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

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

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

平均建築

上の画像に示すように、クライアントのリクエストを処理するクライアントサイド言語としてAngularJSがあります。

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

MEAN.JS-MEANプロジェクトのセットアップ

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

前提条件

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

Node.jsのWebサイトhttps://nodejs.org/en/[Node.js]（Windowsユーザー向け）にアクセスして、Node.jsの最新バージョンをインストールできます。 Node.jsをダウンロードすると、npmがシステムに自動的にインストールされます。 Linuxユーザーは、https://github.com/nodesource/distributions/blob/master/README.md [link]を使用して、Nodeおよびnpmをインストールできます。

以下のコマンドを使用して、ノードと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 finddevguides!'));

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

次に、以下のコマンドでアプリケーションを実行します-

$ npm start

以下の画像に示すように、確認が得られます-

確認

Expressアプリケーションが実行されていることを通知します。 任意のブラウザーを開き、 http：//localhost：3000 を使用してアプリケーションにアクセスします。 Welcome to finddevguidesが表示されます！ 以下に示すテキスト-

ようこそfinddevguides

MEAN.JS-静的ルートノードエクスプレスの構築

この章では、 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 finddevguides!'));

//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

MEAN.JS-データモデルの構築

この章では、Node-expressアプリケーションでデータモデルを使用する方法を示します。

MongoDBは、JSON形式でデータを保存するオープンソースのNoSQLデータベースです。 リレーショナルデータベースで使用するテーブルと行を使用する代わりに、ドキュメント指向の_data model_を使用してデータを格納します。 この章では、Mongodbを使用してデータモデルを構築します。

データモデルは、ドキュメントに存在するデータとドキュメントに存在するデータを指定します。 MongoDBをインストールするには、https://docs.mongodb.com/manual/installation/[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: ''}
});

接続ファイルを作成するには、ファイルを作成してアプリケーションで使用します。 _config/db.js_に_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 finddevguides!'));

//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 と入力します。 あなたは、以下の画像に示すようにページを取得します-

接続ファイル学生

MEAN.JS-REST API

この章では、HTTPメソッドを使用して、REST APIを介してデータベースと対話するアプリケーションについて説明します。 _REST_という用語は、Webサービスと通信するように設計されたアーキテクチャスタイルであるREpresentational State Transferを表し、_API_はアプリケーションの相互作用を可能にするアプリケーションプログラムインターフェイスを表します。

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

HTTP Method	URL Path	Description
GET	/api/students	It is used to get all the students from collection Student.
POST	/api/students/send	It is used to create a student record in collection Student.
DELETE	/api/students/student_id	It is used to delete a student record from collection Student.

RESTful APIルート

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

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 method_を選択します。 次に、以下に示すように要求データを入力します-

投稿方法

名前データを_x-www-form-urlencoded_として送信していることに注意してください。 これにより、すべてのデータがクエリ文字列としてNodeサーバーに送信されます。

[送信]ボタンをクリックして、学生レコードを作成します。 以下に示すように成功メッセージが表示されます-

学生記録

GET

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

GETメソッド

DELETE

次に、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から削除するレコードです）。

_DELETE_メソッドを選択し、_Send_ボタンをクリックして、すべての生徒を取得します。

メソッドの削除

*_http：//localhost：3000/api/students/5d1492fa74f1771faa61146d_* に対してGET呼び出しを行うことにより、削除されたデータのMongoDBを確認できます。

MEAN.JS-アプリの角度コンポーネント

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

AngularJSを理解する

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

ページに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アプリケーションを使用するには、モジュールを定義する必要があります。 アプリケーションに関連するコンポーネント、ディレクティブ、サービスなどをグループ化できる場所です。 モジュール名は、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">

以下に示すように、Angularモジュール（myApp）にコントローラー（myController）を接続できます-

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

可読性、再利用性、およびテスト容易性のために、匿名関数の代わりに名前付き関数を使用することをお勧めします。 以下のコードでは、新しい名前付き関数「myController」を使用してコントローラーコードを保持しています-

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

コントローラの詳細については、https://www.finddevguides.com/angularjs/angularjs_scopes [link]を参照してください。

スコープの定義

スコープは、コントローラーをビューに接続し、モデルデータを含む特別なJavaScriptオブジェクトです。 コントローラでは、$ scopeオブジェクトを介してモデルデータにアクセスします。 コントローラー関数は、Angularによって作成された$ scopeパラメーターを取り、モデルに直接アクセスします。

以下のコードスニペットは、$ scopeパラメーターを受信するためにコントローラー関数を更新する方法を指定し、デフォルト値を設定します-

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

コントローラの詳細については、https://www.finddevguides.com/angularjs/angularjs_scopes [link]を参照してください。 次の章では、Angularを使用して単一ページアプリケーションの作成を開始します。

MEAN.JS-Angularを使用した単一ページの構築

MEANスタックでは、Angularは2番目のJavaScriptフレームワークとして知られ、クリーンなModel View Controller（MVC）の方法で単一ページアプリケーションを作成できます。

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

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

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

Node.jsバックエンドとAngularJSフロントエンドを持つシンプルなアプリケーションを構築しましょう。 私たちのAngularアプリケーションのために、私たちは望むでしょう-

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

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

アプリケーションには、ブートストラップやアンギュラーなどの特定のファイルが必要です。 バウアーにこれらのコンポーネントを取得するように指示します。

まず、お使いのマシンに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
      --homel
   --studentl
      -indexl
   -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/homel',
         controller: 'MainController'
      })
     //students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/studentl',
         controller: 'StudentController'
      });
   $locationProviderl5Mode(true);
}]);

コントローラとルートができたので、それらをすべて組み合わせて、これらのモジュールをメインの_public/js/app.js_に次のように挿入します-

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

ファイルを閲覧する

Angularはテンプレートファイルを使用します。テンプレートファイルは、indexlファイルの<div ng-view> </div>に挿入できます。 ng-viewディレクティブは、構成に基づいて対応するビュー（HTMLまたはng-templateビュー）を配置できるプレースホルダーを作成します。 角度ビューの詳細については、https://www.finddevguides.com/angularjs/angularjs_views [link]にアクセスしてください。

ルーティングの準備ができたら、小さいテンプレートファイルを作成し、_indexl_ファイルに挿入します。 _indexl_ファイルには、次のコードスニペットがあります-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>finddevguides 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 と入力します。 あなたは、以下の画像に示すようにページを取得します-

ホームページチュートリアル

_Students_リンクをクリックすると、次のような画面が表示されます-

学生セクション

Angularフロントエンドはテンプレートファイルを使用し、_indexl_ファイルの<div ng-view> </div>に挿入します。 ページを更新せずにこれを行います。

MEAN.JS-SPAの構築：次のレベル

前の章では、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
         -homel
         -studentl
      -indexl
   -.bowerrc
   -bower.json
   -package.json
   -server.js

このアプリケーションでは、ビュー（homel）を作成しました。このビューには、コレクションStudentのすべての学生がリストされ、新しい 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}!`));

フロントエンドルートの定義

_public/indexl_ファイルには、次のコードスニペットがあります-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>finddevguides 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 に移動すると、以下の画像に示すようなページが表示されます-

アプリケーションの実行ページ

テキストボックスにテキストを入力し、[追加]ボタンをクリックします。 レコードが追加され、次のように表示されます-

実行中のアプリケーション追加ボタン

チェックボックスをオンにすると、レコードを削除できます。