2015-09-06 76 views
5

我一直在Angular上工作,我試圖實現簡單的路由。 我有一個基本的HTML,其中包含對所有必需腳本和ng-view標記的引用。ng-view將不會顯示模板

由於某些原因,加載頁面時,模板未顯示在ng-view位置。爲什麼沒有顯示,以及如何解決它?

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script> 
    <script src="routCtrl.js"></script> 
</head> 
<body ng-app='ngRouteTest'> 
    <div ng-view></div> 
</body> 

和腳本文件:

var ngRouteTest = angular.module('ngRouteTest',['ngRoute']); 
ngRouteTest.config(function($routeProvider){ 
    $routeProvider 
.when('/', 
    {templateUrl : '/routView1.html'}) 
}); 
+0

什麼是開發者控制檯說?任何錯誤/警告? –

+0

以下錯誤:「加載模板失敗」。 –

+0

然後問題是你提供了一個錯誤的HTML文件路徑。你的routView1.html在哪裏?你的文件夾結構是什麼樣的? –

回答

0

好的,首先你需要從服務器運行你的代碼,所以要在本地測試它使用http-server,這很容易做好準備。

然後,你將需要從改變你的templateUrl路徑:

{templateUrl : '/routView1.html'} 

到:

​​
2

您需要重定向到該頁面,這樣路由會知道里面ng-view指令來呈現的頁面。

有多種方式可以做到這一點。

  1. 定義一個否則重定向到/

    $routeProvider.otherwise({redirectTo: '/'}) 
    
  2. 添加錨點將重定向到/頁。

    <body ng-app='ngRouteTest'> 
        <a href="#/">Home Page</a> 
        <div ng-view></div> 
    </body> 
    
  3. 默認網頁在<head>標籤頁上。

    <base href="/"/> 
    
+0

感謝您的答案,沒有任何選項幫助。 我確實看到添加「否則」之後執行的路由,但ng-view不加載模板。 按照上面問到的控制檯,我看到以下錯誤: 「無法加載模板」。 我認爲問題在於文件存儲在本地並導致安全問題 - 我將啓動服務器並查看是否得到不同的結果。 –

+1

您需要在服務器上託管您的代碼..其他模板將不會運行.. –

0

啓動本地主機和從那裏敗壞了代碼後,它的工作完美的罰款。

問題出在與本地ajax調用相關的安全性。

所以一個有這個問題應該做下面的事情之一:

1.停用網絡安全的鉻。 2.啓動本地主機進行測試。