AngularJS 路由器和用户界面视图

Question

您好，我的路由器无法正常工作。我创建了一个名为lookup.html 的页面并将其添加到我的路由器文件中，但是当我转到我在路由器中指定的url 时，它没有加载到ui-view 中。我创建了一个 plnkr 并希望它会有所帮助。

http://plnkr.co/edit/II7Mv7jNYENhJHKX1ht5?p=linter

这是我的路由器：

(function () {
'use strict';

angular
    .module('crm.ma')
    .config(config);

config.$inject = ['$stateProvider', '$urlRouterProvider'];

function config($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('login', {
            url: '/login?token',
            data: {
                skipAuth: true
            },
            resolve: {
                valid: function (authService, $stateParams, sessionService, $state) {
                    if (!sessionService.getSession()) {
                        if ($stateParams.token) {
                            sessionService.setSession($stateParams.token);
                        } else {
                            sessionService.removeSession();
                        }
                    }
                    authService.login();
                }
            }
        })

        .state('main', {
            abstract: true,
            templateUrl: 'app/components/common/layout.html',
            controller: 'mainController as vm',
            data: {
                pageTitle: 'Homepage'
            }
        })
        .state('main.index', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'mainController as vm',
            data: {
                pageTitle: 'Homepage'
            }
        })            
        .state('search', {
            url: '/search',
            templateUrl: 'app/advancedsearch/advanced-search.html',
            controller: 'advancedsearch.controller as vm',
            data: {
                pageTitle: 'Search'
            }

        })
        .state('lookup', {
            url: '/lookup',
            templateUrl: 'app/components/common/lookup.html',
            controller: 'LookUpCtrl as vm',
            data: {
                pageTitle: 'Look Up'
            }

        })
        .state('dealer', {
            url: '/dealer',
            templateUrl: 'app/components/common/layout.html',
            controller: 'dealerController as vm',
            data: {
                pageTitle: 'Dealer'
            }
        });;
    $urlRouterProvider.otherwise('/');
}
})();

这是我的 lookup.html 页面。

<div>
<div>Lookup Results</div>
<table>
    <thead>
        <tr>
            <td>Acc. ID</td>
            <td>Acc. Name</td>
            <td>Acc Address</td>
            <td>City</td>
            <td>Zip</td>
            <td>Phone</td>
            <td>Parent Name</td>
            <td>Account Type</td>
            <td>Account Status</td>
            <td>Credit Term</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="result in vm.results">
            <td>{{ result.accountId }}</td>
            <td>{{ result.accountName }}</td>
            <td>{{ result.address }}</td>
            <td>{{ result.city }}</td>
            <td>{{ result.state }}</td>
            <td>{{ reuslt.zip }}</td>
            <td>{{ result.phone }}</td>
            <td>{{ result.parentName }}</td>
            <td>{{ result.accountType }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.accountStatus }}</td>
            <td>{{ result.creditTerm }}</td>
        </tr>
    </tbody>
</table>

如果需要任何进一步的信息，请告诉我。这不是我写的，我对如何使用路由器还有些不确定。

Answer 1

也许你已经导入了 angular-route.js 而不是 angular-ui-route.js；他们是不同的。使用 angular-route.js 你应该使用：

<div ng-view></div>

在 angular-ui-route.js 中你应该使用：

<div ui-view></div>

另一个问题可能是你的路由器文件的第一行，应该是这样的：

'use strict';
   angular.module(.........