Angular7：项目配置
在本章中，我们将讨论Angular 7中的项目设置。要开始安装项目，请确保您已经安装了nodejs。您可以使用命令node–v检查命令行中的node版本，如果你没有得到版本可以从https://nodejs.org/下载安装包安装node。
通过npm命令安装Angular 7，命令如下：
npm install -g @angular/cli
安装完成后， 就可以创建项目，我们将使用以下命令
ng new projectname
您可以使用您选择的项目名称。现在让我们在命令行中运行上面的命令。
这里，我们使用angular7-app作为项目名字。
ng new angular7-app
运行该命令后，它会询问您有关路由的信息，按y即可。接下来是问采用哪种形式的样式，选择CSS即可。
angular7-app项目已成功创建。它安装了我们项目在Angular7运行所需的所有软件包。现在让我们切换到创建的项目，它在angular7-app目录中。
使用下面的命令进入angular7-app。
cd angular7-app
现在我们已经有了项目的文件结构，让我们用下面的命令编译我们的项目
ng serve
ng serve命令构建应用程序并启动网络服务器。启动成功后，您将看到以下内容。
服务器默认从端口4200启动。在浏览器中键入URL“http://localhost:4200/”，并查看输出。项目编译完成后，您将收到以下输出
在浏览器中运行网址http://localhost:4200/后，您将会看到以下画面。
让我们完成项目设置。angular默认使用了端口4200，这是angular-CLI编译时使用的默认端口。如果您希望更改端口，可以使用以下命令。
ng serve --host 0.0.0.0 –port 4205
angular7-app/文件夹具有以下文件结构
e2e/ ：端到端测试文件夹。e2e主要用于集成测试，有助于确保应用程序正常工作。
node_modules/： 安装的npm包是node_modules。您可以打开文件夹并查看可用的包。
src/： 这个文件夹是我们使用角度7进行项目的地方。在src/中，您将在项目设置期间创建应用程序/文件夹，并保存项目所需的所有文件。
angular.json：它基本上包含项目名称、cli版本等。
.editorconfig： 这是编辑器的配置文件。
.gitignore：应该将.gitignore文件提交到存储库中，以便与克隆存储库的任何其他用户共享忽略规则。
package.json：package.json文件告诉您在运行npm安装时哪些库将被安装到node_modules中。
目前，如果您在编辑器中打开文件包. json，您将在其中添加以下模块。
"@angular/animations": "~7.2.0", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26"
如果您需要添加更多库，您可以在这里添加这些库并运行npm安装命令。
tsconfig.json −这基本上包含编译期间所需的编译器选项。
tslint.json：这是一个配置文件，其中包含编译时要考虑的规则。
src/文件夹是主文件夹，内部有不同的文件结构。
app文件夹
它包含下面描述的文件。默认情况下，这些文件由angular-cli安装。
app.module.ts
如果打开app.module.ts文件，您将看到代码引用了不同的库。Angular-cli已将这些默认库导入:angular/core, platform-browser。
库名称本身解释了库的用途。它们被导入并保存到变量中，如declarations, imports, providers和bootstrap。
我们可以看到app-routing.module已经被添加。这是因为我们在安装开始时就选择了路由。该模块由@angular/cli添加。
以下是文件的结构
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }@NgModule从@angular/core导入，它具有以下属性的对象。
Declarations：在声明中，对组件的引用被存储。应用组件是每当启动项目时创建的默认组件，我们将在后面学习如何创建新组件。
Imports：这将导入如上所示的模块。目前，浏览器模块是从@angle/platform-browser导入的导入的一部分。还添加了路由模块。
Providers：引用创建的服务。该服务将在下一章讨论。
Bootstrap：引用了创建的默认组件，即AppComponent。
app.component.css：你可以在这里写你的css。现在，我们已经将背景色添加到div中，如下所示。
.divdetails {
background-color: #ccc;
}app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
<h1>Welcome to {{ title }}!</h1>
<img width = "300" alt = "Angular Logo"
src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
DQwLjl6IiAvPgogIDwvc3ZnPg=="7>
</div>
<h2>Here are some links to help you start:</h2>
<ul>
<li>
<h2><a target = "_blank" rel = "noopener"
href = "https://angular.io/tutorial">Tour of Heroes</a>
</h2>
</li>
<li>
<h2><a target = "_blank" rel = "noopener"
href = https://angular.io/cli">CLI Documentation</>
</h2>
</li>
<li>
<h2><a target = "_blank" rel = "noopener"
href = "https://blog.angular.io/">Angular blog</a>
</h2>
</li>
</ul>
<router-outlet></router-outlet>这是项目创建时的默认html文件。
app.component.spec.ts
这是自动生成的文件，包含源组件的单元测试。
app.component.ts
组件的类在这里定义。您可以在.ts文件中处理html结构。处理将包括诸如连接到数据库、与其他组件交互、路由、服务等活动。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 7';
}app-routing.module.ts
该文件将处理项目所需的路由。它与主模块相连，即app.module.ts。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Assets文件夹
您可以将图像、js文件保存在此文件夹中。
Environment
此文件夹包含生产或开发环境的详细信息。该文件夹包含两个文件。
environment.prod.ts
environment.ts
这两个文件都详细说明了最终文件应该在生产环境还是开发环境中编译。
angular7-app/文件夹的附加文件包括以下内容。
favicon.ico
这是一个通常在网站根目录中找到的文件。
index.html
这是浏览器中显示的文件。
<html lang = "en"> <head> <meta charset = "utf-8"7gt; <title>Angular7App</title> <base href = "/"> <meta name = "viewport" content = "width=device-width, initial-scale=1"> <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
主体具有<app-root></app-root>。这是在app.component.ts文件中使用的选择器，将显示来自app.component.html文件的详细信息。
main.ts
main.ts是我们开始项目开发的文件。它从导入我们需要的基本模块开始。现在，如果您看到angular/core, angular/platform-
browser-dynamic, app.module和环境，默认情况下会angular-cli安装和项目设置期间导入。
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));platformBrowserDynamic().bootstrapModule(AppModule)具有父模块引用AppModule。因此，当它在浏览器中执行时，该文件被称为index.html。Index.html内部指的是主模块，当以下代码执行时，主模块调用父模块，即AppModule。
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
当调用AppModule时，它调用app.module.ts，后者根据引导程序进一步调用AppComponent，如下所示。
bootstrap: [AppComponent]
在app.component.ts中，index.html文件中使用了selector: app-root 。这将显示app.component.html的内容。
polyfill.ts
这主要用于向后兼容。
styles.css
这是项目所需的样式文件。
test.ts
这里，将处理用于测试项目的单元测试用例。
tsconfig.app.json
这在编译期间使用，它具有运行应用程序所需的配置细节。
tsconfig.spec.json
有助于维护测试的细节。
typings.d.ts
它用于管理Typescript定义。