MEAN.JS - 使用 Angular 構建單頁應用

在 MEAN 技術棧中，Angular 被稱為第二款 JavaScript 框架，它允許以簡潔的模型-檢視-控制器 (MVC) 方式建立單頁應用程式。

AngularJS 作為前端框架使用以下內容：

使用 Bower 安裝檔案和庫
使用控制器和服務構建 Angular 應用結構
建立不同的 HTML 頁面
使用 ngRoute 模組處理 AngularJS 應用程式的路由和服務
使用 Bootstrap 使應用程式更具吸引力

設定我們的 Angular 應用程式

讓我們構建一個簡單的應用程式，它具有 Node.js 後端和 AngularJS 前端。對於我們的 Angular 應用程式，我們需要：

兩個不同的頁面（首頁、學生）
每個頁面一個不同的 Angular 控制器
切換頁面時不重新整理頁面

Bower 和引入元件

我們的應用程式需要一些檔案，例如 bootstrap 和 angular。我們將告訴 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 元件。你可以看到 bower 將所有檔案拉取到 public/libs 下。

$ 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!';
});

Angular 路由

我們的路由檔案 (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 檢視）。有關 Angular 檢視的更多資訊，請訪問此連結。

當你準備好路由後，建立更小的模板檔案並將其注入到 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>