声明：本文内容是作者阅读《Angular权威教程》一书的总结和学习笔记，如果有需要可以去购买原版书籍阅读

Angular

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力

中文网的地址：https://www.angular.cn/

核心概念

注解

我们把注解看作添加到代码上的元数据，当在HelloWorld类上使用@Component时，就把HelloWorld '装饰'成了一个Component

快速开发angular项目

安装TypeScript

为什么要安装TypeScript,因为angular本身就是用TypeScript编写的

执行命令，进行安装

npm install -g typescript
mac用户可能会安装失败，请使用以下命令获取权限
sudo install -g typescript
然后输入密码

angular-cli

Angular 提供了一个命令行工具 angular-cli ，它能让用户通过命令行创建和管理项目。它自动化了一系列任务，比如创建项目，添加新的控制器等。

执行命令进行安装

sudo npm install -g @angular/cli

新建一个项目

执行命令

ng new angular2-hello-world

这样就可以快速新建一个项目了.目前只关注src目录里面的文件

启动内置的服务器
命令

ng server

浏览器中打开：http://localhost:4200/ 就可以看到启动界面了

angular的组件化思想

让浏览器认识一些拥有自动义功能的新标签

一. 创建第一个组建

执行命令

ng generate component hello-world

此时可以查看文件 src/app/ 下面多了一个hello-world文件夹，里面包含了4个文件

hello-world.component.css
hello-world.component.html
hello-world.component.spec.ts
hello-world.component.ts

一个新组件包含两个基本组成部分

Component注解
组件定义类

打开文件 hello-world.component.ts (TypeScript文件)

// 从@angular/core中引入了 Component , OnInit 两个模块
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello-world', 
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

代码解释

@Component 把{selector:...}对象当作元数据注入到HelloWorldComponent类中
selector 制定组件名称
templateUrl 组件的路径
styleUrls 组件样式路径（Angular使用一项叫作样式封装style-encapsulation）的技术，它意味着特定组件中指定的样式只会用于该组件本身
template 可以直接编写HTML模版

注意：ng serve 命令会自动把 .ts 文件编译为 .js 文件

二. 如何加载一个组件？

打开：src/app/app.component.html 文件添加刚刚自定组件的标签

<app-hello-world></app-hello-world>

现在刷新浏览器中就可以看到最新的效果了

三. 创建一个更加复杂的组件

执行命令

ng generate component user-item

打开src/app/app.component.html 添加组件
编写组件的逻辑业务

1) user-item.component.ts 文件中定义数据变量

export class UserItemComponent implements OnInit {
  name:String;
  constructor() {
    this.name = 'jack'
  }

  ngOnInit() {
  }

}

代码解释：

name:String 这个是TypeScript的语法，可以理解成强类型版的ES6
constructor中变量了初始值

2) user-item.component.html 中使用模版语法对变量进行渲染

<p>
  hello {{name}}!
</p>

3) 查看浏览器，就可以看到数据渲染出来了

四. 使用数组

两个指令可以选择

ng-repeat
*ngFor

使用指令生成一个新组件

ng generate component user-list
添加到app.component.html中
编写组件的业务逻辑

1) 打开user-list.component.ts 编写以下代码

export class UserListComponent implements OnInit {
  names:String[];
  constructor() {
    this.names = ['a','b','c']
  }

  ngOnInit() {
  }

}

代码解释：
names:String[] 创建一个都是字符串的数组，像极了java的强类型了
constructor 中对变量进行赋值

2) 打开user-list.component.html 使用模版语法进行渲染

<ul>
  <li *ngFor="let name of names"> Hello {{name}}</li>
</ul>

五. 创建一个组合组件

使用刚刚创建的UserItemComponent组件来替代li标签，需要做以下3点

配置UserListComponent 来渲染 UserItemComponent

//html
<ul>
  <app-user-item *ngFor="let name of names"></app-user-item>
</ul>

代码解释：把原先的li标签替换成 app-user-item组件

配置UserItemComponent 来接受name变量作为输入

import { Component, OnInit, Input} from '@angular/core';//1

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
  @Input() name:String;//2
  constructor() {

  }

  ngOnInit() {
  }

}

代码解释：
//1 中引入了 Input 这个是数据传入的方法
//2 中@Input() name:String 引入的数据的格式是String

配置UserListComponent的模版来把用户名传给UserItemComponent

html
<ul>
  <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

代码解释：
直接通过 [name] = "name" 向子组件传入数据

这样就创建了一个完成的组合组件了

启动

通过执行命令 ng serve

通过angular.json 文件找出该应用的入口点,src/main.ts
main.ts中会引导一个AppModule的模块
AppModule指定了将哪个组件用作顶层组件，这里是AppComponent
AppComponent的模板中有一个 <app-user-list> 标签,它会渲染我们的用户列表

NgModule

Angular有一个强大的概念：模块，当引导一个Angular应用的时候，并不是直接引导一个组件，而是创建一个NgModule,它指向了你要加载的组件

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent,
    UserItemComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }