[Angular] 查看Angular应用程序的配置

3 年 ago
文, 翔
4 minutes

Angular相关自学复习的备忘录文章。这篇文章是前一篇的续篇。
上一篇文章简单介绍了用Angular CLI创建的项目结构，本次则继续讨论。

    • src/

index.html
main.ts

src/app

app.component.css
app.component.html
app.component.ts
app.module.ts

请检查其内容，并查看关于Angular应用程序（使用Angular创建的应用程序）的结构。
如果有错误或错误信息，请指出，非常感谢。

进行这项任务的环境

    • Windows10 Home 64bit

 

    • node v8.2.1

 

    • npm v4.0.5

 

    • angular/cli v1.2.6

 

    Angular v4.3.2

前提条件 tí

    • Angular CLI でプロジェクトを作成している

 

    プロジェクト作成直後の状態である

我们将从下一节开始查看之前提到的每个文件。

源文件/索引.html

首先从 index.html 开始浏览。
index.html 是启动 Angular 应用程序的主页，在项目刚创建后，代码如下所示。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</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-rootのタグはAngularアプリのルートコンポーネントを示します。これは後で説明するapp.component.tsで定義されたタグと関連付けられます。
言い換え：app-root标签表示Angular应用的根组件。它与后面提到的app.component.ts中定义的标签相链接。

    1. 首先，index.html 将作为主页加载。

 

    接下来，app.component.ts 将作为由 app-root 标签指定的组件加载。

成为一种流动。

那么，如果问“app-root必须作为固定值指定吗”，实际上并不是这样的，在这里指定的标签可以是任何东西，比如hoge或者bar都可以。简单来说，只要所定义的标签与index.html中指定的标签相匹配就可以了。

主要.ts

main.ts 是启动 Angular 应用的启动代码，其内容如下所示。

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);

在以下我只需要一個選項，用中文來表達這句話: 重點有三個.

    • import 文のブロック

 

    • if 文のブロック

 

    最終行

這樣能夠實現。接下來按順序來看。

导入文的块

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

在中文中直接解释以下内容，只需要一种选项：
通过impot命令将应用所需的模块导入到应用程序中。

enableProdMode

本番環境(product)用でアプリを起動する際に実行される
後述の if 文によるチェックで実行の是非が決まる

platformBrowserDynamic

ブラウザでアプリを起動するために用意された Angular 標準のモジュール

AppModule

Angular アプリの本体となるモジュール
後述の app.module.ts で定義されている

environment

環境設定ファイル
ここで定義されている production の値を後述の if文 でチェックする
true ならば本番環境､false ならば開発環境

如果这一块文本

if (environment.production) {
  enableProdMode();
}

检查应用程序是要在生产环境启动还是在开发环境启动。
检查的内容是在前面定义的环境(environment)中确认production的布尔值，如果为”真”，则判断为生产环境，并执行enableProdMode()来部署到生产环境。

最后的一行 de

platformBrowserDynamic().bootstrapModule(AppModule);

通过执行此行代码，Angular应用程序将启动。在这里，我们需要在platformBrowserDynamic().bootstrapModule()的参数中指定我们想要作为Angular应用程序启动的模块。在这里，我们指定了AppModule（实际位于src/app/app.module.ts）。

src/app/app.module.ts的原始路径可以用以下方式来简述：

app.module.ts 是 Angular 应用的根模块。
以下是刚创建项目后的代码。

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 { }

都可以提供三个要点。

    • import 文のブロック

@NgModule のブロック
クラス定義

现在，让我们按顺序来看一下。

导入文块。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

使用 import 语句导入应用程序所需的模块。
下面是每个模块的简要说明。

    • BrowserModule

Angular が提供する標準モジュール
アプリをブラウザ上で動作させるためのモジュール

NgModule

Angular が提供する標準モジュール
モジュールを定義するためのモジュール

AppComponent

Angular アプリの実体となるルートコンポーネント
実体は src/app/app.component.ts

@NgModule 的方块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

