如何在我的UI視圖中預加載模板

Question

我想使用UI路由器在我的div中預加載模板。 這是我的template.html文件，它位於/ templates文件夾中。

// its location is templates/template1.html 
<div> 
    Template 1 
</div> 

angularjs中的.config函數具有以下代碼，其中包含狀態。這裏模板1是狀態1

.state('state1',{ 
      url:'/state1', 
      templateUrl:'templates/state1.html', 
      controller: 'state1Controller', 
     }) 
     .state('state1.template1',{ 
      templateUrl: 'templates/template1.html' 
     }) 

當我按下一個按鈕模板1被加載的子狀態，但我想預先加載的模板。我能做些什麼來達到我想要的結果？

Answer 1

聲明的方式：把所有的模板插入腳本代碼類型爲文本/ NG-模板：

<script type="text/ng-template" id="templateId.html"> 
    <p>This is the content of the template</p> 
</script> 

編碼方式：使用$ templateCache這一點。

在state1Controller，加載模板，放入高速緩存這樣的：

$templateCache.put('templateId.html', 'This is the content of the template'); 

或者以http加載：

$http.get('templates/template1.html').then(function(template){ 
    $templateCache.put('templateId.html', template); 
}) 

然後在你的路由器定義，把templateId .html作爲templateUrl的值

.state('state1.template1',{ 
    templateUrl: 'templateId.html' 
}) 

和任何時候請求templateId.html，angular會在向服務器發送請求之前自動在$ templateCache中查找模板。