详解如何构建Angular项目目录结构(2)

控制器就是一个普通的typescript类,他会被@Component来装饰,控制器会包含组件所有的属性和方法,绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯,模板展现控制器的数据,控制器处理模板上发生的事件。

装饰器,模板和控制器是组件的必备要素。还有一些可选的元素,比如:

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

提供器(providers):这个是用来做依赖注入的

生命周期钩子(LifeCycle Hooks):一个组件从创建到销毁的过程中会有多个钩子会被触发,类似于Android中的Activity的生命周期

样式表:组件可以关联一些样式表

动画(Animations): Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果,比如淡入淡出等

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

简单来说,组件的中关系就如下图所示

这里写图片描述

下面我们来看看模块文件

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

与AppComponent类似,模块也需要装饰器来装饰。

这里写图片描述

好了,新项目的目录结构就是这样!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjpyp.html