@NgModule 是一个装饰器，用于声明由在后述的 export 语句中定义的类的模块配置信息的外部可见性声明。
装饰器相当于Java的注解，用于提供添加配置信息的机制。
各个元素的说明如下。

    • declarations

現在のモジュールに属するコンポーネントを宣言

imports

ここで指定するモジュールは前述の import 文でインポートしていることが前提
現在のモジュールで使用する他のモジュールを宣言

providers

依存性注入
利用したいサービス(サービスについては本記事では触れない)を指定する
ここで指定するサービスは import 文でインポートしていることが前提
指定したサービスはモジュール全体でアクセス可能となる

bootstrap

ここで指定するコンポーネントは前述の import 文でインポートしていることが前提
アプリで最初に起動するコンポーネント(ルートコンポーネント)を指定する

类定义

export class AppModule { }

通过定义模块类并声明其对外部的公开，可以使其他类能够引用。前面的 @NgModule 附加了本模块的配置信息。

src/app/app.component.* 的原始代码。

can be found and viewed as app.component.* in HTML/CSS/TS.

    • app.component.html

コンポーネントのテンプレート

app.component.css

コンポーネントのデザイン

app.component.ts

コンポーネントのロジック

负责

组件模板.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" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+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.com/">Angular blog</a></h2>
  </li>
</ul>

重点在于{{title}}所在的h1标签。

  <h1>
    Welcome to {{title}}!
  </h1>

{{title}} 表示了一个称为单向数据绑定的机制。
被{{}}包围的字符串与后面提到的app.component.ts中声明的属性相链接，显示由ts文件中设置的值。
在这种情况下，由app.component.ts设置了字符串app，所以在浏览器上会显示Welcome to app！

组件的样式文件

/* 空(このコメントは本記事用に記載) */

这次是一个空文件，但是在这里定义的设计将会在 app.component.html 这个模板中反映出来。
正如之前的文章中提到的，这里定义的设计原则上只适用于定义的组件，不会与其他组件中定义的样式发生竞争或冲突。

app.component.ts 的内容

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

以下是要重点考虑的三个方面。

    • import 文

@Component ブロック
クラス定義

依次观看每一个。

导入文

import { Component } from '@angular/core';
    • Component

Angular が提供する標準モジュール
コンポーネントを定義するために必要なモジュール

@Component 块

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Component 是一个装饰器，它用于声明构成组件的信息，该组件是通过后面的 export 语句进行外部公开声明的类。每个构成元素的含义如下。

    • selector

本コンポーネントが外部から参照される際に指定されるタグを定義する
ここで定義されている app-root は index.html で指定され､読み込まれる

templateUrl

本コンポーネントの html テンプレートファイルのファイルパスを指定する

styleUrls

本コンポーネントの css ファイルパスを配列で指定する

班级定义

export class AppComponent {
  title = 'app';
}

在这个组件的实体中，是在app.module.ts中声明的AppComponent组件。
通过定义组件类并声明公开性，可以从其他类中引用。
虽然解释有点前后不一致，为了将其作为组件处理，需要通过前面提到的@Component装饰器声明组件的配置信息。
此外，通过app.component.html模板来处理单向数据绑定所需的属性title的声明和赋值。

最后

在之前的文章中，我简要地介绍了上述各个文件。我现在要介绍的是使用Angular CLI创建项目之后的初始状态，并且我个人认为以下内容适用于Angular应用。

    • Angular アプリはモジュールを作成して起動する

 

    • モジュールはコンポーネントによって形成される

 

    • コンポーネントは以下の3つによって形成される

テンプレート(*.html)
デザイン(*.css)
ロジック(*.ts)

在本篇文章中，我们只是简单介绍了Angular应用程序文件的结构和各个文件的内容，没有涉及到实际开发的进展。举例来说，由于Angular是前端框架，所以必须与后端进行交互；在创建多个组件的情况下，可能还会出现希望在各个组件之间共享数据的需求等等。虽然我们希望在以后的文章中讨论这些情况，但首先我们想要探讨的是组件的开发。

bannerAds