使用纯JavaScript渲染这些Angular2组件
[英]Rendering these Angular2 components with plain JavaScript
问题描述
I need to achieve the following. 
我需要实现以下目标。 Could you please give me some advises or recommendations to go in the right direction? 您能否给我一些建议或建议，以朝正确的方向发展？ Thanks. 谢谢。
Goal to achieve: 要达到的目标：
Complete the file: index.html (code below) by adding needed CSS AND JAVASCRIPT references so it can render the components: { <mat-select /> , <mat-slide-toggle /> , <mat-datepicker /> } taken from here: https://material.angular.io/components . 通过添加所需的CSS AND JAVASCRIPT引用来完成文件： index.html （下面的代码），以便它可以呈现组件：{ <mat-select /> ， <mat-slide-toggle /> ， <mat-datepicker /> }从这里开始： https : //material.angular.io/components 。
Probably will be necessary to add some JAVASCRIPT CONFIGURATION CODE inside the head / script tag. 可能有必要在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>
Requirements: 要求：
- everything have to be inside:
index.html(no sibling files).一切都必须在内部： index.html（无兄弟文件）。 - reference every needed JavaScript file from some CDN server. 从CDN服务器引用每个需要的JavaScript文件。
- use the components / tags: {
<mat-select />,<mat-slide-toggle />,<mat-datepicker />} directly in theindex.html.直接在index.html使用组件/标签：{<mat-select />，<mat-slide-toggle />，<mat-datepicker />}。 - when you open
index.htmlin the browser you get the same output as either:在浏览器中打开index.html，将获得与以下任一输出相同的输出：- Pure
JavaScriptlive output and code .纯JavaScript实时输出和代码 。 - Pure
TypeScriptlive output and code .纯TypeScript实时输出和代码 。
- Pure
- do not use replacing
jQuery UIcomponents.不要使用替换jQuery UI组件。
The idea behind this is to get the same result as for the following Angular1 (not Angular2 ) example. 其背后的想法是获得与以下Angular1 （而非Angular2 ）示例相同的结果。 Where inside the index.html was used the Angular1 component: <sm-range-picker-input /> . 使用index.html内部的Angular1组件： <sm-range-picker-input /> Angular1 <sm-range-picker-input /> 。 Here are the live output and the code for this example wich as you can see, it meets the 5 requirements pointed above. 这是实时输出和该示例的代码 ，如您所见，它满足上面指出的5个要求。
1 个解决方案
解决方案1
0 2018-01-11 10:00:51
Actually you don't need to work so hard to archive this. 实际上，您无需为此工作就可以存档。 For example latest Angular release coming with Angular CLI component that will do all of this for you. 例如，Angular CLI组件随附的最新Angular版本将为您完成所有这些工作。
What is actually happening behind the scenes is that Angular CLI use Webpack bundler to 1. Compile all TS files to JS files 2. Pack, compress, divide to chunks JS files, etc.. etc.. etc.. The output of all those processes is bundle file. 实际发生在幕后的是Angular CLI使用Webpack bundler来进行1.将所有TS文件编译为JS文件。2.将JS文件打包，压缩，分割为块等。等等。等等。所有这些文件的输出进程是bundle文件。 Usually it named main.js or similar. 通常它命名为main.js或类似名称。 This pure Javascript file contains everything you need to use (in you example) tags such as mat-select , mat-slide , etc.. The main point that it's already there - you don't need to bring Angular from CDN or anything else - it's already packed inside main.js . 这个纯Javascript文件包含您需要使用的所有示例（在您的示例中）标签，例如mat-select ， mat-slide等。要注意的是，它已经存在-您不需要从CDN或其他任何工具中引入Angular。 -它已经打包在main.js 。
General recommendation: 一般建议：
Read more on how Angular works with bundlers: Angular Deployment
阅读有关Angular如何与捆绑器一起使用的更多信息： Angular部署 Read more on how Webpack work: Webpack concepts and especially: HtmlWebpackPlugin
阅读有关Webpack如何工作的更多信息： Webpack概念 ，尤其是： HtmlWebpackPlugin
Note: You could bring global CSS styles (for example) and put it into <head> section or even other JS packages. 注意：您可以带入全局CSS样式（例如），并将其放入<head>部分或什至其他JS包中。 There's a way in Angular to use it inside application although they defined outside 尽管他们在外部定义了Angular中的一种方法，但仍可以在应用程序内部使用它
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.