开发学院

您的位置:首页>教程>正文

教程正文

Angular 4 项目配置

Angular 4 项目配置

  上一章中我们介绍了如何安装Angular 4的环境,如果要验证是否成功安装了Angular CLI请在终端中运行以下命令

ng -v

  当我们安装好了Angular CLI,就可以使用ng命令创建和管理Angular项目了。执行如下命令:

ng new myproject

  我们将为这个项目命名myproject,执行上述命令即可成功安装,新版本的Angular CLI会询问2个问题,一个是否开启Angular路由,默认可以选择否,另外一个询问样式表的格式,默认CSS即可。

  当项目成功创建完成,我们切换到项目所在的目录:

cd myproject

  此时我们可以直接运行项目。

ng serve

000_welcome.jpg

  看到上面的画面说明项目已经成功创建,后面我们会对目录结构进行讲解。

  另外,本次教程我们使用的IDE工具为Visual Studio Code,您也可以使用任何其他的IDE工具。

  我们现在可以看到文件项目的大文件结构。

001_project_dir1.jpg

目录结构

  •   e2e:端到端的测试目录,用来做自动化测试

  •   node_modules:第三方依赖包存放目录

  •   src:应用源代码目录

  •   angular.json:Angular命令行工具的配置文件,后期可能会修改它,引一些其他的第三方的包,比如jquery等

  •   .editorconfig:编辑器的配置文件

  •   .gitignore:git的配置文件

  •   package.json:标准的npm工具的配置文件,文件里列出了该应用程序所用的第三方依赖包,我们在建项目初始化是就是在下载这些包,放在了node_modules这个目录中。

  •   README.md:说明文件

  •   tslint.json:是tslint的配置文件,用来定义TypeScript代码质量检查的规则

src目录

002_project_src.jpg

  •   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:这个表示模块