Question

我刚刚开始学习Angular，当我尝试使用Route provider时：

var App1 = angular.module('App1',['ngRoute']);

App1.config(function($routeProvider){
    //alert("pre-config");
    $routeProvider.
        when('/', {
            template: '<h1>main page</h1>',
            controller: 'heroCtrl'
        }).
        when('/:heroName', {
            template: '<h1>Hello!</h1>',
            controller: 'detailCtrl'
        }).otherwise({
            redirectTo: '/'
        });
    //alert("post-config");
});

App1.controller('heroCtrl',function($scope){
    $scope.heroes = [
     {"name":"Yan Xu", "Role":"Ranger", "Metamorphosis":"Ancient Dragon","desc":"Main Hero"},
     {"name":"Sandria Dettorox", "Role":"Mage", "Metamorphosis":"Diviner","desc":"Main Heroine"},
     {"name":"Schneider Lain", "Role":"Necromancer","Metamorphosis":"None","desc":"Main Villain"}
    ];

    $scope.sortField = 'name';
});

App1.controller('detailCtrl',function($scope, $routeParams){
    console.log("called");
    console.log($routeParams);
});

我使用第一个正常工作的控制器实现了一些列表排序。然而，当我尝试从index.html＃/ heroName访问路由时，它没有显示模板，没有警报，也没有在控制台中记录信息。谁能告诉我这里有什么问题？我的角度版本是1.4.7。

编辑： HTML代码：

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></</script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-view>
    <h1>Angular Test</h1>

    <div id="Module1" ng-app="App1" class="col-sm-12">
        <form action="">
            <div ng-controller="heroCtrl">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Role</th>
                            <th>Metamorphosis</th>
                            <th>Character</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="hero in heroes | filter:filter | orderBy:sortField">
                            <td>{{hero.name}}</td>
                            <td>{{hero.Role}}</td>
                            <td>{{hero.Metamorphosis}}</td>
                            <td>{{hero.desc}}</td>
                        </tr>

                    </tbody>
                </table>
                <input name="filter" ng-model="filter"></input><br/>
                <a class="btn" ng-click="sortField='name'">Sort By Name</a>
                <a class="btn" ng-click="sortField='Metamorphosis'">Sort By Morph</a>
                <p>Current sort field: {{sortField}}</p>
            </div>
        </form>

    </div>


    <div id="Module2">


    </div>
    <script src="Angular/frontPage.js"></script>
</body>
</html>

Answer 1

可能是错误的，因为主页不在描述中，但我猜测在主页中你缺少ng-view指令。

因此无法注入模板。你应该有类似的东西：

<body ng-view></body>

或者，如果body标记下已有一些元素：

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

Angular JS：没有调用路由提供程序控制器方法？

1 个答案: