Angular ng-view - 无法加载

I'm trying to load some HTML content with angular using "ng-view". I have everything setup, a module, controllers and my routes which looks like this:

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

This is how the ng-view part looks like in my index.html:

这是我的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>

My HTML files are located in seperate folders inside the folder "components", so the path should be correct. I'm also testing this on a server. But all i end up with is an error.

我的HTML文件位于文件夹“components”中的单独文件夹中,因此路径应该是正确的。我也在服务器上测试它。但我最终得到的只是一个错误。

This is what shows up on the console in Chrome:

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

GET http://127.0.0.1:53283/components/about/about.html 404 (Not Found) Error: [$compile:tpload] Failed to load template: components/about/about.html (HTTP status: 404 Not Found)

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

Anyone know what's wrong here?

谁知道这里有什么问题?

1 个解决方案

#1

Try using componentLoaderProvider and config your app as follows:

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

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