前言

分享一些我的Angular经验, 做一些整理总结，算作一种积累。

---

下面切入正题

环境搭建

前提条件

Node.js

1. 安装Angular CLI

npm install -g @angular/cli

2. 创建一个Angular项目

ng new my-app

3. 运行项目

cd my-app
ng serve -o

Angular 程序架构

• 组件-Component
  组件是Angular应用的基本构建块，可以吧组件理解为一段带有业务逻辑和数据的html，组件之间可以有父子关系。
• 服务-Service
  组件可以调用服务，服务用来封装可重用的业务逻辑，服务也可以调用服务。
• 指令-Directive
  简单来讲，指令允许向html元素添加行为，包含内置指令和自定义指令。
• 模块-NgModule
  用来将应用中不同的部分组织称一个Angular框架可以理解的单元。

一些概念

• 组件的必备元素
  装饰器、模板、控制器

• 组件的可选属性
  输入属性(Inputs) => 用于接收外部传入的数据，使得父组件可以直接传递数值给子组件。
  输出属性(outputs) => 和输入属性是相对应的，用于定义一些其他组件可能感兴趣的事件，或者在组件间共享数据
  提供器(providers) => 用来做依赖注入(依赖注入后面会单独说)。
  生命周期钩子(lifecycle hooks) => 组件从创建到销毁
  样式表(styles) => 组件相关的样式配置
  动画(animations) => Ng提供了一个动画包，帮助我们方便的创建组件与组件相关的动画效果，如淡入淡出等等

• 装饰器
  @Component()
  装饰器中的属性就是元数据(TypeScript中的概念)

  // 组件的元数据装饰器
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.ts',
      styleYrl: ['./app.component.css']
  })
  

• 模板
  Template 模板是组件的必备属性

• 控制器
  Controller
  控制器是一个只被Component装饰器装饰的TypeScript类，包含于模板相关的所有属性和方法，以及大部分的逻辑
  控制器通过数据绑定和模板通信。

• 模块 Module
  模块也是一个带着装饰器的TypeScript类。

  @NgModule({
      declarations: [
          // 声明这个模块中的组件、指令、管道
      ],
      imports: [
          // 声明了让应用运行还需要的东西，也就是下面AppModule这个模块依赖的其他模块 
          /**
           * 下面声明了三个Ng框架提供的模块
           * BrowserModule：开发web应用的必选依赖
           * FormsModule: 处理表单的模块
           * HttpModule: 提供Http服务的
           * 引用相应的模块后，就可以在应用中引用这些模块提供的组件、指令和服务等。
          */
          BrowserModule,
          FormsModule,
          HttpModule
      ],
      providers: [
          /* 默认情况下是空的 */
          /* 用来声明模块中提供的服务 */
      ],
      bootstrap: [
          /* bootstrap属性声明了模块的主组件 */
          AppComponents
      ]
  })
  export class AppModule{  }