AngularJS $routeProvider 模板未显示在 ng-view 中答案

【问题标题】：AngularJS $routeProvider templates not showing up in ng-viewAngularJS $routeProvider 模板未显示在 ng-view 中
【发布时间】：2016-04-05 04:09:07
【问题描述】：

这是我的文件夹结构：

public
--js
----controllers
------aController.js
------bController.js
----app.js
----router.js
--styles
----a.css
----b.css
--html
----a.html
----b.html
--index.html

在我的 index.html 文件中，我有：

<body ng-app="myApp">
    <div ng-view></div>
</body>

在我的 router.js 文件中，我有：

myApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider
    .when('/a', {
        controller: 'aController',
        templateURL: 'html/a.html',
        css: 'styles/a.css'
    })
    .when('/b', {
        controller: 'bController',
        templateUrl: 'html/b.html',
        css: 'styles/b.css'
    })
    .otherwise({
        redirectTo: '/a'
    });
}]);

在 a.html 和 b.html 中，我只有一个带有字母的 div。即：

<p>a</p>

因此，当我加载页面时，我希望看到一个“a”，但我看到的只是空白区域。当我检查元素时，它显示。我测试了我的路由，它似乎导航到了正确的地址，但为什么我的模板没有显示/为什么我的 ng-view 被注释掉了？我尝试了从 localhost 运行并在 Web 浏览器中打开它以达到相同的效果。

编辑：如果重要的话，我没有收到任何控制台错误，我在启动时看到的路径是：

.../appFolder/public/index.html#/a

【问题讨论】：

您检查文件夹名称了吗？看起来模板存在于名为 html 的目录中，而您提供的 templateUrl 的 URL 错误。
@Madhukar 是的，抱歉，我原来的问题有一些错误，请查看我的修改
是否有任何控制台错误？
@war1oc 没有控制台错误，但是如果我手动导航到 ...index.html#/b，我会收到“GET /b.html”错误（404）：“未找到”。但是当它只是在 index.html#/a 时，我没有收到任何错误
它与您的视图文件的路径错误有关，您需要根据您的基本路径添加路径

标签： javascript angularjs ng-view route-provider

【解决方案1】：

myApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider
    .when('/a', {
        controller: 'aController',
        templateURL: '/html/a.html',
        css: '/styles/a.css'
    })
    .when('/b', {
        controller: 'bController',
        templateUrl: '/html/b.html',
        css: '/styles/b.css'
    })
    .otherwise({
        redirectTo: '/a'
    });
}]);

您的 router.js 文件似乎位于 js 文件夹中，因此您在路由中的路径无效。请检查上面代码sn-p中的路径。

【讨论】：

是的，router.js 文件在 js 文件夹中，但是将路径更改为上述并没有解决我的问题...

【解决方案2】：

所以...我的路径很好。但是，我将 templateURl 中的“R”大写... routeprovider 对象上也没有 css 属性。愚蠢的错别字...不过感谢大家的帮助！

【讨论】：