Question

我真的不知道我在这里做错了什么。好像脚本都很好。我找到了http://plnkr.co/edit/7FD5Wf?p=preview的工作人员。但是，当我运行我的代码时，它甚至没有加载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>

Answer 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>

不能让路由工作ui-router

1 个答案: