Question

对不起，我是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>

Answer 1

这是因为您尚未为州设置默认路线，请使用 $urlRouterProvider.otherwise() 设置默认状态。

<强> DEMO

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

AngularJs $ stateProvider不起作用

1 个答案: