使用纯 JavaScript 渲染这些 Angular2 组件答案

【问题标题】：Rendering these Angular2 components with plain JavaScript使用纯 JavaScript 渲染这些 Angular2 组件
【发布时间】：2018-06-19 21:33:26
【问题描述】：

我需要实现以下目标。您能否给我一些建议或建议以朝着正确的方向前进？谢谢。

要实现的目标：

通过添加所需的CSS AND JAVASCRIPT 引用来完成文件：index.html（下面的代码），以便它可以渲染组件：{<mat-select />，<mat-slide-toggle />，<mat-datepicker />} 取自此处：https://material.angular.io/components。

可能需要在head / script 标签内添加一些JAVASCRIPT CONFIGURATION CODE。

<!-- file: index.html -->

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8" />

<!-- BEGIN OF CSS AND JAVASCRIPT -->
<link rel="stylesheet" type="text/css" href="..." />
...
<script type="text/javascript" src="..."></script>
...
<!-- END OF CSS AND JAVASCRIPT -->

<script type="text/javascript">
// BEGIN OF JAVASCRIPT CONFIGURATION CODE
...
// END OF JAVASCRIPT CONFIGURATION CODE
</script>

</head>

<body>

    <!-- ... -->

    <mat-form-field>
        <mat-select placeholder="State">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
        </mat-select>
    </mat-form-field>

    <br />

    <!-- Please, alert it's value everytime it changes -->
    <mat-slide-toggle>Slide me!</mat-slide-toggle>

    <br />

    <mat-form-field>
        <input matInput [matDatepicker]="myDatepicker">
        <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
    </mat-form-field>

    <!-- ... -->

</body>

</html>

要求：

一切都必须在里面：index.html（没有兄弟文件）。
从某个 CDN 服务器引用每个需要的 JavaScript 文件。
直接在index.html中使用组件/标签：{<mat-select />,<mat-slide-toggle />,<mat-datepicker />}。
当您在浏览器中打开 index.html 时，您将获得与以下任一相同的输出：
- 纯JavaScriptlive output和code。
- 纯TypeScriptlive output and code。
不要使用替换 jQuery UI 组件。

这背后的想法是获得与以下Angular1（不是Angular2）示例相同的结果。在index.html 内部使用了Angular1 组件：<sm-range-picker-input />。这是此示例的live output 和code，如您所见，它满足上述5 个要求。

【问题讨论】：

标签： javascript angularjs angular typescript material-design

【解决方案1】：

其实你不需要那么辛苦地存档这个。例如，Angular CLI 组件附带的最新 Angular 版本将为您完成所有这些工作。

幕后实际发生的事情是 Angular CLI 使用Webpack bundler 来 1. 将所有 TS 文件编译为 JS 文件 2. 打包、压缩、分割成块 JS 文件等等.. 等等.. 等等..所有这些进程的输出是bundle 文件。通常它命名为main.js 或类似名称。这个纯 Javascript 文件包含 everything 您需要使用（在您的示例中）标签，例如 mat-select、mat-slide 等。主要的一点是它已经存在 - 您不需要从 CDN 或其他任何东西中引入 Angular - 它已经包含在 main.js 中。

一般建议：

阅读更多关于 Angular 如何与打包程序一起工作的信息：Angular Deployment
详细了解 Webpack 的工作原理：Webpack concepts，尤其是：HtmlWebpackPlugin

注意：你可以将全局 CSS 样式（例如）放入<head> 部分甚至其他 JS 包中。 Angular 有一种方法可以在应用程序内部使用它，尽管它们是在外部定义的

【讨论】：