MEAN.JS Angular

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

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

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

设置我们的 Angular 应用

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

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

弯曲和拉入组件

我们的应用程序需要某些文件，例如 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

角度控制器

我们的控制器（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 文件中的

中。 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>