在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目，要想写项目，首先我们要先搞清楚项目的目录结构是怎样的，每个文件又有什么意义，文件中的代码又起到什么作用。 首先看一下整体的目录结构： [img]http://files.jb51.net/file_images/article/201707/201707130945329.png[/img] 可以看到，命令行工具自动生成了很多文件和目录，我们来说说这些目录是干什么的 [b]首层目录：[/b] [b]src目录：[/b] app目录（重点） app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。 一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。 [img]http://files.jb51.net/file_images/article/201707/2017071309453310.png[/img]   app.component.ts：这个文件表示组件， 组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html 我们来看看app.component.ts中的代码，并解释下代码的意义 下图是源代码，我只是把title的值给改了下 [img]http://files.jb51.net/file_images/article/201707/2017071309453311.png[/img] 来看看每行代码的意义，有点乱，可以复制到编辑器上去看。 组件相关的概念： [b]1.组件元数据装饰器（@Component） [/b] 简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类. Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑 [b]2.模板（Template） [/b] 我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。 [b]3.控制器（controller） [/b] 控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。 装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如： [b]输入属性（@inputs）:[/b]是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据 [b]提供器（providers）：[/b]这个是用来做依赖注入的 [b]生命周期钩子（LifeCycle Hooks）：[/b]一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期 [b]样式表：[/b]组件可以关联一些样式表 [b]动画（Animations）： [/b]Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等 [b]输出属性（@Outputs）：[/b]用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据 简单来说，组件的中关系就如下图所示 [img]http://files.jb51.net/file_images/article/201707/2017071309453312.png[/img] 下面我们来看看模块文件 app.module.ts：这个文件表示模块 与AppComponent类似，模块也需要装饰器来装饰。 [img]http://files.jb51.net/file_images/article/201707/2017071309453313.png[/img] 好了，新项目的目录结构就是这样! 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。