angular学习记录

1  angular项目文件解析

创建一个angular项目ng new demo，会比较慢，等等

组件可以理解为一段带有业务逻辑和数据的html

2  组件文件的解析

组件控制屏幕上被称为视图的一小片区域。组件通过一些由属性和方法组成

//从angular核心库导入Component装饰器
import { Component } from '@angular/core';
//为组件类加上@Component装饰器。

//它是一个装饰函数。用于为该组件指定angular所需的元数据（metadata）
//元数据：angular需要知道如何把应用程序的各个部分组合到一起，以及该应用需要那些其他文件和库
@Component({
  selector: 'app-root',//组件的选择器（css元素选择器），也可以写成.app-root那么在父组件就是class写法，或者[app-root]
  //用来在父组件的模板中匹配 HTML 元素的名称。<app-heroes></app-heroes>
  //写法不同在父组件的写法就不同

  templateUrl: './app.component.html',//组件模板文件的位置
  
  styleUrls: ['./app.component.less']//组件私有css样式表文件的位置
  // 也可以写成css样式的'.css{color:red}'
})

//始终要export这个组件类，以便在其它地方导入它
export class AppComponent {
  title = 'Tour of Heroes';
}

@Component：组件装饰器：用来告知angular框架如何处理一个TypeScript类

Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑

Template：我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在

装饰器和模板还有控制器是组件的必备要素！！

3  模块文件的解析

Angular应用是模块化的，它拥有自己的模块化系统，称为NgModule，一个Ngmodule就是一个容器。每个angular应用都至少要有一个NgModule类，也就是根模块，一般习惯命名为AppModule

模块也需要装饰器来修饰，叫@NgModule 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

import { HeroesComponent } from './heroes/heroes.component';
//声明，每个组件都必须声明在（且只能声明在）一个NgModule中，但是可以导出给多个模块使用。 典型应用场景就是shared.module
// 如果是通过ng generate component heroes（简写ng g c 名字）命令创建的组件，那么会自动帮我们声明好了

//这里是该应用所需外部模块的列表
@NgModule({//@NgModule装饰器
  declarations: [//这里声明了应用中的所有组件（这里只能声明组件，指令，管道）
    AppComponent,
    HeroesComponent
  ],
  imports: [//导入表，声明该模块所依赖的模块
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],

  // 默认情况下是空的，本模块向全局服务中贡献的那些服务的创建器
  providers: [],

  // 声明模块的主组件是什么，只有根模块才应该设置这个 bootstrap 属性
  bootstrap: [AppComponent]
})
export class AppModule { }

4  组件和模块的关系

|-模块

   |-组件1

       |- html模板（only one）

       |- css样式表（可多个）

   |-组件2

      ....省略

5  *ngFor和*ngIf和(click)

6  事件绑定

事件绑定语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成的

<button (click)=’name()’></button>

这里目标事件名是click。模板语句是name()

自定义事件：

该指令会创建一个eventEmitter并将其对外暴露为属性

然后该指令调用eventEmitter.emit(data)发出事件，传入消息数据，该消息数据可以是任何东西

父指令通过绑定到该属性来监听事件，并通过传入的$event对象接受数据

7  属性绑定

绑定类型（按数据流的方向）：从数据源到视图，从视图到数据源，双向

从数据源到视图：插值（{ { name }}），属性（[ ]=’ ’），Attribute（( bind-name )），Css类，样式

从视图到数据源：事件（ ( name )=’ ’或on-name=’ ’ ）

双向：[( name )]，bindon-name=’ ’

 

HTML的attribute和DOM的property（两个翻译起来都是属性）

Attribute：唯一作用的初始化元素和指令的状态

Property：模板绑定使用的是property和事件，而不是Atteibute，编写数据绑定时，你只是在和目标对象的DOM property和事件打交道

 

从Attribute页面导航到Property页面：

A <input>

              <input type="text" value="Sarah">

              HTML 的 value 这个 attribute 指定了初始值；DOM 的 value 这个 property 是当前值

B 禁用按钮

              Attribute： <button disabled>Test Button</button>

              property ：<input [disabled]="变量? true : false">

8  css样式的绑定：[class:样式]=”true”

9  父子指令以及组件之间共享数据

可以用@input()和Output()来实现

@input()允许父组件更新子组件中的数据

@Output