Angular2 是一种流行的前端框架，可用于构建现代的 Web 应用程序。在开发过程中，你需要使用一些工具来管理和构建你的应用程序，其中 Webpack 是一种非常流行的工具。在本文中，我们将讨论如何在 Webpack 中使用 Angular2。
安装 Angular2 和 Webpack
首先，我们需要安装 Angular2 和 Webpack。可以使用以下命令来安装它们：
npm install --save angular2 webpack webpack-dev-server
配置 Webpack
要在 Webpack 中使用 Angular2，我们需要添加一些配置。我们需要定义一个入口点和一个输出点，在这里我们将定义一个单独的 JavaScript 文件，其中包含 Angular2 应用程序的所有代码。
webpack.config.js:
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
--------- -----------
--
-------- -
----------- ---- ------ ------
--
------- -
-------- -
- ----- -------- ------- --------------------------- -
-
-
--这里，我们使用了 TypeScript 作为我们的 Angular2 应用程序的主要语言。因此，我们需要为 Webpack 配置 TypeScript 加载器。我们还需要扩展文件名以使用 TypeScript。 awesome-typescript-loader 是一个流行的 TypeScript 加载器，可以在 webpack.config.js 文件中定义，如上所示。
创建 Angular2 组件
创建 Angular2 组件，我们需要使用 Angular CLI。使用以下命令安装 Angular CLI：
npm install -g @angular/cli
然后，我们使用以下命令创建新的 Angular2 应用程序：
ng new my-app
以下是默认设置：
- 样式表：CSS。
- 单元测试运行程序：Karma。
- 端到端测试运行程序：Protractor。
使用以下命令启动应用程序：
cd my-app ng serve
现在你可以通过在浏览器上访问 http://localhost:4200 来查看运行中的 Angular2 应用程序。
将 Angular2 应用程序添加到 Webpack
要将 Angular2 应用程序添加到 Webpack，请将其代码移动到 src/app 目录下，然后将应用程序组件添加到 src/app/app.module.ts 文件中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ----------- -------- - ------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
在这里，我们导入了 BrowserModule 和 AppComponent，并将其添加到 @NgModule 装饰器中。我们需要告诉 Angular2 如何启动我们的应用程序。在这里，我们使用了 bootstrap 属性来指定我们的应用程序组件。
创建 app.component.ts 文件：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }在这里，我们创建了一个新的 Angular2 组件，并将其添加到 AppComponent 类中。组件定义有两个部分：元数据和控制器。元数据有 selector 和 template 属性。控制器包含组件的完整逻辑。
在 HTML 中使用组件
我们现在可以在 HTML 中使用我们的 Angular2 组件。例如，我们可以将它添加到 index.html 文件中：
-- -------------------- ---- -------
--------- -----
------
------
-------------- - ------------------
----- --------------- ---------------------------- -----------------
----- ---------------- ------------------
----- ---------- ------------------- -------------------
-------
------
---------------------------
------- -------------------------
-------
-------现在，我们可以使用 ng serve 命令启动应用程序，并在浏览器上查看 Angular2 应用程序。
结论
在本文中，我们讨论了如何在 Webpack 中使用 Angular2，并使用 TypeScript 创建一个简单的 Angular2 应用程序。我们讨论了如何添加 Webpack 配置文件和如何使用 Angular CLI 创建应用程序。我们还看到了如何将我们的 Angular2 应用程序组件添加到 Webpack 中，并在 HTML 中使用它们。这些都是 Angular2 开发的基础知识，将有助于你构建现代的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efb2af6fbf9601973087e7