无法让路由工作 ui-router答案

【问题标题】：can't get routes working ui-router无法让路由工作 ui-router
【发布时间】：2015-07-30 20:57:53
【问题描述】：

我真的不知道我在这里做错了什么。好像剧本都不错。我发现 http://plnkr.co/edit/7FD5Wf?p=preview 有一个工作的 plunker。但是，当我运行我的代码时，它甚至不会加载 app.html。它只是加载索引页面，仅此而已。如果我在做一些愚蠢的事情，请不要接受这个。我对 angularjs 和 node js 很陌生。下面是jade生成的index.html文件。谢谢。

index.html

<!DOCTYPE html>
<html ng-app="flysolo">
<head ng-controller="AppCtrl">
  <title>Home</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
</head>

<body class="flysolo">
  <div class="row">
    <div id="wrapper" autoscroll="false" ui-view></div>
  </div>    

  <script type="text/javascript" src="/js/angular.min.js"></script>
  <script type="text/javascript" src="/js/ui-router.min.js"></script>
  <script type="text/javascript" src="/js/ui-bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/vendors/oclazyload/ocLazyLoad.min.js"></script>
  <script type="text/javascript" src="/libs/flysolo.js"></script>
</body>
</html>

flysolo.js

var deps = [
    'oc.lazyLoad',
    'ui.router',
    'ui.bootstrap'
];

var app = angular.module('flysolo', deps);

app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}]);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider.state('app', {
        abstract:true,
        url: '/',
        templateUrl: '/tpls/home/app.html'
    }).state('app.dashboard', {
        url: '/dashboard',
        templateUrl: '/tpls/home/home.html'
    });
}]);

app.controller('AppCtrl', function ($scope, $state) {
});

app.html

<div ui-view-container>
    <div id="content" ui-view autoscroll="false"></div>
</div>

home.html

<div class="row">
    This is supposed to be home page.
</div>

【问题讨论】：

等等，你列出的 plunker 不是损坏的代码吗？
@Claies 它是一个工作版本。我试图遵循该实现。
控制台有错误吗？
在控制台中不显示任何错误。

标签： angularjs node.js express angular-ui-router pug

【解决方案1】：

您在页头上定义了 AppCtrl，但您需要将其移动到页面的正文部分，以便 ui-view 在其范围内，如下所示：

<!DOCTYPE html>
  <html ng-app="flysolo">
  <head>
   <title>Home</title>
   <link rel="stylesheet" href="/css/bootstrap.min.css">
  </head>
  <body class="flysolo">
    <div class="row" ng-controller="AppCtrl">
      <div id="wrapper" autoscroll="false" ui-view></div>
    </div>    
    <script type="text/javascript" src="/js/angular.min.js"></script>
    <script type="text/javascript" src="/js/ui-router.min.js"></script>
    <script type="text/javascript" src="/js/ui-bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/vendors/oclazyload/ocLazyLoad.min.js"></script>
    <script type="text/javascript" src="/libs/flysolo.js"></script>
   </body>
  </html>

【讨论】：

即使控制器是在正文或页眉中定义的，它也会落在范围内。顺便说一句，我尝试按照您的解决方案进行操作，但没有成功。
在 app.html 中你有
，你试过用
代替吗？
没试过。但问题是脚本根本没有加载这个文件。