开发工具

WebStorm

  版本：2017.2.4 x64

1 概述

官方的新手教程主要分为8个部分，从简单的环境搭建，到一个项目的基本组成；从基础到核心，虽然核心的知识在新手教程中并没有太多的介绍。如果能把官网这个新手教程能全部做一遍的话，基本就能看懂基于angular4的前端项目了，当然，这个看懂只是说能看懂项目的结构和功能，不对项目复杂的设计和逻辑做评价。

2 收获和总结

2.1 设置开发环境

请先安装node 和 npm。 如果已经安装的，请检查版本：

请先在终端/控制台窗口中运行命令node -v和 npm -v， 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。更老的版本可能会出现错误，更新的版本则没问题。

然后全局安装angular-CLi：

npm install -g @angular/cli

2.2 创建新项目

打开终端运行以下命令创建新项目：

ng new my-app

项目创建完成后请 cd 到my-app项目目录下，运行下面的命令来下载一些依赖包

npm install

最后在命令行输入：

npm start 或 npm start --open 或 ng serve

（以上命令都可启动项目，--open是命令的参数，添加这个参数项目启动后会自动调用浏览器访问项目）

2.3 文件类型和用途

通过对新手教程的学习，发现教程里主要涉及的几个文件类型分别为：

*.ts
*.css
*.html

其中我们最常见的就是.html和.css，而.ts其实就是TypeScript的缩写，而TypeScript是Angualr-4对JavaScript的一种封装，项目构建时它会被编译为javaScript。

说完文件类型之后，我们来说一下两种类型的文件以及官网对其的解释：

app.component.{ts,html,css,spec.ts}
     使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长
     它会成为一棵组件树的根节点。
app.module.ts
      定义AppModule，这个根模块会告诉Angular如何组装该应用。 目前，它只声明了AppComponent。 
      稍后它还会声明更多组件。

其中component是组件，可以是被拆分为固定功能的小组件，也可以是整个页面。你只需在其对应的.ts文件中:
@Component({ selector: 'hero-search', })
你就可以在其他的html页面使用<hero-search></hero-search>标签去引用它。这样就可以重复的使用这些组件，避免了重复的代码。

而module模块，是项目中最重要的部分。app.module.ts是项目的根模块，这里应当保持简洁，具有特定功能的模块都建议单独抽离出来。把这些模块和组件在app.module.ts中声明即可。

2.4 命名规范

根据官方的建议，组件、模块分别以.component.xxx 和 .module.ts 结尾，对于文件名需要多个单词时中间以 - 来间隔。而对于类名与java的类名一样，遵循驼峰命名规范。

3 其它问题

3.1 WebStorm的自动Import

在写代码时发现，利用alt+Enter去自动import依赖时的引入格式：
import {RouterModule, Routes} from '@angular/router';
而官方示例代码的一如格式为：
import { RouterModule, Routes } from '@angular/router';

其实只是{}内有无空格的问题，虽然对代码没有影响，但是格式不同统一总是感觉有点别扭，可能也是我强迫症的原因吧。

3.2 项目的小BUG

按照官方的文档完成项目后，基本功能都可以实现。但是我却发现：当你把英雄列表里的所有英雄全部删除完之后，再去新增英雄，结果无响应， 控制台也没有错误日志。后来down下官方示例的代码去运行，也是不行。本来想在前端debug的，但是发现resource下都是ts文件，并不是javaScript，好心塞。没办法追究根源也是个小遗憾吧。