Question

我无法使用ui-router进行路由。使用ng-route确实对我有用，所以我一定错过了一些基本的东西。没有错误，但我没有得到任何观点。

以下代码不工作（否则声明除外）：

angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('employeeList', {
            url: "/employees",
            templateUrl: "components/employee_list/employeeListView.html",   
        });

    $urlRouterProvider.otherwise("/employees");
});

以下代码可行：

angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
    var employeeListRoute = {
        templateUrl: "components/employee_list/employeeListView.html"
    };

    var otherwiseRoute = employeeListRoute;

    $routeProvider
        .when("/employeeList", employeeListRoute)
        .otherwise(otherwiseRoute);

这是我的index.html（省略了不相关的元素）：

<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>

    <script src="app.route.js"></script>
    <script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
    <div>
        <ng-view />
    </div>
</body>
</html>

尝试使用ui-router时我做错了什么？

Answer 1

正如@AminMeyghani已经说过，你应该使用ui-view而不是ng-view指令让路由器知道应该在ui-view指令

中加载相对视图

<div>
    <ui-view></ui-view>
</div>

Demo here

angular-ui-router不起作用

1 个答案: