Angularjs 带有基本服务器文件问题的Anguarl UI路由器

我正在一个“简单”的网站上学习一些技能。我已经一年多没有使用平均堆栈了，而且我似乎对节点/表达式部分以及角度框架有点生疏了。我被告知尝试UI路由器，因为它将有助于实现我项目的主要目标，即能够为大约15个URL重复使用产品“模板”，因为我的页面将填充来自JSON文件的属性值，该文件包含产品信息，如名称、描述、图像等

我只使用nodemon提供我的server.js文件，但当我转到localhost:9000时，dev工具中的source选项卡不会显示完整的文件树。我做错了什么

以下是我的设置：

节点/快车 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

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)
}]);`

html（包含内部带有特定URL视图的我的导航和页脚）

index.html（加载主URL www.myapp.com中的内容）

所有的东西

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

所有的东西

---

我对Grunt不太熟悉，无法创建一个构建过程，所以我目前有

nodemon server.js

running&service。现在，当我转到localhost:9000时，它只加载index.html的内容，而不加载shell.html中的所有脚本/css/dependencies

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

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

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文件。太好了

现在，让我们来看看yOut.xx.html文件：

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

所有的东西

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

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

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

在这里，shell.html似乎是您的“真实”html文件，它调用依赖项和ui路由器，使您能够在您的状态中导航

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

---

我试图用最简单的方式解释它，希望它能有所帮助，祝你好运。首先，index.html应该是服务器在未指定页面时加载的“默认”页面，所以给你的某个视图命名不是个好主意。相反，shell.html的内容应该是index.html中的内容，视图应该是其他内容（main.html、home.html或其他内容）。

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

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

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

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