MEAN.JS-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>