源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] 详解如何构建Angular项目目录结构

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-7-13 09:52:02 | 显示全部楼层 |阅读模式
本篇文章主要介绍了详解如何构建Angular项目目录结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的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程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。

这里写图片描述 

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

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

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

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

这里写图片描述

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

/*这里是从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):用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

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

这里写图片描述

下面我们来看看模块文件

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

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

这里写图片描述

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

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

回复

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2022-11-16 00:47:27 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2022-11-16 02:44:46 | 显示全部楼层
谢谢分享,先下来用用
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2023-2-8 08:37:13 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2023-5-26 08:08:14 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2023-5-28 10:00:50 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2023-8-16 07:45:49 | 显示全部楼层
看看看咋么
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

163

积分

注册会员

Rank: 2

积分
163
发表于 2023-11-17 15:10:47 | 显示全部楼层
谢谢小Y分享
TS人妖演出表演服务q3268336102电话13168842816
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-11-22 15:46:32 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-22 01:38:49 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 16:05 , Processed in 0.074321 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表