MEAN.JS - 使用 Angular 构建单页面

在 MEAN 堆栈中，Angular 被称为第二个 JavaScript 框架，它允许以干净的模型视图控制器 (MVC) 方式创建单页面应用程序。

AngularJS 作为前端框架使用以下内容 -

使用 Bower 安装文件和库
使用 Angular 应用程序结构的控制器和服务
创建不同的 HTML 页面
使用ngRoute模块处理 AngularJS 应用程序的路由和服务
使用 Bootstrap 使应用程序更具吸引力

设置我们的 Angular 应用程序

让我们构建一个具有 Node.js 后端和 AngularJS 前端的简单应用程序。对于我们的 Angular 应用程序，我们需要 -

两个不同的页面（主页、学生）
每个都有不同的角度控制器
切换页面时不刷新页面

Bower 和拉入组件

我们的应用程序需要某些文件，例如 bootstrap 和 Angular。我们将告诉 Bower 为我们获取这些组件。

首先，在您的计算机上安装 Bower，在命令终端上执行以下命令 -

npm install -g 鲍尔

这将安装 Bower 并使其可以在您的系统上全局访问。现在将文件 .bowerrc 和 Bower.json 放在根文件夹下。在我们的例子中是mean-demo。两个文件的内容如下 -

.bowerrc -这将告诉 Bower 在哪里放置我们的文件 -

{
   “目录”：“公共/库”
}

Bower.json - 这与 package.json 类似，会告诉 Bower 需要哪些包。

{
   “名称”：“角度”，
   “版本”：“1.0.0”，
   “依赖项”：{
      "bootstrap": "最新",
      “角度”：“最新”，
      “角度路线”：“最新”
   }
}

接下来，使用以下命令安装 Bower 组件。您可以看到 Bower 拉入了public/libs下的所有文件。

$ 凉亭安装

我们的目录结构如下 -

平均演示
   -应用程序
   -配置
   -节点模块
   -民众
      -js
         --控制器
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -库
   - 意见
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -服务器.js

角度控制器

我们的控制器（public/js/controllers/MainCtrl.js）如下 -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = '欢迎来到 Angular 应用程序教程！';
});

控制器 public/js/controllers/StudentCtrl.js 如下 -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = '欢迎来到学生版块！';
});

角度路线

我们的路由文件（public/js/appRoutes.js）如下 -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', 函数($routeProvider, $locationProvider) {
   $routeProvider
      // 主页
      。什么时候（'/'， {
         templateUrl: 'views/home.html',
         控制器：“主控制器”
      })
      // 将使用 StudentController 的学生页面
      .when('/学生', {
         templateUrl: 'views/student.html',
         控制器：'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">
   <头>
      <元字符集=“UTF-8”>
      <基本href =“/”>
      <title>教程点 Node 和 Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- 自定义样式 -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- 角度自定义 -->
      <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>
   </头>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div 类=“容器”>
      
         <!-- 标题 -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">教程</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">学生</a></li>
            </ul>
         </导航>
         <!-- 角度动态内容 -->
         <div ng-view></div>
      </div>
   </正文>
</html>

运行应用程序

执行

您可以在此链接中下载该应用程序的源代码。下载 zip 文件；将其提取到您的系统中。打开终端并运行以下命令来安装 npm 模块依赖项。

$ cd 平均演示
$ npm 安装

接下来运行以下命令 -

$ 节点开始

您将收到如下图所示的确认信息 -

现在，转到浏览器并输入http://localhost:3000。您将看到如下图所示的页面 -

单击学生链接，您将看到如下屏幕 -

我们的 Angular 前端将使用模板文件并将其注入到我们的index.html文件中的 <div ng-view></div> 中。它将在不刷新页面的情况下完成此操作。