有沒有辦法讓AngularJS在開始時加載partials，而不是在需要的時候加載？

188

我有一個路線的設置是這樣的：有沒有辦法讓AngularJS在開始時加載partials，而不是在需要的時候加載？

var myApp = angular.module('myApp', []). 
    config(['$routeProvider', function ($routeProvider) { 
    $routeProvider. 
     when('/landing', { 
      templateUrl: '/landing-partial', 
      controller: landingController 
     }). 
     when('/:wkspId/query', { 
      templateUrl: '/query-partial', 
      controller: queryController 
     }). 
     otherwise({ 
      redirectTo: '/landing' 
     }); 
}]);

我希望能夠使angularjs同時下載的開端，而不是諧音要求時。

可能嗎？

來源

2012-09-10 Ranjith Ramachandra

266

是的，這是你的至少2個解決方案：從

使用script指令（http://docs.angularjs.org/api/ng.directive:script）把你的諧音在初始加載HTML
你還可以填寫$templateCache（http://docs.angularjs.org/api/ng.$templateCache） JavaScript如果需要（可能根據$http調用的結果）

如果你想用方法（2）來填寫$templateCache你可以做這樣的：

$templateCache.put('second.html', '<b>Second</b> template');

當然的模板內容可以來自$http電話：

$http.get('third.html', {cache:$templateCache});

這裏是plunker這些技術：http://plnkr.co/edit/J6Y2dc?p=preview

來源

2012-09-10 07:16:44

感謝您的回覆。我喜歡模板緩存想法，因爲我不想把東西放到腳本標記中。如何使用它？文檔不好。我在那裏看到了一個小提琴。但我想從網址加載。 –

根據評論更新了答案 –

您能否請您重新發布重播郵件，因爲上述提到的郵件不是正在載入 – Chandermani

如果使用咕嚕爲了建立你的項目，有一個插件會自動將你的部分組裝到一個Angular模塊中，該模塊引發$ templateCache。您可以將此模塊與其餘代碼連接在一起，並在啓動時從一個文件加載所有文件。

https://npmjs.org/package/grunt-html2js

來源

2013-04-20 21:30:43 karlgold

+11

還有'grunt-angular-templates'可以做同樣的事情 - https://npmjs.org/package/grunt-angular-templates - 作品 –

這也適用於模板索引文件？我的索引文件中有一個ng-view和ng-include，我無法讓我的應用程序顯示出來。 – Batman

如果使用導軌，您可以使用資產管道編譯搡所有HAML/ERB模板到模板模塊，可以附加到你的application.js文件。結帳 http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

來源

2013-04-28 12:09:10

我只是用eco爲我完成這項工作。默認情況下，鏈輪支持 eco。它是嵌入式Coffeescript的縮寫，它將一個生態文件並編譯成一個Javascript模板文件，並將該文件視爲您在資產文件夾中具有的任何其他js文件。

您需要做的只是創建一個擴展名爲.jst.eco的模板，並在其中編寫一些html代碼，rails將自動編譯並通過資產管道爲文件提供服務，訪問模板的方式是真的很容易：JST['path/to/file']({var: value});其中path/to/file是基於邏輯路徑上，所以如果你在/assets/javascript/path/file.jst.eco有文件，你可以在JST['path/file']()

進入模板，使其與angularjs工作，你可以把它傳遞到模板的屬性，而不是TEMPLATEDIR ，它會開始神奇的工作！

來源

2013-06-24 08:56:31 Pencilcheck

我不確定這是否會回答這個問題，並且更改編程語言可能是矯枉過正。 – xdhmoore

如果包裝在腳本標記每個模板，例如：

<script id="about.html" type="text/ng-template"> 
<div> 
    <h3>About</h3> 
    This is the About page 
    Its cool! 
</div> 
</script>

串連所有模板到1個大文件。如果使用Visual Studio 2013，請下載Web Essentials - 它會添加一個右鍵菜單來創建一個HTML Bundle。

添加的代碼，這傢伙寫來改變角度$templatecache服務 - 它只是一小塊的代碼，它的工作原理：Vojta Jina's Gist

它應改爲使用您的包文件的$http.get：

allTplPromise = $http.get('templates/templateBundle.min.html').then(

你的路線應該是templateUrl這樣的：

 $routeProvider.when(
      "/about", { 
       controller: "", 
       templateUrl: "about.html" 
      } 
     );

來源

2014-02-03 10:48:34

添加構建任務合作在Angular $templateCache中註冊並註冊您的html部分。（這個答案的karlgold's answer.的更詳細的變體）

對於咕嚕，使用grunt-angular-templates。對於吞噬，請使用gulp-angular-templatecache。

下面是config/code snippets來說明。

gruntfile.js實施例：

ngtemplates: { 
    app: {     
    src: ['app/partials/**.html', 'app/views/**.html'], 
    dest: 'app/scripts/templates.js' 
    }, 
    options: { 
    module: 'myModule' 
    } 
}

gulpfile.js實施例：

var templateCache = require('gulp-angular-templatecache'); 
var paths = ['app/partials/.html', 'app/views/.html']; 

gulp.task('createTemplateCache', function() { 
return gulp.src(paths) 
    .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'})) 
    .pipe(gulp.dest('app/scripts')); 
    });

templates.js（該文件是由生成任務自動生成的）

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

的index.html

<script src="app/scripts/templates.js"></script> 
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>

來源

2014-12-11 20:07:35

Hi @james我正在使用這個gulp插件。所有.html加載正常，但當我嘗試指定HTML作爲一些對話框插件的一部分（我正在使用ng材質），它會拋出404. ex - $ mdDialog.show（{0}} {entityGridCtrl'， templateUrl：' user/partials/entityGrid.html' }）; –

你是否用你的用戶/部分替換了我的應用/視圖引用？ –

Thx。我不改變部分路徑，我發佈了我的問題 - http://stackoverflow.com/questions/29399453/gulp-templatecache-and-using-html-url-for-dialog-box –

-1

另一種方法是使用HTML5的Application Cache一次下載的所有文件並將其保存在瀏覽器的緩存。以上鍊接包含更多信息。以下信息是從文章：

更改<html>標籤包括manifest屬性：

<html manifest="http://www.example.com/example.mf">

清單文件必須與MIME類型text/cache-manifest送達。

一個簡單的清單看起來是這樣的：

CACHE MANIFEST 
index.html 
stylesheet.css 
images/logo.png 
scripts/main.js 
http://cdn.example.com/scripts/main.js

一旦應用程序處於脫機狀態，直到發生以下情況之一仍然緩存：

用戶清除其瀏覽器的數據存儲爲您的網站。
清單文件被修改。注意：更新清單中列出的文件並不意味着瀏覽器將重新緩存該資源。清單文件本身必須被修改。

來源

2015-12-18 22:01:31

不幸的是，這個功能已被棄用現在https ：//developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache所以只是提醒一下，使用這種方法需要您自擔風險 –

根據HTML標準，「此功能正在被移除（這是一個需要很長時間的漫長過程）「從2016年初開始，建議的替代服務工作者仍然是」實驗性技術「。目前，我仍然使用Application Cache，因爲它工作正常以及我的應用程序。 –

您可以將$ state傳遞給您的控制器，然後當頁面加載並調用控制器中的getter時，您可以調用$ state.go（'index'）或任何要加載的部分。完成。

來源

2016-09-16 17:16:33 rj905

有沒有辦法讓AngularJS在開始時加載partials，而不是在需要的時候加載？

回答

相關問題