Angular 6 项目配置
AngularJS基于模型视图控制器,而Angular 4基于组件结构。Angular 6在与Angular 4相同的结构上工作,但是与Angular 4相比更快。
Angular6使用TypeScript 2.9版本,而Angular 4使用TypeScript 2.9版本。这给性能带来了很大的差异。
上一章中我们介绍了如何安装Angular 6的环境,如果要验证是否成功安装了Angular CLI请在终端中运行以下命令
ng -v
当我们安装好了Angular CLI,就可以使用ng命令创建和管理Angular项目了。执行如下命令:
ng new myproject
我们将为这个项目命名myproject,执行上述命令即可成功安装,新版本的Angular CLI会询问2个问题,一个是否开启Angular路由,默认可以选择否,另外一个询问样式表的格式,默认CSS即可。
当项目成功创建完成,我们切换到项目所在的目录:
cd myproject
此时我们可以直接运行项目。
ng serve
看到上面的画面说明项目已经成功创建,后面我们会对目录结构进行讲解。
另外,本次教程我们使用的IDE工具为Visual Studio Code,您也可以使用任何其他的IDE工具。要下载Visual Studio Code,请转到https://code.visualstudio.com/。
我们现在可以看到文件项目的大文件结构。
目录结构
e2e:端到端的测试目录,用来做自动化测试
node_modules:第三方依赖包存放目录
src:应用源代码目录
angular.json:Angular命令行工具的配置文件,后期可能会修改它,引一些其他的第三方的包,比如jquery等
.editorconfig:编辑器的配置文件
.gitignore:git的配置文件
package.json:标准的npm工具的配置文件,文件里列出了该应用程序所用的第三方依赖包,我们在建项目初始化是就是在下载这些包,放在了node_modules这个目录中。
README.md:说明文件
tslint.json:是tslint的配置文件,用来定义TypeScript代码质量检查的规则
src目录
app:包含应用的组件和模块,我们要写的代码都在这个目录里
assets:资源目录,存放静态资源,比如图片
environments:环境配置,angular支持多环境开发,比如开发环境、测试环境、生产环境公用一套代码,用来配置环境
index.html:整个应用的根html,程序启动首先访问这个页面
main.ts:整个项目的入口点,angular通过这个文件启动项目
polyfills.ts:主要用来导入一些必要库,为了让angular能够在老版本浏览器下正常运行
styles.css:放全局样式
test.ts:也是自动化测试用的
tsconfig.app.json:TypeScript编译器的配置,添加第三方依赖时会修改。
tsconfig.spec.json:帮助维护测试的细节。
typings.d.ts:用于管理TypeScript定义。
app目录
一个Angular程序至少需要一个模块和一个组件。在新建项目时已经生成了。
app.component.ts:这个便是组件,组件是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的html
app.module.ts:这个表示模块