[初级编] 理解Angular4应用程序

3 年 ago

文, 翔

2 minutes

学习Angular4的备忘录

创建Angular4的初始模板

首先需要安装命令行或者Angular的cli。

npm install -g @angular/cli

随后，创建应用程序的模板。

ng new demo

检查已安装的 “package.json” 文件中的演示应用程序，确认是否安装了Angular 4系。

cd demo/
cat package.json

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },

对构成的理解

模块 – src/app/app.module.ts

以下列出的内容

准备模块类

// 1. Angularで利用するモジュールをインポート
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 2. AppComponentコンポーネントをインポート
//    この「AppComponent」は、次の章で説明するコンポーネント
import { AppComponent } from './app.component';

// 3. モジュールに関する情報を宣言
@NgModule({
  // モジュール配下のコンポーネント
  declarations: [
    AppComponent
  ],
  // 現在のモジュールで利用する他のモジュール／コンポーネント
  imports: [
    BrowserModule
  ],
  providers: [],
  // 最初に起動すべき最上位のコンポーネント（＝ルートコンポーネント）
  bootstrap: [AppComponent]
})

// 4. モジュールクラスを準備
export class AppModule { }

在Angular中，有一个关于第3个模块的信息，被称为装饰器。
这是一种用于给模块、类和其他元素添加元数据的机制。
（相当于Java中的注解）

可以在NgModule装饰器中使用的参数

パラメーター名概要imports現在のモジュールで利用する他のモジュール／コンポーネントexports現在のモジュールで外部に公開するコンポーネントなどdeclarationsモジュール配下のコンポーネントbootstrap最初に起動すべき最上位のコンポーネント（＝ルートコンポーネント）

组件 – src/app/app.component.ts

这个组件是应用程序启动时调用的根组件。

以下是所记载的四件事。

用于在视图中显示的值

// 1. コンポーネントで利用しているモジュールをインポート
import { Component } from '@angular/core';

// 2. コンポーネントに関する情報を宣言
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

// 3. コンポーネントクラス
export class AppComponent {
  // 4. ビューに表示するための値
  title = 'app';
}

值得注意的是，这里所指定的“app-root”是指在index.html文件的body中所包含的选取器。

<body>
  <app-root></app-root>
</body>

Component装饰器可用参数。

パラメーター名概要selectorコンポーネントの適用先を表すセレクター式templateUrlコンポーネントに適用するビュー（テンプレート）のファイルパスstyleUrlsコンポーネントに適用するビュー（テンプレート）のスタイルのファイルパス

利用4中的”用于在视图中显示的值”来反映在组件类中准备的属性等，以便将其应用于templateUrl。

启动文件- src/main.ts

// 1. アプリ起動に必要なモジュールをインポート
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// 2. 使用するモジュールをインポート
//    AppModuleは、先程説明にあったモジュール
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// プロダクション環境の場合は、Angularの開発モードをOFFにするための設定
if (environment.production) {
  enableProdMode();
}

// 3. モジュールを起動
platformBrowserDynamic().bootstrapModule(AppModule);

主页- src/index.html.

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Demo</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>

应用程序的启动

通过执行以下命令，可以利用webpack进行编译并在“localhost:4200”进行访问。

$ npm start

> demo@0.0.0 start ~/Workspace/sample/demo
> ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: a69317ad530fb3ed5838                                                              
Time: 9527ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

仅提供一种选择：借鉴

Angularの基本構造を理解して、アプリ開発を始めるには？