Question

我正在尝试使用“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'
});
});

这是ng-view部分在我的index.html中的样子：

            <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文件位于文件夹“components”内的单独文件夹中，因此路径应该是正确的。我也在服务器上测试它。但我最终得到的只是一个错误。

这是Chrome中控制台上显示的内容：

获取http://127.0.0.1:53283/components/about/about.html 404（未找到）错误：[$ compile：tpload]无法加载模板：components / about / about.html（HTTP状态：404未找到）

有人知道这里有什么问题吗？

Answer 1

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

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

Angular ng-view - 无法加载

1 个答案: