具有基本服务器文件问题的 Angular UI-Router答案

【问题标题】：Anguarl UI-Router with basic server file issues具有基本服务器文件问题的 Angular UI-Router
【发布时间】：2017-06-23 22:57:50
【问题描述】：

我正在开发一个“简单”的网站来帮助提高一些技能。我已经有一年多没有使用 MEAN 堆栈了，我似乎对 Node/Express 部分与 Angular 框架的结合有点生疏了。我被告知要试用 UI-Router，因为它有助于我的项目的主要目标是能够为大约 15 个 URL 重用产品“模板”，因为我的页面将填充来自 JSON 的属性值包含产品信息的文件，例如名称、描述、图像等。

我只使用 nodemon 来提供我的 server.js 文件，但是当我转到 localhost:9000 时，dev-tools 中的源选项卡没有显示完整的文件树。我做错了什么？

这是我的设置：

节点/快递 server.js

// set up 
var express         = require('express');
var app             = express();
var port            = process.env.PORT || 9000;
var apiRoutes       = require('./app/routes.js');
app.use(express.static(__dirname + '/public/'));
app.use('/node_modules', express.static('/node_modules'));
// routes 
app.use('/', apiRoutes);
// launch 
app.listen(port);

apiRoutes.js

var apiRouter = require('express').Router();
var express = require('express');
apiRouter.get('/', function (req, res, next){
  res.sendFile('index.html', {root: './public/html'})
});
// Exports
module.exports = apiRouter;

角度 app.js

angular.module(‘myApp’,['ui.router','ngResource']);

app_routes.js

angular.module(‘myApp’)
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/');

$stateProvider
  .state('home', {
    url : '/',
    templateUrl : '/index.html',
    controller  : 'controller_index'
  })
  .state('product', {
    url : '/:id',
    templateUrl : '/template_product.html',
    controller  : 'controller_prods'
  });
  $locationProvider.html5Mode(true)
}]);`

shell.html（包含我的导航和页脚以及内部特定的 URL 视图）

<html ng-app=“myApp”>
<body ng-controller="controller_shell">
  <Nav goes here>
  </nav>
    <ui-view></ui-view>
</body>
<footer>
</footer>

index.html（在主 URL www.myapp.com 上加载内容）

<main>
  <div> all the stuff </div>
</main>

template_product.html（动态加载shell里面的内容）

<main>
  <div> all the stuff </div>
</main>

我对 Grunt 不够熟悉，无法进行构建过程，所以我目前有 nodemon server.js 正在运行和服务。现在，当我转到 localhost:9000 时，它只加载 index.html 的内容，但不会从 shell.html 加载所有脚本/css/依赖项

【问题讨论】：

首先，index.html 应该是服务器在未指定页面时加载的“默认”页面，因此为您的视图命名不是一个好主意。相反，shell.html 的内容应该是 index.html 中的内容，而视图应该是其他内容（main.html、home.html 或其他内容）。

标签： angularjs node.js express

【解决方案1】：

让我们看看你的服务器文件：

您在端口 9000 上启动服务器实例，这是第一点。

之后，您告诉服务器对于任何以“/”开头的路由，它都应该使用路由器 apiRoutes。

app.use('/', apiRoutes);
//Think of this line of code like defining a middleware which will intercept all request starting with '/'

因此，当您访问 localhost:9000 时，您将被重定向到此路由器。

我们可以在这里看到：

apiRouter.get('/', function (req, res, next){
  res.sendFile('index.html', {root: './public/html'})
});

对于请求'/'，它将发送文件index.html。太好了！

现在，让我们看看你的 index.html 文件：

<main>
  <div> all the stuff </div>
</main>

它只是一个模板，而不是你需要的真正的html页面。

AngularJS 在单页应用程序 MVC 中，因此，您需要做的是：

拥有一个包含所有依赖项和内容等的“真实”html 页面。此页面正在调用您的 ui-router。
具有根据 ui-router 状态呈现的小型模板 html 文件。

这里的 shell.html 似乎是你的“真正的”html 文件，它调用依赖项和 ui-router，这将使你能够在你的状态中导航。

当然，在更复杂的结构中，我所说的完全错误。您可以使用更复杂的文件来延迟加载某些库，但我认为这不是您的首要任务。

我试图以最简单的方式解释它，希望它会有所帮助并祝你好运。

【讨论】：