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を使用して単一ページアプリケーションの作成を開始します。

Meanjs-angular-components-in-app

目次

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

AngularJSを理解する

モジュールとしての角度アプリケーション

コントローラーの定義

スコープの定義