Angular ng-view -加载失败

Angular ng-view - Failed to load

本文关键字：失败 加载 ng-view Angular      更新时间：2023-09-26

我试图用"ng-view"加载一些HTML内容。我已经设置好了所有的东西，一个模块，控制器和我的路由，看起来像这样:

myApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
    .when('/', {
    templateUrl: 'components/home/home.html',
    controller: 'mainController'
})
// route for the about page
.when('/about', {
    templateUrl: 'components/about/about.html',
    controller: 'aboutController'
});
});

下面是我的index.html:

中ng-view部分的样子
            <nav>
            <ul>
                <li><a href="#/">HOME</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </nav>
        
        <div class="main">
            <div ng-view></div>
        </div>

我的HTML文件位于"组件"文件夹内的不同文件夹中，所以路径应该是正确的。我也在一台服务器上进行了测试。但是我最终得到的却是一个错误。

这是在Chrome控制台显示的内容:

GET http://127.0.0.1:53283/components/about/about.html 404(未找到)错误:[$compile: tload] Failed to load template: components/about/about.html (HTTP status: 404 Not Found)

有人知道这里出了什么问题吗?

尝试使用componentLoaderProvider并按如下方式配置您的应用程序:

.config (['$componentLoaderProvider', function ($componentLoaderProvider) {
    $componentLoaderProvider.setTemplateMapping(function (name) {
        return 'components/' + name + '/' + name + '.html';
    });
}])
相关文章：