ui 路由器不工作

Question

应用后出现问题ui路由器页面变成空白

    <!DOCTYPE html>
<html ng-app="storeApp">

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="ui-router@0.3.0" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </head>

  <body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
  </body>

</html>

这是其余文件的 link。

https://plnkr.co/edit/1tUxa4eV5TjErqc8syM9?p=preview

hint: i use bower and gulp in my project i just modify it to fit plunker.

项目索引页的图像：

Answer 1

问题很少，

您需要在 app.js 之前加载 services.js 和 controllers.js。

   <script src="services.js"></script>
   <script src="controller.js"></script>
   <script src="app.js"></script>

在你的 plunker 中你提到了 controllers.js 但文件名是 controller.js

Answer 2

加载顺序只对 jQuery 和其他一些文件有影响。 AngularUI 的加载顺序很好。话虽这么说，我发现我通常还需要一条仅用于根 URL.

的路由

.state('root', {
    url:'',
    views: {
        'header': {
            templateUrl : 'header.html'
        },
        'content': {
            template : 'home.html',
            controller  : 'HomeController'
        },
        'footer': {
            templateUrl : 'footer.html'
        }
    }
})

您还应该将 JavaScript 文件移动到正文中，并让它们出现在页面最后一个元素之后。内联加载 JS 文件有时会对应用程序启动产生不利影响。

<!DOCTYPE html>
<html ng-app="storeApp">

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  </head>

  <body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="ui-router@0.3.0" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </body>

</html>

Answer 3

我终于发现问题出在 controller.js 我以错误的方式包含 $stateParams。

ui 路由器不工作

ui router doesn't work

html

javascript

web-development-server

web

angularjs