带有咕噜咕噜角度模板的 MEAN 堆栈模板

MEAN stack templates with grunt-angular-templates

本文关键字：堆栈 MEAN      更新时间：2023-09-26

我想减少我的 MEAN 项目中的加载时间。所以我想在咕噜咕噜的角度模板的帮助下"缩小"我的角度视图。

它成功生成了一个"模板.js"，其中包含我的所有模板：

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

所以我希望我的所有视图都用这个文件一次性加载。我正在使用"$stateProvider"来配置我的路由。

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

谢谢

你可以深入了解这个解释 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 与文件路径不同。

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

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

只需传递与 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扩展名。

您可以指定 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(...(周围的所有内容。

相关文章：