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(),与前面的输入属性相对的,定义一个其他组件感兴趣的事件或者在组件间共享数据


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部