Angular学习——入门篇

Angular 简介

1、 Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等 人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。
2、和Ｖue一样，angular也是以数据为中心，数据驱动——通过创建数据，绑定数据，修改数据，更新数据，来完成页面的操作。

angular的8大核心概念：

①组件：可被反复使用的 带有特定功能的视图
②模板: 普通的html+自定义组件+指令
③指令:让模板支持更多的逻辑功能
④绑定: 1、事件() 2、属性[] 3、双向数据[(ngModel)]
⑤管道: 是一个有参数有返回值的方法,帮助将原始数据经过筛选、过滤、格式化之后更好的展示出来
⑥装饰器和元数据：装饰器是用来描述当前的类；元数据是用来告诉Angular如何来处理当前的类
⑦服务
⑧依赖注入

Angular架构概览

使用angular拓展语法来编写HTML模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。
然后通过引导跟模块来启动该应用。 angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

angular开发模式：

使用组件来完成视图的封装和复用
使用服务来完成业务逻辑的封装和复用
使用模块来打包组件和服务
使用指令或者管道等拓展语法来编写HTML

angular选择TypeScript作为主要构建语言，其中涉及到静态类型和
基于类的面向对象编程，同时也支持诸如接口、命名空间、装饰器等特性

app目录

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。
一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/
@Component({
  /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
 * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
  *templateUrl  组件的模板，定义了组件的布局和内容
  *styleUrls   该模板引用那个css样式
 * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
  /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
  title = '学习Angular';
}

组件相关的概念

1、组件元数据装饰器（@Component）
简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
2、模板（Template）
我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
3、控制器（controller）
控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。
装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：

• 输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据

• 提供器（providers）：这个是用来做依赖注入的

• 生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期

• 样式表：组件可以关联一些样式表

• 动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等

• 输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据
  

• app.module.ts：这个文件表示模块

• 与AppComponent类似，模块也需要装饰器来装饰

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
   // 声明模块里有什么东西 只能声明：组件/指令/管道
    AppComponent,
    HeroesComponent
  ],
  // 声明该模块所依赖的模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 默认情况下是空的
  providers: [],
  // 声明模块的主组件是什么
  bootstrap: [AppComponent]
})
export class AppModule { }