2.3 探索Angular

下面来观察一下这个新建的hello-world应用。

2.3.1 src文件夹

应用的代码都位于src文件夹中。所有的Angular组件、模板、样式、图片，以及用户的应用所需的任何东西都在这里。除这个文件夹外的文件都是为构建应用提供支持用的。

src目录结构如下：

其中，各文件的用途见表2-1。

2.3.2 根目录

src文件夹是项目的根文件夹之一。其他文件是用来帮助用户构建、测试、维护、文档化和发布应用的。它们存在于根目录下，和src文件夹平级。具体结构如下：

其中，各文件的用途见表2-2。

2.3.3 npm包

Angular CLI、Angular应用及Angular本身都依赖于很多第三方包所提供的特性和功能。这些都是npm包。

可以使用“npm”命令来安装这些npm包，“npm”命令也是一个Node.js应用。这些npm包被放置在node_modules目录下，可能会包含10个、上百个甚至上千个文件。

使用“npm”命令所安装的包都记录在package.json文件中。当使用Angular CLI的“ng new”命令时，会给项目创建一个默认的package.json文件。这个package.json文件中带有一些起步包，这些包可以很好地协同，并可用于大量常见的应用场景。

以下是hello-world应用的package.json文件内容。

在package.json文件中可以看到，Angular应用主要分为以下两类包。

1.dependencies 包

dependencies包下包括以下内容。

● Angular包：Angular的核心和可选模块，它们的包名以“@angular/”开头。

● 支持包：那些Angular应用运行时必需的第三方库。

● 腻子脚本：负责抹平不同浏览器的JavaScript实现之间的差异。

2.devDependencies 包

devDependencies包下包括以下内容。

●@angular/cli：Angular的命令行工具。

●@angular/compiler-cli：Angular的编译器，它会被Angular CLI的“build”和“serve”命令调用。

●@angular/language-service：Angular的语言服务会分析组件模板，并且提供类型信息和错误信息，那些支持TypeScript的编辑器可以使用它们来提升开发体验。比如，Visual Studio Code的Angular语言服务扩展包。

●@types/...：第三方库（比如Jasmine和Node.js）的TypeScript类型定义文件。

● codelyzer：专用于Angular应用的linter，它的规则适用于Angular的风格指南。

● jasmine-...：Jasmine测试库的支持包。

● karma-...：Karma测试运行器的支持包。

● protractor：适用于Angular应用的端到端（e2e）框架。基于WebDriverJS构建。

● ts-node：TypeScript的运行环境，以及在Node.js环境下使用的REPL。

● tslint：一个静态分析器，用来检查TypeScript代码的可读性、可维护性和功能方面的错误。

● typescript：TypeScript语言服务，包括TypeScript编译器tsc。

提示：

随着应用的成长，你可能还会往package.json文件中添加更多包，同时也可能会移除一些包。 sv5IQYQ/vRqNv8dGDazhqDZYinBkSPZ6NPscwq4vilfYqLjjgIpoia4wEXgvylcU