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

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

是的,至少有两个解决方案:

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

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

Answer 2

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

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

Answer 3

添加构建任务以连接并注册Angular中的html部分$templateCache.(这个答案是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>

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的要点

它$http.get应该更改为使用您的包文件:

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

您的路线templateUrl应如下所示:

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