什么时候可以通过 Angular 2 使用模板引擎？ [关闭]答案

【问题标题】：When Template Engine Can be used via Angular 2? [closed]什么时候可以通过 Angular 2 使用模板引擎？ [关闭]
【发布时间】：2017-05-12 12:31:03
【问题描述】：

我决定使用模板引擎（如 JADE/PUG）来通过 Angluar 2.0 使用，以便清晰并清理用于开发大型单页应用程序 (SPA) 的代码，我只是想获得一个性能非常好的应用程序。

我的组合是：HTML5+CSS (SASS)+ ANGULAR 2 + Bootstrap

我的问题是，为了清晰起见并清理代码以与 Angular 2.0 一起开发大型单页应用程序 (SPA)，使用模板引擎是否合理？我读到了JADE，但现在有疑问。

【问题讨论】：

标签： javascript angularjs angular pug template-engine

【解决方案1】：

...我建议您（基于我当前的堆栈）是使用 HTML 但在外部文件中...并通过 require 将其链接到您的组件...这样 webpack 可以为您完成神奇的休息。

例如：

 import { Component, AfterViewInit, ElementRef } from '@angular/core';
    import "fullcalendar";


    require('style!fullcalendar/dist/fullcalendar.css');


    @Component({
        selector: 'about',
        template: require('./about.component.html'),
        styles: [String(require('./about.component.scss'))]
    })

    export default class AboutComponent implements AfterViewInit {
        calendarElement: any;
        public message: string;

        constructor(private elementRef: ElementRef) { }

        ngAfterViewInit() {
            this.calendarElement = jQuery(this.elementRef.nativeElement);
            this.calendarElement.fullCalendar({});
        }

    }

如您所见，我也在使用相同的东西在我的组件中包含外部 sass 文件

【讨论】：

所以你的意思是不需要模板引擎？
是的，当然......而且我认为它更好......如果你必须做非常简单的事情，使用像 Jade 这样的东西是可以的......但这是我的意见......但现在如果你正在寻找类似的东西（你的html + css + js的服务器端渲染）......试着看看Angular Universal（它对SEO也很好）universal.angular.io
因此我们可以得出结论，HTML5+CSS (SASS)+ ANGULAR 2 + Bootstrap 非常好，不需要模板引擎来获得最佳性能。（快速应用）。
对我来说是的......你可以做的一个提高性能的事情是将你的模板（HTML）放在字符串中的角度缓存中......但它适用于带有 gulp 模块但在 Angular 中的 Angular 1 2 使用 webpack 开箱即用
如果您将 Angular 2 与 Webpack 一起使用，并且像我向您展示的那样包含外部 html（使用 require(''html-file.html)），那么您什么都不做......它会做对你来说很神奇.. 但只有在 Angular 2 和 Webpack 中.. 在 Angular 1 中你必须自己做

【解决方案2】：

JADE 不适合做 SPA。

JADE 是一种服务器端视图技术，它使用所需数据呈现 HTML，适用于传统的非 SPA 应用程序。

在 SPA 中，您只能从服务器获取数据（不是每次都获取 HTML）。

【讨论】：

为什么？请告诉我，什么是好的，为什么？
你是对的。在 SPA 中，我们获取数据并且整个页面不需要刷新。那么这里最好的是什么？
所有其他选择，如 HTML5、CSS、Bootstrap 都很好，只需摆脱 JADE（和任何其他服务器端视图库）并使用 Angular 2 服务从服务器获取数据。跨度>
使用模板引擎的主要原因是什么？