Angular UI-Router沒有在ng-view元素中插入模板

我試圖用角度UI-Router構建一個非常簡單的應用程序。Angular UI-Router沒有在ng-view元素中插入模板

我的index.html文件：

<!DOCTYPE html> 
<html ng-app="elara"> 
<head> 
<script type="text/javascript" src="/bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
<script type="text/javascript" src="/js/app.js"></script> 
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script> 
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script> 
</head> 
<body> 
    <ng-view> </ng-view> 
</body> 
</html>

app.js文件

angular.module('elara', ['ui.router']) 

.run(
    ['$rootScope', '$state', '$stateParams', 
     function($rootScope, $state, $stateParams) { 

      // It's very handy to add references to $state and $stateParams to the $rootScope 
      // so that you can access them from any scope within your applications.For example, 
      // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li> 
      // to active whenever 'contacts.list' or one of its decendents is active. 
      $rootScope.$state = $state; 
      $rootScope.$stateParams = $stateParams; 
     } 
    ] 
) 

.config(
    ['$stateProvider', '$urlRouterProvider', 
     function($stateProvider, $urlRouterProvider) { 
      $stateProvider 

      .state('home', { 
       url: '/', 
       templateUrl: '/tmpl/index.html', 
       controller: 'indexCtrl' 
      }) 

      .state('register', { 
       url: '/register', 
       templateUrl: '/tmpl/register/register.tmpl.html', 
       controller: 'registerCtrl' 
      }) 
     } 
    ]);

的indexCtrl.js文件

app = angular.module('elara', []); 

app.controller('indexCtrl', ['$scope', function($scope){ 
    $scope.message = "index" 
}])

和registerCtrl.js是一樣的。只是控制器名稱和消息是不同的。

在我的x.tmpl.html文件我只想寫消息變量。

{{message}}

問題是，當我瀏覽到網址/或#/register我總是得到空白頁面。消息變量不在頁面中或我的模板htmls未加載。

在控制檯中也沒有錯誤。

來源

2015-10-17 Sefa

各國的目標是ui-view

// <ng-view> </ng-view> 
<div ui-view=""></div>

在情況下，我們使用一個名爲views : {'myName': { ... } }我們提供的名字像這樣

<div ui-view="myName"></div>

來源

2015-10-17 15:06:58

我已經改變了我的NG-view元素爲UI的觀點，你顯示，但我仍然有同樣的問題。 – Sefa

缺失的行使所有運行也是'$ urlRouterProvider.otherwise（「/」）;'我在這裏創建了完整的工作示例http://plnkr.co/edit/Xnncd8g4UQOh0OW9QpkH?p=preview –

這裏有點複雜解決方案示例與父母狀態和佈局視圖... http://stackoverflow.com/q/28800644/1679310它可以給一些洞察UI路由器命名'views' –

Angular UI-Router沒有在ng-view元素中插入模板

回答

相關問題