设置开发环境
1.安装 node环境，检查node和npm的版本号；确保你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。
2.全局安装Angular CLI（是一个命令行界面工具，可以创建项目，添加文件以及执行一大堆的开发任务，
比如测试、打包、发布。）
输入命令：npm install -g @angular/cli
3.创建新项目
在终端命令中，运行下面的命令来自动创建一个承载开发文件的文件夹(mky-app 名称随便)。
输入命令：ng new my-app
4.启动开发服务器
输入命令： cd my-app
ng serve --open
(ng serve 命令会启动服务器，监听文件变化，并在修改这些文件是重新构造此应用。)
（使用--open或-o参数可以自动打开浏览器并访问 http://localhost:4200/ ）
至此，angularJs构建就搭建完成了。
项目文件总览
| File 文件 | Purpose 用途 |
|---|---|
app/app.component.{ts,html,css,spec.ts} |
使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。 |
app/app.module.ts |
定义`AppModule`，这个[根模块](https://www.angular.cn/guide/bootstrapping "AppModule: 根模块")会告诉Angular如何组装该应用。 目前，它只声明了`AppComponent`。 稍后它还会声明更多组件。 |
assets/* |
这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。 |
environments/* |
这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。 甚至使用一些模拟服务。 所有这些，CLI都替你考虑到了。 |
index.html |
这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。 |
main.ts |
这是应用的主要入口点。 使用[JIT compiler](https://www.angular.cn/guide/glossary#jit)编译器编译本应用，并启动应用的根模块`AppModule`，使其运行在浏览器中。 你还可以使用[AOT compiler](https://www.angular.cn/guide/glossary#ahead-of-time-aot-compilation)编译器，而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。 |
polyfills |
不同的浏览器对Web标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。 你只要使用`core-js` 和 `zone.js`通常就够了，不过你也可以查看[浏览器支持指南](https://www.angular.cn/guide/browser-support)以了解更多信息。 |
styles.css |
这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。 |
test.ts |
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。 |
tsconfig.app.json和tsconfig.spec.json |
TypeScript编译器的配置文件。`tsconfig.app.[json](https://www.angular.cn/api/common/JsonPipe)`是为Angular应用准备的，而`tsconfig.spec.[json](https://www.angular.cn/api/common/JsonPipe)`是为单元测试准备的。 |
其他的文件就不一一列举了，详细介绍请看文档。
双向数据绑定
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
[(ngModel)]是一个angularJs的语法，用于把hero.name 的绑定到输入框中，数据流是双向的，从属性到输入框并且从输入框到属性。
不过当input 添加了这项之后。浏览器会报出一个错误[ngModel] ... isn't a known property of input.”（[ngModel]不是input元素的已知属性）
虽然 ngModel是angularJs的一个有效指令，但默认情况下是不可用的。它属于一个可选模块FormsModule。必须得先导入FormsModulem模块。
打开app,module.ts文件，并且从@angular/forms库中导入符号FormsModule，然后把FormsModule添加到@ngModule元数据improts数组中。
FormsModule.png
这样，就可以正常使用了。
通过使用ngFor来循环列表
<li *ngFor='let hero of heroes'></li>
ngFor 的*前缀表示<li>及其子元素组成一个主控模板。
引号中赋值给ngFor的那段文本表示*从heroes数组中取出每一个元素，存入到一个局部hero变量，并让他们在相应的模板实例中可用*
处理点击事件
在<li>元素上插入一句点击事件的绑定代码：
<li *ngFor='let hero of heroes' (click)="onSelect(hero)">...</li>
圆括号标识<li>元素上的click事件是绑定目标，等号右边的onSelect(hero)表达式调用AppCompoent的onSelect()方法，并把模板输入变量hero作为参数传进去。
组件编写
.组件的类名应该是大驼峰形式，并且以Component 结尾。形如:HeroDetailComponent。
.组件的文件名应该是小写中线形式,形如：kebab-case,每个单词之间用中线分隔。并且是以.component.ts结尾。
.要定义一个组件，必定需要导入AngularJs的符号Component, @Component装饰器为组件提供Angular元数据;selectorCSS选择器的名字，会匹配元素的标签名。用于在父元素组件的模板中标记出当前组件的位置。
.在AppModule中声明组件类。每个组件都必须有一个（且只有一个）Angular模块中声明。
形如：import{ HeroDetailComponent } from './hero-detail.component'。
.把组件添加到该模块的declarations数组中；通常declarations数组包含应用中的属于该模块的组件、管道和指令列表。组件在被其他组件引用之前都在一个模块中声明过。
网友评论