Javascript 用户界面路由器不'；行不通_Javascript_Html_Angularjs_Web_Web Development Server

Javascript 用户界面路由器不'；行不通

javascript html angularjs web

Javascript 用户界面路由器不'；行不通,javascript,html,angularjs,web,web-development-server,Javascript,Html,Angularjs,Web,Web Development Server,我有一个问题后，应用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" /&g

我有一个问题后，应用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>

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

项目中索引页的图像：

问题很少

您需要在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

加载顺序只对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>

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

谢谢您的回复，我在我的计算机上写对了，没有出现任何问题。我在plunker中纠正了它，同样的问题也存在。服务和控制器的加载顺序是在Angular加载之后，而不是之前。感谢您的重播，我将模板“home.html”更改为模板URL：“home.html”，是的，模板出现了，但控制器和服务不起作用是的，我已经在我的项目中这样做了。我附上了我的索引页的屏幕截图

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