Meanjs-building-single-page-with-angular

提供：Dev Guides
移動先:案内、検索

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

「https://www.finddevguides.com/index.php?title=Meanjs-building-single-page-with-angular&oldid=32171」から取得
Powered by MediaWiki