有没有办法让AngularJS在开始时加载部分,而不是在需要的时候?

我有这样的路由设置:

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在开始时下载这两个部分,而不是在请求时下载。

可能吗?

是的,至less有两种解决scheme:

  1. 使用script指令( http://docs.angularjs.org/api/ng.directive:script )将您的部分放入最初加载的HTML
  2. 如果需要的话,您也可以从JavaScript填充$templateCachehttp://docs.angularjs.org/api/ng.$templateCache )(可能基于$http调用的结果)

如果你想使用方法(2)来填充$templateCache你可以这样做:

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

当然模板内容可能来自$http调用:

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

下面是这些技巧: http ://plnkr.co/edit/J6Y2dc?p=preview

如果您使用Grunt构build项目,则会有一个插件将自动将您的部分组装到一个Angular模块中,以便使$ templateCache充满。 你可以连接这个模块和其余的代码,并在启动时加载一个文件中的所有内容。

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

添加一个构build任务来在Angular $templateCache连接和注册你的html partials。 ( 这个答案是karlgold答案的一个更详细的变体。 )

对于咕噜 ,使用grunt-angular-templates 。 对于吞咽 ,使用gulp-angular-templatecache 。

下面是configuration/代码片段来说明。

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(这个文件是由构build任务自动生成的)

 $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 – 它会添加一个右键单击菜单来创build一个HTML Bundle。

添加这个人写的代码来改变angular度的$templatecache服务 – 它只是一小段代码,它的工作原理: Vojta Jina's Gist

它的$http.get应该被修改为使用你的包文件:

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

你的路线templateUrl应该是这样的:

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

如果您使用rails,则可以使用资产pipe道将所有haml / erb模板编译并插入到可以附加到application.js文件的模板模块中。 结帐http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

我只是用eco来为我做这个工作。 eco默认支持Sprockets。 这是embedded式Coffeescript的简写,它将一个生态文件和编译成一个Javascript模板文件,该文件将被视为您的资产文件夹中的任何其他js文件。

所有你需要做的就是创build一个扩展名为.jst.eco的模板,并在其中写入一些html代码,rails将自动编译并提供资产pipe道的文件,访问模板的方法非常简单: JST['path/to/file']({var: value}); 其中path/to/file基于逻辑path,所以如果你在/assets/javascript/path/file.jst.eco有文件,你可以在JST['path/file']()

为了使它和angularjs一起工作,你可以把它传递给模板属性而不是templateDir,它会开始神奇的工作!

您可以将$ state传递给您的控制器,然后当页面加载并调用控制器中的getter时,您可以调用$ state.go('index')或任何您想要加载的部分。 完成。

另一种方法是使用HTML5的应用程序caching来下载所有文件一次,并将其保存在浏览器的caching中。 上面的链接包含更多的信息。 以下信息来自文章:

更改您的<html>标签以包含manifest属性:

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

清单文件必须与MIMEtypes的text/cache-manifest

一个简单的清单看起来像这样:

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

一旦应用程序脱机,它将保持caching,直到发生以下情况之一:

  1. 用户清除浏览器的数据存储为您的网站。
  2. 清单文件被修改。 注意:更新清单中列出的文件并不意味着浏览器将重新caching该资源。 清单文件本身必须改变。