Question

我希望减少MEAN项目的加载时间。所以我想＆＃34;缩小＆＃34;我的Angular观点，在grunt-angular-templates的帮助下。

使用我的所有模板成功生成＆＃34; templates.js＆＃34;

angular.module('core').run(['$templateCache', function($templateCache) {
    // My templates here
}]);

所以我想用这个文件一次性加载我的所有视图。我正在使用＆＃34; $ stateProvider＆＃34;配置我的路线。

问题是我不知道在哪里放模板，以及如何告诉$ stateProvider模板而不是视图。

谢谢

Answer 1

您可以深入了解此解释https://github.com/ericclemmons/grunt-angular-templates 以下是此任务从多个.html文件创建的输出示例：

angular.module('app').run(["$templateCache", function($templateCache) {
  $templateCache.put("home.html",
    // contents for home.html ...
  );
  ...
  $templateCache.put("src/app/templates/button.html",
    // contents for button.html
  );
}]);

然后，当你使用带有$ routeProvider的ng-include或templateUrl时，模板已经加载而没有额外的AJAX请求！

对于您的查询“放置模板的位置”，您可以看到这些示例例子在app Module

中注册HTML模板

ngtemplates:  {
  app:        {
    src:      '**.html',
    dest:     'templates.js'
  }
}

注册相对模板URL

通常，您的应用，模板和广告服务器位于单独的文件夹中，这意味着模板URL与文件路径不同。

ngtemplates:  {
  app:        {
    cwd:      'src/app',
    src:      'templates/**.html',
    dest:     'build/app.templates.js'
  }
}

这会将模板网址存储为templates / home.html而不是src / app / templates / home.html，这会导致404。缩小模板HTML

只需传递与htmlmin任务相同的选项：

ngtemplates:    {
  app:          {
    src:        '**.html',
    dest:       'templates.js',
    options:    {
      htmlmin:  { collapseWhitespace: true, collapseBooleanAttributes: true }
    }
  }
}

或者，如果您已经有一个现有的htmlmin任务，可以参考它：

ngtemplates:    {
  app:          {
    src:        '**.html',
    dest:       'templates.js',
    options:    {
      htmlmin:  '<%= htmlmin.app %>'
    }
  }
}

自定义模板网址

假设您在生产时仅使用ngtemplates，但在本地通过Node提供模板，没有.html扩展名。

您可以指定网址回调以进一步自定义注册的网址：

ngtemplates:  {
  app:        {
    src:      '**.html',
    dest:     'templates.js',
    options:  {
      url:    function(url) { return url.replace('.html', ''); }
    }
  }
}

自定义输出

有些人喜欢AMD＆amp; RequireJS并希望将输出包装在AMD或其他东西中（不要问我原因！）：

   ngtemplates:      {
      app:            {
        src:          '**.html',
        dest:         'templates.js',
        options:      {
          bootstrap:  function(module, script) {
            return 'define(' + module + ', [], function() { return { init: ' + script + ' }; });';
      }
    }
  }
}

您可以自定义$ templateCache.put（...）周围的所有内容。

MEAN堆栈模板与grunt-angular-templates

1 个答案: