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>