对不起,但是我是Angular的新手。我试图在我的应用程序中使用$ stateProvider,但是我只得到了一个空白屏幕。
我确实包含了angular-ui-router.min.js的脚本,然后注入了ui.router模块。我在config()部分配置代码。但是,我只能看到一个空白屏幕。
我试图添加一些代码来证明我的角度工作,并且确实可以(计时器工作),但是$ stateProvider只是不想工作。我怎么了?!。
下面是我的代码:(我正在使用MS Visual Studio 2010进行编辑)。
<html ng-app="myApp">
<head >
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '/',
template: '<h1>Home</h1>'
})
}])
.controller('mCtrl', ['$timeout', function ($timeout) {
var self = this;
var tick = function () {
self.currentTime = Date.now();
$timeout(tick, 1000);
};
$timeout(tick, 1000);
} ]);
</script>
</head>
<body ng-controller="mCtrl as m">
<form id="form1" runat="server">
<div>
Current Time - {{m.currentTime | date: 'EEE, MM/dd/yyyy hh:mm:ss'}}
</div>
<div ui-view></div>
</form>
</body>
</html>
这是因为尚未设置状态的默认路由,请使用$ urlRouterProvider.otherwise()设置默认状态。
<html ng-app="myApp">
<head >
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
template: '<h1>Home</h1>'
});
$urlRouterProvider.otherwise('/');
}])
.controller('mCtrl', ['$timeout', function ($timeout) {
var self = this;
var tick = function () {
self.currentTime = Date.now();
$timeout(tick, 1000);
};
$timeout(tick, 1000);
} ]);
</script>
</head>
<body ng-controller="mCtrl as m">
<form id="form1" runat="server">
<div>
Current Time - {{m.currentTime | date: 'EEE, MM/dd/yyyy hh:mm:ss'}}
</div>
<div ui-view></div>
</form>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句