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>

來源

2015-02-05 George Huang

這是因爲你沒有設置你的狀態的默認路由，請使用$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>

來源

2015-02-05 15:40:06 ryeballar

哇。你很棒！！謝謝。這些例子（例如http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/）我一直在閱讀，從來沒有告訴過我......我相信這是一篇很好的文章，但... – 2015-02-05 15:47:47

AngularJs $ stateProvider不起作用

回答

相關問題