AngularJs $ stateProvider不起作用

对不起,但是我是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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章