锐客网

前端|angular4 学习笔记一之主组件详解 app.component.ts

//整个应用的基础

import { Component } from '@angular/core'; //@Component元数据装饰器,用装饰器定义了一个组件,所有的组件都必须用一个@Component装饰器来注解 @Component({ selector: 'app-root', //这个组件可以通过app-root这个HTML标签来调用,,在这里面来展示组件的内容 templateUrl: './app.component.html', //指定了一个html文件作为组件的模板,最终app-root的位置将展示模板指定的html的内容,如果没有模板, 组件就不是组件,模板是组建的必备属性,该HTML定义用户最终看到的布局和内容 styleUrls: ['./app.component.css'] //指向了一组css文件,该文件中编写组件模板中要用到的样式 }) //定义了组建的控制器,控制器有个属性交title。控制器是指被@Component装饰器装饰的typeScript类。 它包含与模板相关的所有的属性和方法,与页面相关的大部分逻辑都是编写在这个控制器里面。 export class AppComponent { //AppComponent就是一个标准的typeScript类,类里面没有框架的痕迹,就是用装饰器将元数据附加到AppComponent类上, angular就知道AppComponent是一个组件了 title = 'Hello Yeastoday'; //属性值会被展示到模板中 } //元数据会告诉angular如何将一个typeScript类处理成一个angular的组件







// 1.组件元数据装饰器@Component,简称装饰器,用来告知angular框架如何处理一个typeScript类。 component装饰器包含多个属性,这些属性的值叫做元数据,angular会根据这些属性的值来渲染组件并执行组件的逻辑// 2.模板:通过组件自带的模板来定义组件的外观,模板是以HTML的形式存在,告诉angular应该如何来渲染组件,一般来说,模板看起来很像html,但是我们可以再模板中使用angular的数据绑定语法来呈现控制器中的数据 // 3.控制器【controller】:控制器就是普通的typeScript类,他会被@component装饰器来装饰,控制器会包含组件所有的属性和方法,绝大多数的页面逻辑都是写在控制器里,控制器通过数据绑定与模板来通讯,模板展现控制器的数据,控制器处理模板上发生的事件 //4.数据绑定{{title}},就是模板的各个部分与控制器的各个部分相互作用的一个机制,我们在模板中添加绑定标记,如何把二者联系起来{{title}}最常见的将控制器的值绑定到模板中的绑定方法,叫做差值表达式
//5.输入属性:@inputs(),用来接收外部传入的数据的,输入属性使得父组件直接传递数据给子组件,angular程序其实就是一个组件树,输入属性允许你在组件树中传递数据。
//6.提供器 providers,用来做依赖注入的。 //7.生命周期钩子 lifeCycle Hooks,在一个组件从创建到销毁的过程中有多个钩子可以被用来触发,来执行各种业务数据,举例,在一个组件被实例化的时候,执行一段初始化的逻辑,从后台读取数据进到组件里面去。
//8.样式表 styles,组件可以关联一些样式表文件,可选的
//9.动画 angular提供了一个动画包来张建组件的动画效果 //10.输出属性@Outputs(),与前面的输入属性相对的,定义一个其他组件感兴趣的事件或者在组件间共享数据



    前端 angular