Angular7 - 项目设置

在本章中，无涯教程将讨论有关Angular 7中的项目设置。

要开始进行项目设置，请确保已安装nodejs。 您可以使用节点–v 命令在命令行中检查节点的版本，如下所示-

如果您没有获得版本,请从其官方站点安装nodejs- https://nodejs.org/en /。

一旦安装了nodejs，npm也将随之安装。要检查npm版本，请在命令行中运行npm -v，如下所示-

因此，无涯教程有节点版本10和npm版本6.4.1。

要安装Angular 7,请转到站点 https://cli.angular.io 到安装Angular CLI。

您将在网页上看到以下命令-

npm install -g @angular/cli //安装 Angular的命令
ng new my-dream-app //项目名称
cd my-dream-app
ng serve

上面的命令有助于在Angular 7中进行项目设置。

将创建一个名为 projectA7 的文件夹，并安装 angular/cli ，如下所示-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/angular7/angular7-project-setup.html

来源：LearnFk无涯教程网

安装完成后，使用ng version命令检查安装的软件包的详细信息，如下所示-

它提供了Angular CLI的版本，打字稿版本以及Angular 7可用的其他软件包。

已经完成了Angular 7的安装，现在将从项目设置开始。

要在Angular 7中创建项目将使用以下命令-

ng new projectname

您可以使用选择的项目名称。现在让无涯教程在命令行中运行以上命令。

在这里，将项目名称用作angular7-app 。一旦运行命令，它将询问您有关路由的信息，如下所示:

键入y将路由添加到您的项目设置。

下一个问题是关于样式表的-

可用的选项有CSS，Sass，Less和Stylus。在上面的屏幕截图中，箭头在CSS上。要进行更改，您可以使用箭头键选择项目设置所需的一个。

项目 angular7-app 已成功创建。它安装了项目才能在Angular7中运行所需的软件包。现在切换到创建的项目，该项目位于目录 angular7-app 中。

使用给定的代码行在命令行中更改目录-

cd angular7-app

将使用Visual Studio Code IDE与Angular 7一起使用，您可以使用任何IDE，即Atom，WebStorm等。

要下载Visual Studio代码,请转到 https://code.visualstudio.com/并单击Windows下载。

单击" Windows下载"以安装IDE，然后运行安装程序以开始使用IDE。

将考虑 angular7-app 项目。打开 angular7-app ，然后查看文件夹结构。

现在有了项目的文件结构，使用以下命令编译项目:

ng serve

ng serve命令将构建应用程序并启动Web服务器。

当命令开始执行时，您将看到以下内容-

Web服务器在端口4200上启动。在浏览器中键入URL " http://localhost:4200 /" 并查看输出。编译项目后，您将收到以下输出-

在浏览器中运行网址 http://localhost:4200/后，您将被定向到以下屏幕-

现在进行一些更改以显示以下内容-"Welcome to Angular 7!"

无涯教程对文件 app.component.html 和 app.component.ts 进行了更改。将在后续章节中讨论更多有关此的内容。

完成项目设置。如果您看到正在使用端口4200，这是angular–cli在编译时使用的默认端口。您可以根据需要使用以下命令更改端口-

ng serve --host 0.0.0.0 –port 4205

目前，如果您在编辑器中打开package.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 install命令。

• tsconfig.json - 它基本上包含编译期间所需的编译器选项。

• tslint.json - 这是配置文件，其中包含在编译时要考虑的规则。

src/ 文件夹是主文件夹，它在内部具有不同的文件结构。

app

它包含下面描述的文件。这些文件默认情况下由angular-cli安装。

app.module.ts

如果打开文件，您将看到代码引用了导入的不同库。 Angular-cli已使用以下默认库进行导入: angular/core，platform-browser。

可以看到还添加了 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]                      - 导入模块。BrowserModule是从@angular/platform-b​​rowser中导入。

    [Providers]                   - 这将引用创建的服务。

    [Bootstrap]                   - 这引用了创建的默认组件，即AppComponent。

    [app.component.css]  - 您可以在此处编写CSS。现在，将背景颜色添加到div中，如下所示。

该文件的结构如下-

.divdetails {
   background-color: #ccc; 
}

app.component.html

该文件中将提供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>

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

您可以将images ， 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>

main.ts

main.ts是开始项目开发的文件。 首先从导入需要的基本模块开始。 现在，如果您看到angular/core，angular/platform-browser-dynamic，默认情况下，在angular-cli安装和项目设置过程中会导入app.module和environment。

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内部引用main.ts，它在执行以下代码时调用父模块(即AppModule)-

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

调用AppModule时，它将调用app.module.ts，后者进一步基于引导程序调用AppComponent，如下所示:

bootstrap: [AppComponent]

在 app.component.ts 中，有一个selector: app-root ，该selector用于index.html文件。这将显示 app.component.html 中存在的内容。

以下将在浏览器中显示-

polyfill.ts

这主要用于向后兼容。

styles.css

这是项目所需的样式文件。

test.js

在这里，将处理用于测试项目的单元测试用例。

tsconfig.app.json

在编译过程中使用它，它具有运行应用程序所需的配置详细信息。

tsconfig.spec.json

这有助于维护测试的详细信息。

typings.d.ts

它用于管理Typescript定义。

最终文件结构如下-