AngularJS UI路由器显示带有templateUrl的空白页面

时间:2016-05-22 19:16:21

标签: angularjs angular-ui-router

我试图将我的应用程序拆分为视图并从Angular UI路由器开始。我创建了多个视图,如果我使用'模板',它打印正常,但是当我将templateUrl与外部.html文件一起使用时,我只会得到一个空白页。

HTML:

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>

<script src="searchApp.js"></script>

</head>

<body ng-app="searchApp">
<div ui-view>
</div>
</body>
</html>

searchApp.js:

var searchApp = angular.module('searchApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('index', {
    url: "/",
    views: {
      '': {
        templateUrl: 'testView.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/');
}])

testView.html

This is a test.

这是一个普朗克:https://plnkr.co/edit/4xQaHbx71mUNYRbTQntz

修改 这似乎适用于Plunker,但不能在我的计算机上本地工作。在mac和win上都试过。

编辑2: 我所能做到的只是UI路由器templateUrl参数直接从文件系统运行但是可能需要服务器才能打开文件?是这样吗?有什么方法吗?

编辑3: 解决方案:当使用templateUrl(或通常包括任何文件)时,似乎页面需要通过服务器而不是直接从文件系统运行,因为它们是通过Ajax获取的。因此 - 要使用templateUrl,您必须在本地计算机上安装服务器或继续在服务器上进行编码。

1 个答案:

答案 0 :(得分:0)

这与UI路由器无关,因为抛出了无法找到angular的错误。您使用了错误的URL来加载Angular。改变

"http://ajax.googleapis.com/ajax/libs/angularjs/...

https://ajax.googleapis.com/ajax/libs/angularjs/...

让事情奏效。

https://plnkr.co/edit/rSbD4FBIFsnamiaMQLve?p=preview