有没有办法让 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 下载两个部分在开始时，而不是当请求。

有可能吗？

109890 次浏览
小开
最佳答案

是的，至少有两种解决方案:

  1. 使用 script指令(http://docs.angularjs.org/api/ng.directive:script)在最初加载的 HTML 中放置您的部分
  2. 如果需要，还可以从 JavaScript 中填写 $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});

这里是柱塞这些技术: http://plnkr.co/edit/J6Y2dc?p=preview

小开

如果您使用 Grunt 来构建您的项目，有一个插件将自动组装您的部分到一个 Angular 模块，启动 $templateCache。您可以将此模块与代码的其余部分连接起来，并在启动时从一个文件加载所有内容。

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

小开

如果使用 Rail，可以使用资产管道来编译所有的 haml/erb 模板，并将其放入模板模块中，该模板模块可以附加到 application.js 文件中。退房 Http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

小开

我只是使用 eco来完成我的工作。 默认情况下，Sprockets 支持 eco。这是一个嵌入式 Coffeescript 的简写，它接受一个 eco 文件并编译成一个 Javascript 模板文件，该文件将被视为您的资产文件夹中的任何其他 js 文件。

您所需要做的就是创建一个带有扩展名的模板。然后在这里编写一些 html 代码，Rails 会自动编译并使用资产管道为文件提供服务，访问模板的方法非常简单: JST['path/to/file']({var: value});，其中 path/to/file是基于逻辑路径的，所以如果你在 /assets/javascript/path/file.jst.eco中有文件，你可以在 JST['path/file']()访问模板

要使它与 angularjs 一起工作，您可以将它传递到 template 属性而不是 templateDir，它将神奇地开始工作！

小开

如果将每个模板包装在一个脚本标记中，例如:

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

将所有模板连接到一个大文件中。如果使用 VisualStudio2013，下载 Web 要点-它会添加一个右击菜单来创建一个 HTML 包。

添加这个家伙编写的代码，以改变有角度的 $templatecache服务-这只是一个很小的代码块，它的工作: Vojta Jina 的要点

应该改为使用 bundle 文件的是 $http.get:

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

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

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

添加一个构建任务来连接和注册您的 html 部分在角 $templateCache

对于 哼哼，使用 角模板。 对于 吞下去，使用 吞咽角模板缓存。

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

Js 例子:

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

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'));
});

Js (这个文件是由构建任务自动生成的)

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

Html

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

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

更改 <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

一旦应用程序离线，它将保持缓存状态，直到发生下列情况之一:

  1. 用户为您的站点清除浏览器的数据存储。
  2. 清单文件已被修改。注意: 更新 并不意味着浏览器将重新缓存该资源 清单文件本身必须更改。
小开

您可以将 $state 传递给控制器，然后当页面加载并调用控制器中的 getter 时，您可以调用 $state.go (‘ index’)或您希望加载的任何部分。成交。


提交答案