Angular 6 - 项目设置

上一页
下一页

AngularJS 基于模型-视图-控制器，而 Angular 4 基于组件结构。Angular 6 使用与 Angular 4 相同的结构，但速度更快。

Angular 6 使用 TypeScript 2.9 版本，而 Angular 4 使用 TypeScript 2.2 版本。这在性能方面带来了很大的差异。

为了安装 Angular 6，Angular 团队推出了 Angular CLI，它简化了安装过程。您需要运行一些命令来安装 Angular 6。

访问此网站 https://cli.angular.io 安装 Angular CLI。

Angular CLI

要开始安装，我们首先需要确保已安装最新版本的 nodejs 和 npm。npm 包与 nodejs 一起安装。

访问 nodejs 网站 https://node.org.cn/en/。

Download NodeJs

建议用户使用最新版本的 Nodejs v8.11.3。已经安装了高于 8.11 版本的 nodejs 的用户可以跳过上述步骤。安装 nodejs 后，可以使用命令 node -v 在命令行中检查 node 的版本，如下所示：

node -v
v8.11.3

命令提示符显示 v8.11.3。安装 nodejs 后，npm 也会随之安装。

要检查 npm 的版本，请在终端中输入命令 npm -v。它将显示 npm 的版本，如下所示。

npm -v
v5.6.0

npm 的版本是 5.6.0。现在我们已经安装了 nodejs 和 npm，让我们运行 angular cli 命令来安装 Angular 6。您将在网页上看到以下命令：

npm install -g @angular/cli //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serve

让我们从命令行中的第一个命令开始，看看它是如何工作的。

首先，我们将创建一个空目录，在其中运行 Angular CLI 命令。

npm install -g @angular/cli //command to install angular 6

我们创建了一个名为 ProjectA4 的空文件夹并安装了 Angular CLI 命令。我们还使用了 -g 参数全局安装 Angular CLI。现在，您可以在任何目录或文件夹中创建您的 Angular 4 项目，并且不必逐个项目安装 Angular CLI，因为它已全局安装在您的系统上，您可以从任何目录中使用它。

现在让我们检查 Angular CLI 是否已安装。要检查安装情况，请在终端中运行以下命令：

ng -v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

我们获得了 @angular/cli 版本，目前是 6.1.3。运行的 node 版本是 8.11.3，以及操作系统详细信息。上述信息告诉我们我们已经成功安装了 angular cli，现在我们准备开始我们的项目了。

我们现在已经安装了 Angular 6。现在让我们在 Angular 6 中创建我们的第一个项目。要在 Angular 6 中创建项目，我们将使用以下命令：

ng new projectname

我们将项目命名为 ng new Angular6App。

现在让我们在命令行中运行上述命令。

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

项目 Angular6App 成功创建。它安装了项目在 Angular 6 中运行所需的所有必需软件包。现在让我们切换到创建的项目，该项目位于 Angular6App 目录中。在命令行中更改目录 - cd Angular 6-app。

我们将使用 Visual Studio Code IDE 来处理 Angular 6；您可以使用任何 IDE，例如 Atom、WebStorm 等。

要下载 Visual Studio Code，请访问 https://vscode.js.cn/ 并点击 下载 Windows 版。

Visual Studio Code

点击 下载 Windows 版 安装 IDE 并运行安装程序以开始使用 IDE。

编辑器如下所示：

Angular CLI Editor

我们还没有在其中启动任何项目。现在让我们使用 angular-cli 创建的项目。

Angular6App Project

现在我们有了项目的文件夹结构，让我们使用以下命令编译我们的项目：

ng serve

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

** Angular Live Development Server is listening on localhost:4200, open your browser on https://:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Web 服务器在端口 4200 上启动。在浏览器中输入 URL https://:4200/ 并查看输出。您将被重定向到以下屏幕：

Angular App

现在让我们进行一些更改以显示以下内容：

"欢迎使用 Angular 6 项目"

Angular 6 Project

我们对 app.component.html 和 app.component.ts 文件进行了更改。我们将在后续章节中详细讨论这一点。

让我们完成项目设置。如果您看到我们使用了端口 4200，这是 angular-cli 在编译时使用的默认端口。如果您愿意，可以使用以下命令更改端口：

ng serve --host 0.0.0.0 -port 4205

Angular 6 应用程序文件夹具有以下 文件夹结构：

  • e2e - 端到端测试文件夹。主要用于集成测试，并有助于确保应用程序正常工作。

  • node_modules - 安装的 npm 包位于 node_modules 中。您可以打开文件夹并查看可用的软件包。

  • src - 我们将在其中使用 Angular 4 处理项目的文件夹。

Angular 6 应用程序文件夹具有以下 文件结构：

  • .angular-cli.json - 它主要包含项目名称、cli 版本等。

  • .editorconfig - 这是编辑器的配置文件。

  • .gitignore - 应将 .gitignore 文件提交到存储库中，以便与克隆存储库的任何其他用户共享忽略规则。

  • karma.conf.js - 用于通过量角器进行单元测试。karma.conf.js 文件中提供了项目所需的所有信息。

  • package.json - package.json 文件指示在运行 npm install 时将哪些库安装到 node_modules 中。

目前，如果您在编辑器中打开该文件，您将看到其中添加了以下模块。

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

如果您需要添加更多库，您可以在此处添加它们并运行 npm install 命令。

  • protractor.conf.js - 这是应用程序所需的测试配置。

  • tsconfig.json - 它主要包含编译期间所需的编译器选项。

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

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

app

它包含以下文件。这些文件默认由 angular-cli 安装。

  • app.module.ts - 如果您打开该文件，您将看到代码引用了导入的不同库。Angular-cli 使用这些默认库进行导入 - angular/core、platform-browser。名称本身解释了库的用法。

它们被导入并保存到诸如 declarations、imports、providers 和 bootstrap 这样的变量中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

declarations - 在 declarations 中，存储对组件的引用。Appcomponent 是在启动新项目时创建的默认组件。我们将在另一节中学习如何创建新组件。

imports - 这将包含如上所示导入的模块。目前，BrowserModule 是导入的一部分，它从 @angular/platform-browser 导入。

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 class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src =    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

这是项目创建时当前可用的默认 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 = 'app';
}

Assets

您可以在此文件夹中保存图像、js 文件。

Environment

此文件夹包含生产或开发环境的详细信息。该文件夹包含两个文件。

  • environment.prod.ts
  • environment.ts

这两个文件都包含有关是否应在生产环境或开发环境中编译最终文件的详细信息。

Angular 4 应用程序文件夹的其他文件结构包括以下内容：

favicon.ico

这是一个通常位于网站根目录的文件。

index.html

这是在浏览器中显示的文件。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.ac.cn/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.ac.cn/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <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 和 environment 在 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);

platformBrowserDynamic().bootstrapModule(AppModule) 包含父模块引用 AppModule。因此，当它在浏览器中执行时，调用的文件是 index.html。index.html 内部引用 main.ts，当以下代码执行时，main.ts 调用父模块，即 AppModule：

platformBrowserDynamic().bootstrapModule(AppModule);

当调用 AppModule 时，它会调用 app.module.ts，然后根据引导程序调用 AppComponent，如下所示：

bootstrap: [AppComponent]

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

浏览器将显示以下内容：

App Module

polyfill.ts

这主要用于向后兼容性。

styles.css

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

test.ts

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

tsconfig.app.json

这在编译期间使用，它包含运行应用程序需要使用的配置详细信息。

tsconfig.spec.json

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

typings.d.ts

它用于管理 TypeScript 定义。

打印页面

上一页
下一页
广告
© . All rights reserved.