详解如何构建Angular项目目录结构


Posted in Javascript onJuly 13, 2017

在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用。

首先看一下整体的目录结构:

详解如何构建Angular项目目录结构

可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的

首层目录:

node_modules    第三方依赖包存放目录
e2e         端到端的测试目录 用来做自动测试的
src         应用源代码目录 
.angular-cli.json  Angular命令行工具的配置文件。后期可能会去修改它,引一些其他的第三方的包 比如jquery等
karma.conf.js    karma是单元测试的执行器,karma.conf.js是karma的配置文件
package.json    这是一个标准的npm工具的配置文件,这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候,等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中,后期我们可能会修改这个文件。
protractor.conf.js 也是一个做自动化测试的配置文件
README.md      说明文件
tslint.json     是tslint的配置文件,用来定义TypeScript代码质量检查的规则,不用管它

src目录:

app目录        包含应用的组件和模块,我们要写的代码都在这个目录
assets目录      资源目录,存储静态资源的 比如图片
environments目录   环境配置。Angular是支持多环境开发的,我们可以在不同的环境下(开发环境,测试环境,生产环境)共用一套代码,主要用来配置环境的
index.html     整个应用的根html,程序启动就是访问这个页面
main.ts       整个项目的入口点,Angular通过这个文件来启动项目
polyfills.ts    主要是用来导入一些必要库,为了让Angular能正常运行在老版本下
styles.css     主要是放一些全局的样式
tsconfig.app.json  TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.spec.json 不用管
test.ts       也是自动化测试用的
typings.d.ts    不用管

app目录(重点)

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。

一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。

详解如何构建Angular项目目录结构 

app.component.ts:这个文件表示组件,

组件是Angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的Html

我们来看看app.component.ts中的代码,并解释下代码的意义

下图是源代码,我只是把title的值给改了下

详解如何构建Angular项目目录结构

来看看每行代码的意义,有点乱,可以复制到编辑器上去看。

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
 /*组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
 * selector就是css选择器,表示这个组件可以通过app-root来调用,index.html中有个<app-root>Loading...</app-root>标签,这个标签用来展示该组件的内容
 *templateUrl 组件的模板,定义了组件的布局和内容
 *styleUrls  该模板引用那个css样式
 * */
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类,但是上面的组件元数据装饰器告诉Angular,AppComponent是一个组件,需要把一些元数据附加到这个类上,Angular就会把AppComponent当组件来处理*/
export class AppComponent {
 /*这个类实际上就是该组件的控制器,我们的业务逻辑就是在这个类中编写*/
 title = '学习Angular';
}

组件相关的概念:

1.组件元数据装饰器(@Component)

简称组件装饰器,用来告知Angular框架如何处理一个TypeScript类.

Component装饰器包含多个属性,这些属性的值叫做元数据,Angular会根据这些元数据的值来渲染组件并执行组件的逻辑

2.模板(Template)

我们可以通过组件自带的模板来定义组件的外观,模板以html的形式存在,告诉Angular如何来渲染组件,一般来说,模板看起来很像html,但是我们可以在模板中使用Angular的数据绑定语法,来呈现控制器中的数据。

3.控制器(controller)

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

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

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

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

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

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

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

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

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

详解如何构建Angular项目目录结构

下面我们来看看模块文件

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

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

详解如何构建Angular项目目录结构

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 #Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 #Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 #Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 #Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 #Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JavaScript类的写法
2016/09/17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
区域销售经理职责
2013/12/22 职场文书
《钱学森》听课反思
2014/03/01 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
党课心得体会范文
2014/09/09 职场文书
承兑汇票延期证明
2015/06/23 职场文书
请病假条范文
2015/08/17 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
JS Object构造函数之Object.freeze
2021/04/28 Javascript