[英]Is there a way to make AngularJS load partials in the beginning and not at when needed?
我有這樣的路線設置：
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在開始時下載部分內容，而不是在請求時下載。
可能嗎？
是的，至少有兩個解決方案：
script指令（ http://docs.angularjs.org/api/ng.directive:script ）將您的部分放入最初加載的HTML中 $templateCache （ http://docs.angularjs.org/api/ng.$templateCache ）（可能基於$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
如果你使用Grunt來構建你的項目，有一個插件可以自動將你的部分組合成一個Angular模塊，該模塊可以啟動$ templateCache。 您可以將此模塊與其余代碼連接起來，並在啟動時從一個文件加載所有內容。
添加構建任務以連接並注冊Angular $templateCache中的html部分。 （ 這個答案是karlgold答案的更詳細變體。 ）
對於咕嚕聲 ，請使用grunt-angular-templates 。 對於gulp ，請使用gulp-angular-templatecache 。
下面是配置/代碼片段來說明。
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>
如果將每個模板包裝在腳本標記中，例如：
<script id="about.html" type="text/ng-template">
<div>
<h3>About</h3>
This is the About page
Its cool!
</div>
</script>
將所有模板連接成一個大文件。 如果使用Visual Studio 2013，請下載Web essentials - 它會添加一個右鍵菜單來創建HTML Bundle。
添加這個人編寫的代碼來更改角度$templatecache服務 - 它只是一小段代碼並且它可以工作： Vojta Jina的Gist
它的$http.get應更改為使用您的包文件：
allTplPromise = $http.get('templates/templateBundle.min.html').then(
您的路線templateUrl應如下所示：
$routeProvider.when(
"/about", {
controller: "",
templateUrl: "about.html"
}
);
如果使用rails，則可以使用資產管道將所有haml / erb模板編譯並推送到模板模塊中，該模板可以附加到application.js文件中。 結帳http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading
我只是用eco來為我做這份工作。 默認情況下，Sprockets支持eco 。 它是嵌入式Coffeescript的簡寫版，它將生態文件編譯成Javascript模板文件，該文件將被視為您資產文件夾中的任何其他js文件。
您需要做的就是創建一個擴展名為.jst.eco的模板並在其中編寫一些html代碼，rails將自動編譯並使用assets管道提供文件，並且訪問模板的方式非常簡單： JST['path/to/file']({var: value}); 其中path/to/file基於邏輯路徑，因此如果您在/assets/javascript/path/file.jst.eco有文件，則可以在JST['path/file']()訪問該模板
要使它與angularjs一起使用，您可以將其傳遞給模板屬性而不是templateDir，它將開始神奇地工作！
您可以將$ state傳遞給您的控制器，然后當頁面加載並調用控制器中的getter時，您調用$ state.go（'index'）或您要加載的任何部分。 完成。
另一種方法是使用HTML5的應用程序緩存一次下載所有文件並將它們保存在瀏覽器的緩存中。 以上鏈接包含更多信息。 以下信息來自文章：
更改<html>標記以包含manifest屬性：
<html manifest="http://www.example.com/example.mf">
必須使用mime-type text/cache-manifest 。
一個簡單的清單看起來像這樣：
CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js
應用程序脫機后，它將保持緩存狀態，直到發生以下情況之一：
AngularJS在開始時加載局部，而不是在django中何時需要加載？
[英]AngularJS load partials in the beginning and not at when needed in django?
使用路由/部分時如何在AngularJs上加載js和css文件？
[英]How to load js and css files on AngularJs when using routes/partials?
AngularJS：如何使用ng-include將javascript文件加載到局部文件中
[英]AngularJS: How to load javascript files into the partials using ng-include
使用Symfony2為AngularJS部分提供服務的最佳方法是什么？
[英]What's the best way to use Symfony2 to serve AngularJS partials?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.