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

//整个应用的基础

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