具有基本服务器文件问题的 Angular UI-Router
Posted
技术标签:
【中文标题】具有基本服务器文件问题的 Angular UI-Router【英文标题】：Anguarl UI-Router with basic server file issues 【发布时间】：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 或其他内容）。 【参考方案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，这将使你能够在你的状态中导航。
当然，在更复杂的结构中，我所说的完全错误。您可以使用更复杂的文件来延迟加载某些库，但我认为这不是您的首要任务。
我试图以最简单的方式解释它，希望它会有所帮助并祝你好运。
【讨论】：
以上是关于具有基本服务器文件问题的 Angular UI-Router的主要内容，如果未能解决你的问题，请参考以下文章
通过基本身份验证访问 REST 的 Angular2 抛出“预检响应具有无效的 HTTP 状态代码 401”
具有来自 Web 服务的动态元数据的 Angular 6 元服务
具有无限 rowModelType 问题的 AG Grid 26.0.0 Angular 12.2 服务器端分页