极客教程Angular CLI Angular项目设置
Angular是一个前端框架，用于创建Web应用程序。它默认使用typescript来创建类的逻辑和方法，但浏览器并不了解typescript。在这里webpack出现了，webpack被用来将这些typescript文件编译成JavaScript。此外，在你的电脑上运行一个angular项目需要很多的配置文件。
Angular CLI是一个工具，在一些简单的命令中为你完成所有这些事情。Angular CLI使用webpack来完成所有这些过程。
注意：请确认你的系统中已经安装了node和npm。你可以使用以下命令来检查你的node版本和npm版本。
node --version
npm --version
使用angular CLI创建你的第一个应用程序的步骤：
- 第一步：安装angular cli
npm install - g @angular/cli
- 第二步：通过此命令创建新项目
在路由选项中选择 “是”，并选择CSS或SCSS。
ng new myNewApp
- 第三步：进入你的项目目录
cd myNewApp
- 第四步：运行服务器并查看你的应用程序的运行情况
ng serve -o --poll=2000
目录结构的介绍：
- e2e 它包含与自动化测试目的相关的代码。例如，如果你在某个页面上调用一个REST API，那么返回的状态代码应该是什么，是否可以接受等等。
- node_modules 它保存了所有的开发依赖（只在开发时使用）和依赖（用于开发以及在生产时需要），任何新的依赖在添加到项目时都会自动保存到这个文件夹。
- src 这个目录包含了我们所有与项目有关的工作，即创建组件、创建服务、为各自的页面添加CSS等等。
- package.json 这个文件存储了项目中添加和使用的库的信息，以及它们的指定安装版本。每当一个新的库被添加到项目中，它的名字和版本就会被添加到package.json中的依赖项中。
其他文件：作为一个初学者，你现在不需要这些文件，不用管这些。这些都是用于编辑器的配置和在编译时需要的信息。angular CLI中内置的webpack为你管理所有的东西。
在src文件夹内：
- index.html 这是应用程序的入口，app-root标签是这个单页应用程序的入口，在这个页面上，angular将添加或删除DOM中的内容，或将添加新的内容到DOM。Base href=”/”对于路由的目的很重要。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyNewApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favison.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
- style.scss 这个文件是全局样式表，你可以添加许多组件共有的CSS类或选择器，例如，你可以导入自定义字体，导入bootstrap.css，等等。
- 资产 它包含js图像、字体、图标和许多其他文件，用于你的项目。
在应用程序文件夹内：
- app.module.ts 一个angular项目是由许多其他模块组成的，为了创建一个应用程序，你必须在层次结构中为你的应用程序创建一个根模块。这个app.module.ts文件就是这样。如果你想在根层添加更多的模块，你可以添加。
- 声明 它是存储其组件的数组的引用。应用程序组件是创建项目时生成的默认组件。你必须把你的所有组件的引用添加到这个数组中，使它们在项目中可用。
- 进口 如果你想添加任何模块，无论是angular还是你必须把它添加到进口数组中，使它们在整个项目中可用。
- 提供者 如果你将为你的应用程序创建任何服务，那么你将通过这个提供者阵列把它注入你的项目。注入一个模块的服务对它和它在项目层次结构中的子模块都是可用的。
- bootstrap 这有对创建的默认组件的引用，即AppComponent
- app.component.html 编辑这个文件以对页面进行修改。你可以把这个文件作为一个HTML文件来编辑。直接使用div或任何其他在body标签内使用的标签，这些都是组件，不添加html head body标签。
<h1>
Hello world
</h1>
<div>
<p>
This is my First Angular app.
</p>
</div>
- app.component.spec.ts 这些是自动生成的文件，包含源组件的单元测试。
- app.component.ts 你可以对.ts文件中的HTML结构进行处理。处理将包括一些活动，如连接到数据库，与其他组件互动，路由，服务等。
- app.component.scss 这里你可以为你的组件添加CSS。你可以写scss，并通过转码器进一步编译成CSS。
你在项目工作中需要的更多命令：
ng generate component component_name
ng generate service service_name
ng generate directive directive_name