angular-ui-路由器不工作

Question

我无法使用 ui-router 进行路由。它确实适用于 ng-route，所以我一定错过了一些基本的东西。没有错误，但我没有看到任何视图。

以下代码不工作（除了 otherwise 语句）：

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-路由器不工作

angular-ui-router doesn't work

angularjs

angular-ui-router

angularjs-routing