2015-02-05 2 views
1

Прошу прощения, но я новичок в 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> 

ответ

3

Это потому, что вы не установили маршрут по умолчанию для вашего состояния, используйте $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> 
+0

Wow. Ты замечательный!! Спасибо. Примеры (например, http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/), которые я читал, никогда не говорят мне, что ... I верьте, это хорошая статья, но ... –

Смежные вопросы