Angular2学习——初探

Angular2是Google公司推出的一个跨平台全终端的框架，目前在开发web和移动APP领域由着非比寻常的优势，这和它本身的架构设计脱不开干系的。这里给出Angular框架的七大核心概念，也是我们后面开发必须要搞清楚的内容。

下面我们从配置环境开始搭建一个Angular2工程，来揭开它神秘的面纱。

环境配置

和大多数前端框架一样，我们采用node环境来搭建Angular，首先得确保你的计算机已经安装了node.js和npm。如果没有安装node请进入官网https://nodejs.org下载自己操作系统环境下的安装包。一切准备就绪之后在命令行中使用node –v查看自己安装的node版本，安装成功后的结果如下（npm会随着node一起自动安装）：

接下来我们需要安装Angular脚手架，使用脚手架可以直接从仓库中下载一个模板到本地，这样我们就可以直接在一个配置好的例子上进行修改，让其支持自己需要的功能。

npm intall –g angular-cli --registry=https://registry.npm.taobao.org

IDE我选择的是VS Code，也可以是Atom、webstorm、sublime等，根据个人习惯选择。

创建第一个Angular工程

在磁盘上创建一个文件夹，并且在当前文件夹下打开命令行窗口，输入

ng new first-ng --skip-npm

--skip-npm命令是指只安装程序不安装依赖，众所周知 http://npmjs.org的站点访问经常是卡带的，所有我们只需要把工程代码下载下载，使用淘宝镜像进行依赖安装。接下来进入到first-ng目录下使用npm install –registry=https://registry.npm.taobao.org安装依赖，正常安装后的工程目录如下：

使用vscode自带的终端窗口输入命令ng server，等待代码构建完成后在浏览器中输入http://localhost:4200看看有什么样的结果：

如果你的浏览器中展示了上面的内容，恭喜你！你的第一个ng项目顺利搭建完成。接下来我们开始看看具体的项目结构，并且修改相关的内容，让浏览器展示hello word！

上图展示的是ng项目的核心目录，main.ts是该项目的入口文件，app目录是默认的一个模块，我们打开app.component.ts文件发现有这么一行代码：

title = 'app works!';

这刚好就是我们之前浏览器中展示的内容，我们将title的值改为hello world!之后保存文件，切回到浏览器中发现此时内容也同步更新了。我们在chrome浏览器中使用调试工具看看该网页的DOM结构：

会发现我们修改的内容被一个H1标签包裹着，此时我们再回到vscode中查找相关的内容，发现app.component.html中刚好有个H1标签，并且也出现了title这个变量。没错，这就是本章一开始提到的七大模块中的模板。熟悉jsp的同学都知道，数据model和视图view可以在jsp中进行组合，这里采用了这样的方式来进行数据展示。接下来打开app.module.ts文件，该文件是一个模块配置文件，在Angular应用中需要用模块来组织一些功能紧密相关的代码块，如何组织就需要在配置文件中进行描述了。

上述代码中相关解释如下：

NgModule：用于定义模块用的装饰器；

declarations：导入模块依赖的组件、指令等；

imports：用来导入当前模块所需的其他模块。特别说明：BrowserModule模块注册了一些关键的provider和通用的指定，这里导入它作为公用模块供全局使用；

bootstrap：标记出引导组件，在应用启动时将被标记的组件渲染到模板中。