帶有grunt-angular-templates的MEAN堆棧模板

Question

我想減少我的MEAN項目中的加載時間。 因此，我想借助grunt-angular-templates來“最小化”我的Angular視圖。

它使用我所有的模板成功生成了一個“ templates.js”：

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

因此，我希望使用此文件一次加載所有視圖。 我正在使用“ $ stateProvider”來配置我的路由。

問題是我不知道將模板放在哪里，以及如何告訴$ 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
  );
}]);

然后，當您將ng-include或templateUrl與$ routeProvider一起使用時，該模板已經加載，沒有額外的AJAX請求！

對於查詢“放置模板的位置”，您可以查看以下示例示例在應用程序模塊中注冊HTML模板

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

注冊相對模板URL

通常，您的應用，模板和服務器位於單獨的文件夾中，這意味着模板URL與文件路徑不同。

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

這會將模板URL存儲為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 %>'
    }
  }
}

自定義模板URL

假設您僅在生產中使用ngtemplates，但是在本地通過Node提供模板，而沒有.html擴展名。

您可以指定URL回調以進一步自定義注冊的URL：

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

自定義輸出

有些人喜歡AMD＆RequireJS，並希望將輸出包裝在AMD或其他東西中（不要問我為什么！）：

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

您將能夠自定義$ templateCache.put（...）周圍的所有內容。