Angular(バージョン2以降)の勉強、その4です
100%の理解していないけど20〜30%の理解で進めています
今回は「自動的に作ってコンパイルについて」みたいな所を記載します
(ふわぁとしていてすいません)
初期でいれるとこんな形になります
(serverの部分はあとで記載する)
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が読み込まれるみたいです
でそのmainで指定されている
./app/app.module.tsを読み込みます
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>
だけど実際の表示は以下のような形になります
デベロッパーツールで確認すると
htmlが動的に作られていることが確認できます
何か気が遠くなるような形ですが
angular v2or V4の基本みたいです
コンパイルの大雑把な感じだと
こんな感じでいいと思う
(細かい所はあとで勉強する形)
動的に書き換えるのが簡単にできたり
jsonデータを動的で取得が簡単にできたり
メリットがいっぱいあるみたいです
長くなりそうだけどがんばるぞ!!
Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング
- 作者: 末次章
- 出版社/メーカー: 日経BP社
- 発売日: 2017/01/18
- メディア: 単行本
- この商品を含むブログ (1件) を見る
次はcomponentについてです
masalib.hatenablog.com