Meanjs-quick-guide
MEAN.JS-概要
MEAN.jsとは何ですか?
基本的に、これらのフレームワーク(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のバージョンを確認します-
コマンドは、以下の画像に示すようにバージョンを表示します-
Expressプロジェクトの作成
以下に示すようにmkdirコマンドを使用してプロジェクトディレクトリを作成します-
上記のディレクトリは、ノードアプリケーションのルートです。 今、package.jsonファイルを作成するには、以下のコマンドを実行します-
initコマンドは、package.jsonファイルの作成手順を示します-
このユーティリティは、package.jsonファイルの作成手順を示します。 最も一般的な項目のみを扱い、適切なデフォルトを推測しようとします。
はいをクリックすると、以下のようなフォルダ構造が生成されます-
_package.json_ファイルには次の情報があります-
今すぐExpressプロジェクトを現在のフォルダに設定し、フレームワークの設定オプションをインストールするには、以下のコマンドを使用します-
プロジェクトディレクトリに移動し、package.jsonファイルを開きます。以下の情報が表示されます-
ここで、明示的な依存関係がファイルに追加されていることがわかります。 さて、プロジェクトの構造は以下の通りです-
実行中のアプリケーション
新しく作成したプロジェクトディレクトリに移動し、以下の内容のserver.jsファイルを作成します。
次に、以下のコマンドでアプリケーションを実行します-
以下の画像に示すように、確認が得られます-
Expressアプリケーションが実行されていることを通知します。 任意のブラウザーを開き、 http://localhost:3000 を使用してアプリケーションにアクセスします。 Welcome to finddevguidesが表示されます! 以下に示すテキスト-
MEAN.JS-静的ルートノードエクスプレスの構築
この章では、 Node および Express を使用したアプリケーションのルートの構築について説明します。
前の章では、node-expressアプリケーションを作成しました。 _mean-demo_というプロジェクトディレクトリに移動します。 以下のコマンドを使用してディレクトリに移動します-
ルートを設定する
ルートは、着信要求のURLを使用して、マッピングサービスとして使用されます。 server.js ファイルを開き、以下に示すようにルーティングを設定します-
実行中のアプリケーション
次に、以下のコマンドでアプリケーションを実行します-
以下の画像に示すように、確認が得られます-
ここで、ブラウザに移動して http://localhost:3000/myroute と入力します。 あなたは、以下の画像に示すようにページを取得します-
MEAN.JS-データモデルの構築
この章では、Node-expressアプリケーションでデータモデルを使用する方法を示します。
MongoDBは、JSON形式でデータを保存するオープンソースのNoSQLデータベースです。 リレーショナルデータベースで使用するテーブルと行を使用する代わりに、ドキュメント指向の_data model_を使用してデータを格納します。 この章では、Mongodbを使用してデータモデルを構築します。
データモデルは、ドキュメントに存在するデータとドキュメントに存在するデータを指定します。 MongoDBをインストールするには、https://docs.mongodb.com/manual/installation/[MongoDBの公式インストール]を参照してください。
前の章のコードを使用します。 次のリンクからソースコードをダウンロードできます:[リンク]。 zipファイルをダウンロードします。システムでそれを抽出します。 ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。
Mongooseをアプリケーションに追加する
Mongooseは、MongoDBを強力にすることでデータの環境と構造を指定するデータモデリングライブラリです。 コマンドラインを使用して、Mongooseをnpmモジュールとしてインストールできます。 ルートフォルダに移動し、以下のコマンドを実行します-
上記のコマンドは、新しいパッケージをダウンロードし、_node_modules_フォルダーにインストールします。 _-- save_フラグは、このパッケージを_package.json_ファイルに追加します。
接続ファイルのセットアップ
データモデルを操作するには、_app/models_フォルダーを使用します。 以下のようにモデル_students.js_を作成しましょう-
接続ファイルを作成するには、ファイルを作成してアプリケーションで使用します。 _config/db.js_に_db.js_というファイルを作成します。 ファイルの内容は次のとおりです-
ここで、_test_はデータベース名です。
ここでは、MongoDBがローカルにインストールされていると想定しています。 インストールしたら、Mongoを起動し、名前テストでデータベースを作成します。 このデータベースには、学生という名前のコレクションがあります。 このコレクションにいくつかのデータを挿入します。 この場合、db.students.insertOne(\ {name: 'Manisha'、place: 'Pune'、country: 'India'});を使用してレコードを挿入しました。
_db.js_ファイルをアプリケーション、つまり_server.js_に取り込みます。 ファイルの内容は以下のとおりです-
次に、以下のコマンドでアプリケーションを実行します-
以下の画像に示すように、確認が得られます-
ここで、ブラウザに移動して 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_ファイルにあります。 参考のために、コードの一部をここに貼り付けます-
実行
このアプリケーションのソースコードは、次のリンクからダウンロードできます:[リンク]。 zipファイルをダウンロードします。システムでそれを抽出します。 ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。
リクエストを解析するには、ボディパーサーパッケージが必要です。 したがって、以下のコマンドを実行して、アプリケーションに含めます。
添付のソースコードには既にこの依存関係があります。したがって、上記のコマンドを実行する必要はありません。これは単なる情報です。
アプリケーションを実行するには、新しく作成したプロジェクトディレクトリに移動し、以下のコマンドで実行します-
以下の画像に示すように、確認が得られます-
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_ファイルにあります。
次に、Postman RESTクライアントを開き、URLを次のように入力します
DELETE
次に、REST api呼び出しを介してmongoコレクションからレコードを削除する方法を見てみましょう。
次のルートを書く必要があります。 完全なコードは_server.js_ファイルにあります。
次に、Postman RESTクライアントを開き、URLを次のように入力します
(ここで、5d1492fa74f1771faa61146dは、コレクションStudentから削除するレコードです)。
_DELETE_メソッドを選択し、_Send_ボタンをクリックして、すべての生徒を取得します。
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ファイルを使用するだけで追加できます。
次のようにページに追加することで、ファイルをダウンロードしてローカルで参照したことを考慮してください-
次に、このページがAngularアプリケーションであることをAngularに伝える必要があります。 したがって、以下に示すように、属性、ng-appを<html>または<body>タグに追加することでこれを行うことができます-
ng-appはページ上の任意の要素に追加できますが、Angularがページ内のどこでも機能できるように、多くの場合<html>または<body>タグに配置されます。
モジュールとしての角度アプリケーション
Angularアプリケーションを使用するには、モジュールを定義する必要があります。 アプリケーションに関連するコンポーネント、ディレクティブ、サービスなどをグループ化できる場所です。 モジュール名は、HTMLのng-app属性によって参照されます。 たとえば、Angularアプリケーションモジュール名をmyAppと言い、以下に示すように<html>タグで指定できます-
外部JavaScriptファイルで以下のステートメントを使用して、アプリケーションの定義を作成できます-
コントローラーの定義
AngularJSアプリケーションは、アプリケーション内のデータの流れを制御するためにコントローラーに依存しています。 コントローラーは、_ng-controller_ディレクティブを使用して定義されます。
たとえば、ng-controllerディレクティブと使用するコントローラーの名前を使用して、コントローラーをボディにアタッチします。 以下の行では、コントローラーの名前を「myController」として使用しています。
以下に示すように、Angularモジュール(myApp)にコントローラー(myController)を接続できます-
可読性、再利用性、およびテスト容易性のために、匿名関数の代わりに名前付き関数を使用することをお勧めします。 以下のコードでは、新しい名前付き関数「myController」を使用してコントローラーコードを保持しています-
コントローラの詳細については、https://www.finddevguides.com/angularjs/angularjs_scopes [link]を参照してください。
スコープの定義
スコープは、コントローラーをビューに接続し、モデルデータを含む特別なJavaScriptオブジェクトです。 コントローラでは、$ scopeオブジェクトを介してモデルデータにアクセスします。 コントローラー関数は、Angularによって作成された$ scopeパラメーターを取り、モデルに直接アクセスします。
以下のコードスニペットは、$ scopeパラメーターを受信するためにコントローラー関数を更新する方法を指定し、デフォルト値を設定します-
コントローラの詳細については、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をインストールして、コマンドターミナルで以下のコマンドを実行します-
これにより、bowerがインストールされ、システム上でグローバルにアクセス可能になります。 ここで、ファイル.bowerrcおよびbower.jsonをルートフォルダーの下に配置します。 この例では、 mean-demo です。 両方のファイルの内容は以下のとおりです-
- .bowerrc-*これは、ファイルを配置する場所をBowerに指示します-
次に、以下のコマンドを使用してBowerコンポーネントをインストールします。 _public/libs_の下にあるすべてのファイルで、bower pullを確認できます。
私たちのディレクトリ構造は次のようになります-
角度コントローラー
私たちのコントローラ(public/js/controllers/MainCtrl.js)は次のとおりです-
コントローラーpublic/js/controllers/StudentCtrl.jsは次のとおりです-
角ルート
ルートファイル(public/js/appRoutes.js)は次のとおりです-
コントローラとルートができたので、それらをすべて組み合わせて、これらのモジュールをメインの_public/js/app.js_に次のように挿入します-
ファイルを閲覧する
Angularはテンプレートファイルを使用します。テンプレートファイルは、indexlファイルの<div ng-view> </div>に挿入できます。 ng-viewディレクティブは、構成に基づいて対応するビュー(HTMLまたはng-templateビュー)を配置できるプレースホルダーを作成します。 角度ビューの詳細については、https://www.finddevguides.com/angularjs/angularjs_views [link]にアクセスしてください。
ルーティングの準備ができたら、小さいテンプレートファイルを作成し、_indexl_ファイルに挿入します。 _indexl_ファイルには、次のコードスニペットがあります-
実行中のアプリケーション
実行
このアプリケーションのソースコードは、次のリンクからダウンロードできます:[リンク]。 zipファイルをダウンロードします。システムでそれを抽出します。 ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。
次に、以下のコマンドを実行します-
以下の画像に示すように、確認が得られます-
ここで、ブラウザに移動して http://localhost:3000 と入力します。 あなたは、以下の画像に示すようにページを取得します-
_Students_リンクをクリックすると、次のような画面が表示されます-
Angularフロントエンドはテンプレートファイルを使用し、_indexl_ファイルの<div ng-view> </div>に挿入します。 ページを更新せずにこれを行います。
MEAN.JS-SPAの構築:次のレベル
前の章では、Angularjsを使用した単一ページのmeanjsアプリケーションの作成を見てきました。 この章では、AngularアプリケーションがAPIを使用してMongodbからデータを取得する方法を見てみましょう。
このアプリケーションのソースコードは、次のリンクからダウンロードできます:[リンク]。 zipファイルをダウンロードします。システムでそれを抽出します。
私たちのソースコードのディレクトリ構造は次のとおりです-
このアプリケーションでは、ビュー(homel)を作成しました。このビューには、コレクションStudentのすべての学生がリストされ、新しい student レコードを作成したり、学生レコードを削除したりできます。 これらの操作はすべて、REST API呼び出しを介して実行されます。
ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。
次に、以下のコマンドを使用してBowerコンポーネントをインストールします。 public/libsの下のすべてのファイルで、bower pullを確認できます。
アプリケーションのノード構成は、server.jsファイルに保存されます。 これはノードアプリのメインファイルであり、アプリケーション全体を構成します。
フロントエンドルートの定義
_public/indexl_ファイルには、次のコードスニペットがあります-
API呼び出しを行い、APIリクエストを実行するサービスを作成しました。 私たちのサービス、_StudentService_は以下のように見えます-
私たちのコントローラ(MainCtrl.js)コードは以下のとおりです-
実行中のアプリケーション
プロジェクトディレクトリに移動し、以下のコマンドを実行します-
ここで http://localhost:3000 に移動すると、以下の画像に示すようなページが表示されます-
テキストボックスにテキストを入力し、[追加]ボタンをクリックします。 レコードが追加され、次のように表示されます-
チェックボックスをオンにすると、レコードを削除できます。