Angular 2 JavaScript 环境配置

现在我们来学习如何配置 angular 2 的运行环境

在本章节中，我们会使用 JavaScript 创建一个简单的 Angular 的应用

目录结构

本章节，我们使用到的目录如下图所示

创建配置文件

创建目录

载入需要的库

这里，我们使用 npm 来作为包的管理工具

创建 package.json 文件

然后将下面的内容复制黏贴到 package.json

由于 npm 官网镜像国内访问太慢，这里我使用了淘宝的 npm 镜像，安装方法如下：

运行成功后我们就可以使用 cnpm 命令来安装模块：

运行成功后 angular-quickstart 目录下就会生成一个 node_modules 目录，这里包含了我们这个范例需要的模块

创建 Angular 组件

组件（Component）是构成 Angular 应用的基础和核心

一个组件包装了一个特定的功能，并且组件之间协同工作以组装成一个完整的应用程序

一般来说，一个组件就是一个用于控制视图模板的 JavaScript 类

现在，我们在 angular2-quickstart 目录下创建一个 app 的目录

然后添加组件文件 app.component.js , 复制以下内容

上面的代码中，

我们通过链式调用全局 Angular core 命名空间 ng.core 中的 Component 和 Class 方法创建了一个名为 AppComponent 的可视化组件

Component 方法接受一个包含两个属性的配置对象，Class 方法是我们实现组件本身的地方

在 Class 方法中我们给组件添加属性和方法，它们会绑定到相应的视图和行为

模块

Angular2 应用都是模块化的，ES5 没有内置的模块化系统

可以使用第三方模块系统，然后我们为应用创建独立的命名空间 app，文件代码可以包裹在 IIFE（立即执行函数表达式）中

我们将全局 app 命名空间对象传入 IIFE 中，如果不存在就用一个空对象初始化它

大部分应用文件通过在 app 命名空间上添加东西来导出

我们在 app.component.js 文件中导出了 AppComponent

Class定义对象

AppComponent 类只有一个空的构造函数

当要创建一个是有实际意义的应用时，可以使用属性和应用逻辑来扩展这个对象

Component 定义对象

ng.core.Component()告诉 Angular2 这个类定义对象是一个 Angular2 组件

传递给 ng.core.Component() 的配置对象有两个字段：selector 和 template

selector 为一个宿主 html 元素定义了一个简单的 css 选择器 my-app

当 Angular 在宿主 HTML 中遇到一个 my-app 元素时它创建并显示一个 AppComponent 实例

template 属性容纳着组件的模板

添加 NgModule

Angular 应用由 Angular 模块组成

模块包含了 Angular 应用所需要的组件及其它任何东西

现在创建文件 app/app.module.js ，复制以下内容

启动应用

新建文件 app/main.js, 复制以下内容

我们需要两样东西来启动应用

Angular 的 platformBrowserDynamic().bootstrapModule 函数

上文中提到的应用根模块 AppModule

创建文件 index.html，复制以下内容

注意，这个文件在 app 目录之外，和 app 目录同级

在这个 index.html 文件中

载入我们需要的 JavaScript 库

载入我们自己的 JavaScript 文件，注意顺序

添加 <my-app> 标签

执行过程为

接下来添加一些样式美化页面

新建一个文件 style.css，复制以下内容

打开终端，输入以下命令

这样我们的 Angular2 入门的应用算是构建完成了

需要使用下面的命令查看结果

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！