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未加载。

在控制台中也没有错误。

答

各国的目标是ui-view

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

在情况下，我们使用一个名为views : {'myName': { ... } }我们提供的名字像这样

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

我已经改变了我的NG-view元素为UI的观点，你显示，但我仍然有同样的问题。 – Sefa

缺失的行使所有运行也是'$ urlRouterProvider.otherwise（“/”）;'我在这里创建了完整的工作示例http://plnkr.co/edit/Xnncd8g4UQOh0OW9QpkH?p=preview –

这里有点复杂解决方案示例与父母状态和布局视图... http://*.com/q/28800644/1679310它可以给一些洞察UI路由器命名'views' –

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

相关推荐