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>

这是其余文件的链接。

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

提示：我在我的项目中使用bower和gulp我只是修改它以适应plunker。

来自项目的索引页面的图像：

Answer 1

问题很少，

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

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

您提到的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路由器不起作用

3 个答案: