Question

我正在关注Pluralsight关于Angular基础知识的教程，其中的一个主题是关于使用ngRoute进行路由。

所以我遇到了这个特定主题的麻烦，因为我正在尝试创建一个管理路由的应用程序，而且我没有任何线索如何让它工作，因为它没有显示任何错误。

这是index.html文件。

<!DOCTYPE html>
<html ng-app="angularPlayground">
    <head>
        <meta charset="utf-8">
        <title>Angular playground</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
        <!-- Angular initalization -->
        <script src="app-module.js"></script>
        <script src="app-router.js"></script>
        <!-- Controllers -->
        <script src="app/main/main-ctrl.js"></script>
        <script src="app/faces/faces-ctrl.js"></script>
        <script src="app/location/location-ctrl.js"></script>
        <!-- Services -->
        <script src="app/faces/faces-service.js"></script>
    </head>
    <body>
        <h1>Welcome to the Angular playground</h1>
        <h4>Select what you want to see.</h4>

        <div ng-view></div>
    </body>
</html>

这是路线档案。

(function() {

    angular
        .module('angularPlayground')
        .config(function($routeProvider) {

            $routeProvider
                .when('/', {
                    templateUrl: 'app/main/main.html'
                })
                .when('/faces/:username', {
                    templateUrl: 'app/faces/user.html',
                    controller: 'FacesController'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });
})();

这是main.html文件。

<ul>
    <li><a href="#">Experiments</a></li>
    <li><a href="#">Faces API</a></li>
    <li><a href="#">Location</a></li>
</ul>

我确实检查了main.html文件的路径是否正确，应该是，因为当我在浏览器中输入其URL时，它会加载而没有任何问题。

顺便说一下here's the Plunker，如果你需要的话。

提前致谢。

ng-view不显示模板

0 个答案: