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>に挿入します。ページを更新せずにこれを行います。

Meanjs-building-single-page-with-angular

目次