使用 angular-ui-router 和 express/node，文件结构答案

【问题标题】：using angular-ui-router with express/node, file structure使用 angular-ui-router 和 express/node，文件结构
【发布时间】：2015-11-18 16:07:51
【问题描述】：

我正在关注this 教程，并且我有一个这样的应用程序结构。我试图只显示相关的部分，因为它有很多代码。

/app
    /views
        index.ejs
/config
    express.js
/public
    /external_libs
        angular.js
        angular-ui-router.js
    /js
        app.js
        controllers.js
    /partials
        home.html
server.js

在我的 express.js 中（相关位）

app.use(express.static('./public');

我能够设置我的角度控制器，所以我知道这个目录正在被点击。比如我的 index.ejs

<html ng-app="myapp">
    <head>
        <script src="external_libs/angular.js"></script>
        <script src="external_libs/angular-ui-router.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"</script>
    </head>
    <body ng-controller= "MainCtrl"> <!-- an alert in my controller fires, so I know the public directory is accessible, at least the js folder-->
        <div ui-view></div>
    </body>
</html>

在我的 app.js 中

var app = angular.module('myapp', ['ui.router']);
app.config([
    function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'partials/home.html'
            });
    }
]);

在 controllers.js 中

var app = angular.module('myapp', []);
app.controller('MainCtrl', [
    '$scope', function($scope) {
        alert("This alert is indeed alerted");
    }
]);

home.html

<h1> This is a test to see if the view on index.ejs is being populated </h1>

我已经为 app.js 中的“templateUrl”尝试了许多不同的组合，包括

"partials/home.html"
"/partials/home.html"
"../partials/home.html"

这些都不会导致 home.html 被放置在我的 index.ejs 页面上的 div ui-view 元素中。我意识到我发布的代码数量有限，但我能够点击我的控制器并看到一条警报消息这一事实让我相信我快到了。我正在使用服务器端路由来呈现初始 index.ejs，但除此之外，我还想处理客户端的事情。有谁知道如何让 angular-ui-router 使用此设置定位我的部分？

【问题讨论】：

如果你用template:'<div>test</div>'替换你的templateUrl？还查看请求（开发工具网络选项卡）可能会提示它正在尝试获取哪些文件。
用模板 '
test
' 替换并没有给我部分：/
你真的要加载yourdomain.com/#/home吗？
刚刚试了一下，没有成功。
你能分享更多你的代码吗（比如说小提琴）？

标签： angularjs node.js express angular-ui-router partial-views

【解决方案1】：

问题在于您的控制器声明。而不是引用模块，而是通过包含方括号来重新创建它（并覆盖现有模块）。

如果你重写你的控制器，它应该可以工作：

var app = angular.module('myapp');
app.controller('MainCtrl', [
  '$scope',
  function($scope) {
    alert("This alert is indeed alerted");
  }
]);

有关更多信息，请查看https://docs.angularjs.org/guide/module 上的“创建与检索”

【讨论】：