masalibの日記

システム開発、運用と猫の写真ブログです

Angular:仕組みについてProjectProject

Angular(バージョン2以降)の勉強、その4です

100%の理解していないけど20〜30%の理解で進めています

今回は「自動的に作ってコンパイルについて」みたいな所を記載します
(ふわぁとしていてすいません)



初期でいれるとこんな形になります
(serverの部分はあとで記載する)
f:id:masalib:20170504184008j:plain


index.html



  <meta charset="utf-8">
  <title>Project</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


  <app-root>Loading...</app-root>

これがメインのテンプレートみたいです


コンパイルをすると一番最初にmain.tsが読み込まれるみたいです

f:id:masalib:20170504183156p:plain

でそのmainで指定されている
./app/app.module.tsを読み込みます

f:id:masalib:20170504184112p:plain

app.componentと記載されているので
./app/app.component.tsを読み込むみたい

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

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

「selector: 'app-root'」と部分でindex.htmlの
app-rootのタグと結びつけています


でテンプレートで指している
./app.component.htmlを読み込みます

<h3>I'm  in the AppComponer</h3>

ブラウザーでソースを表示すると
以下のような形になります



  <meta charset="utf-8">
  <title>Project</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


  <app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>

だけど実際の表示は以下のような形になります

f:id:masalib:20170504182150j:plain

デベロッパーツールで確認すると
htmlが動的に作られていることが確認できます

f:id:masalib:20170504182204j:plain

何か気が遠くなるような形ですが
angular v2or V4の基本みたいです

コンパイルの大雑把な感じだと

f:id:masalib:20170504190258p:plain

こんな感じでいいと思う
(細かい所はあとで勉強する形)


動的に書き換えるのが簡単にできたり
jsonデータを動的で取得が簡単にできたり
メリットがいっぱいあるみたいです

長くなりそうだけどがんばるぞ!!

次はcomponentについてです
masalib.hatenablog.com