ui路由器不工作
我应用ui路由器页面变成空白后出现问题。ui路由器不工作
<!DOCTYPE html>
<html ng-app="storeApp">
<head>
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" 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="[email protected]" 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
提示:我用的闺房,然后一饮而尽在我的项目,我只是修改,以适应plunker。
索引页面的图片从项目:
我终于想通了,这个问题是controller.js我包括$ stateParams以错误的方式。
有几个问题,
您需要加载services.js和之前controllers.js到app.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="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" 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="[email protected]" 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>
感谢您的重播,我将模板:'home.html'改为templateUrl:'home.html',是模板出现,但控制器和服务不起作用 –
是的,我已经在我的项目中做过了。我的索引页面http://i.stack.imgur.com/AMKSC.jpg的屏幕截图 –
感谢您的回复,我在电脑上正确地写下了它,没有出现任何问题。并且我在闯入者中纠正它,并存在同样的问题。 –
服务和控制器加载顺序是在加载Angular之后,而不是之前。 – MBielski