为什么我的简单 Angular ui.router 不起作用？

Question

我有一个最简单的 ui.router 示例，但似乎不起作用。

见下文：

var routerApp = angular.module('mainApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {   

    //$urlRouterProvider.otherwise('/home'); When I uncomment this, it loads /home without a problem but why is it going to the "otherwise" condition?

    $stateProvider       
    .state('home', {
        url: '/home',
        templateUrl: 'main.html'
    })
});

我的索引文件。

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="/angular/angularApp.js"></script>
</head>

<body ng-app="mainApp">

<div class="container">
    <div ui-view></div>
</div>

</body>
</html>

我一直在深入研究这个问题，但我想我现在有了狭隘的视野。有人请帮帮我。提前致谢！

Answer 1

我没有发现任何问题，除非你对两者使用相同的控制器，你能看看下面的例子吗

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider.state('top', {
      url: "",
      templateUrl: "header.html",
      controller: 'topCtrl'
    })
    .state('top.side', {
      url: '/app',
      templateUrl: "side.html",
      controller: 'filterCtrl'
    })
    .state('top.side.list', {
      url: "/items?query",
      templateUrl: "items.html",
      controller: 'listCtrl'
    })
    .state('top.side.item', {
      url: "/:id",
      templateUrl: "item.html",
      controller: 'itemCtrl'
    });
});

DEMO

为什么我的简单 Angular ui.router 不起作用？

Why is my simple Angular ui.router not working?

javascript

angularjs