Angular 源代码结构备忘录

1 年 ago

韵, 科

2 minutes

备忘录

简单的东西

使用札記

用語説明モジュールAngularアプリの構成部品を束ねる
コンポーネントやサービスを内包する
起動時に呼び出されるモジュールをルートモジュール or メインモジュールと呼ぶコンポーネントページを構成するUI部品を定義するデコレータークラスやプロパティ、メソッド、引数に対して構成情報を付与するための仕組み

コンポーネント:

图像

注解/辣酱

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <!-- このmy-appに挿入される -->
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

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

import { AppComponent } from "./app.component";
import { AppComponentDetail1 } from "./app.component_detail1";
import { AppComponentDetail2 } from "./app.component_detail2";

@NgModule({
  //imports: 現在のモジュールで利用する他のモジュール
  imports: [BrowserModule],
  // declarations: 現在のモジュールに属するコンポーネント
  declarations: [AppComponent, AppComponentDetail1, AppComponentDetail2],
  // アプリで最初に起動すべき最上位のコンポーネント
  bootstrap: [AppComponent],
})
export class AppModule {}


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

@Component({
  // selector: コンポーネントを適用すべき要素を表すセレクター式
  selector: "my-app",
      // template: コンポーネントを適用すべきビュー
  template: `
    <h1>Hello {{ name }}</h1>
    <div>
      <my-app-detail1>...1</my-app-detail1>
      <my-app-detail2>...2</my-app-detail2>
    </div>
  `,
})
export class AppComponent {
  name = "Angular";
}

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

@Component({
  selector: "my-app-detail1",
  template: `<p>Detail-1</p>`,
})
export class AppComponentDetail1 {}

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

@Component({
  selector: "my-app-detail2",
  template: `<p>Detail-2</p>`,
})
export class AppComponentDetail1 {}

机构。

app-module定义了每个组件和根模块。