Question

我有这样的路线设置：

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在开始时下载部分内容，而不是在请求时下载。

有可能吗？

Answer 1

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

使用script指令（http://docs.angularjs.org/api/ng.directive:script）将您的部分放入最初加载的HTML中
如果需要，您还可以从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

Answer 2

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

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

Answer 3

添加构建任务以在Angular $templateCache中连接并注册html部分。（此答案是karlgold's answer.）

的更详细变体

对于 grunt ，请使用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>

Answer 4

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

<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's Gist

应该更改$http.get以使用您的捆绑文件：

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

您的路线templateUrl应如下所示：

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

Answer 5

如果使用rails，则可以使用资产管道将所有haml / erb模板编译并推送到模板模块中，该模板可以附加到application.js文件中。查看 http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Answer 6

我只是用eco为我做这份工作。默认情况下，Sprockets支持eco。它是嵌入式Coffeescript的简写版，它将生态文件编译成Javascript模板文件，该文件将被视为资产文件夹中的任何其他js文件。

您需要做的就是创建一个扩展名为.jst.eco的模板并在其中编写一些html代码，rails将自动编译并使用资产管道提供文件，并且访问模板的方式确实如此easy：JST['path/to/file']({var: value});其中path/to/file基于逻辑路径，因此，如果您在/assets/javascript/path/file.jst.eco中有文件，则可以JST['path/file']()

访问该模板

要使它与angularjs一起使用，你可以将它传递给模板属性而不是templateDir，它将开始神奇地工作！

Answer 7

您可以将$ state传递给您的控制器，然后当页面加载并调用控制器中的getter时，您调用$ state.go（＆＃39; index＆＃39;）或您要加载的任何部分。完成。

Answer 8

另一种方法是使用HTML5的Application Cache一次下载所有文件并将其保存在浏览器的缓存中。以上链接包含更多信息。以下信息来自文章：

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

应用程序离线后，它会一直缓存，直到发生下列情况之一：

用户清除其网站的浏览器数据存储空间。
清单文件已修改。注意：更新中列出的文件 manifest并不意味着浏览器将重新缓存该资源。该清单文件本身必须改变。

有没有办法让AngularJS在开始时加载部分，而不是在需要时？

8 个答案: