Angular2入門系列教程2-項目初體驗-編寫自己的第一個組件

　　上一篇 使用Angular-cli搭建Angular2開發環境

　　Angular2采用組件的編寫模式，或者說，Angular2必須使用組件編寫，沒有組件，你甚至不能將Angular2項目啟動起來

　　緊接着上一篇 環境搭建 的文章，我們這一篇來討論Angualr2的項目結構和幾本組件的編寫模式

　　

 

　　Angular-cli.json里面配置了項目的幾本信息，包括版本名字之類的

　　package.json 是npm包配置

　　tslint你可以自行百度下，是一種標准化代碼檢查的東西

　　其他的不用特別去關心，我們項目的核心在於src文件夾，里面包括了我們初始化的東西，下面我們簡單介紹下

　　index.html 我想不用過多解釋，首頁

　　polyfills.ts 這里面放項目所必須的第三方js,angular-cli監理的項目里面包括了一些東西，不用關系，之后要用到的其他js庫可以直接在這里面添加

　　main.ts 項目的啟動，這里面的代碼也不用特別關心

　　在app文件夾下有一系列代碼，其中就有app.module.ts;angular-cli建立的項目是由這里指定啟動的組件的

　　

　　這里我們就可以開始接觸Angular2的組件了

　　我們打開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 works!';
}

　　@Component是一個Angualr2的裝飾器，它告訴Angular下面的類是一個Angular2的組件，

　　selector選擇器表示你之后再html代碼里將以什么名字使用這個組件

　　templateUrl表示組件的html代碼，這里也可以使用template：`<div>123</div>`來使用內聯模板

　　styleUrls是樣式地址數組，也可以使用 styles:['h1{font-size:28px;}']

　　而下面的類就是就是組件的類，可以定義組件的行為等

　　我們來編寫一個簡單的組件

　　重新編寫app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '論樓主';
  words:Array<string>=[
    '哦，聽說樓主很帥？',
    '是嗎，沒見過啊',
    '真的真的，那天去軟件園看到的'
  ];

}

重新定義了一個words的屬性，類型為Array<string>(這列建議先去了解一下TypeScript,不了解也沒太大關系，有一點兒基礎就能看懂吧)　　

app.componnet.html

<h1>
  {{title}}
</h1>
<div class="container">
  <ul>
  <li *ngFor="let word of words">
    <p>{{word}}</p>
  </li>
</ul>
</div>

這里用到了angular指令*ngFor 效果是遍歷屬性，然后下面{{}}為插值表達式，將屬性值顯示出來 *ngFor的效果就是 ES6的for of 語法效果，

這里強烈建議大家連接一下Angular2模板語法　

　app.component.css

ul{
    list-style-type: none;
}
p{
    padding:10px;
}
.container{
    margin:0px auto;
    max-width: 1280px;
    text-align: center;
}
h1{
    text-align: center;
}

　　Angualr2的組件樣式只會應用到相應的組件上面，不會對其他的組件樣式產生影響

 

　　下面看看效果圖

　　結束語：這一篇我們只是簡單介紹了下Angular2的一些東西，簡單編寫了一個組件而已，在后面的學習過程中會用到很多其他的概念，模板語法，依賴注入等，遇到的時候會解釋一下

下一篇應該講 多個組件了吧

更新ing。。。