[NG2]20160806保哥 AngularJS2課程筆記

以下為去參加保哥課程的筆記

  1. 筆記
    1. class內的變數，可以直接在html利用{{}}輸出
      1. 例如
        export class AppComponent {
          title = 'app works!';
        }
        可以在app.component.html新增div tag，然後寫入{{title}}，這樣就可以把資料顯示出來
        例如
        <div>{{title}}</div>
        這樣就會顯示app works字串
    2. 顯示紅底字是beta11才有的問題
    3. app這個prefix的設定在angular-cli.json的defaults的物件
    4. css !important，會把上層的css蓋掉
    5. 用ng2下的tag都會加上component的專屬ID，這樣可以讓各component的互不影響
    6. 若要使用全域的css有下列作法
      1. 把css放在index.html
      2. 在component.ts設定(通常不這麼做)
    7. 在command line執行ng build -prod可以匯出目前的ng2檔案
      1. 比較重要的檔案會在body內顯示重要的script的js檔案，要複製過去才能使用
    8. *ngIf：會套用template標籤
    9. data是關鍵字不要亂用
    10. 盡量不要再view裡面宣告變數，最好在ts裡面宣告，再到view裡面使用
    11. pipe = 類似ng1的filter
  2. 練習01：將靜態頁面變成動態的 Angular 2 模組與範本
    1. 搬移index-blog.html的head區塊搬到index.html
    2. 搬移index-blog.html的body區塊搬到app.component.html (view)
  3. 練習02：將網頁頁首的部分建立成 HeaderComponent 元件
    1. 將header封裝成元件，讓app.component使用
    2. 使用command line執行ng g(general) c(component) header
    3. 將app.component.html的<head>放到header.component.html
    4. 在app.component.html輸入<app-header>
    5. 到app.component.ts，import header.component
      1. import { HeaderComponent } from './header';
    6. 在@Component的物件新增一個屬性directives，值是陣列
    7. directives屬性輸入HeaderComponent(為header.component的ClassName)
    8. @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css'],
      directives:[HeaderComponent]
      })
  4. 練習03：修改 HeaderComponent 的 selector 條件 ( .header ) ( <div class="header"></div> )
    1. 在header.component的selector可以指定成class、id，例如selector: '.app-header'
    2. 在app.component的部分只要將<app-header>改成，<div class=“app-header”>，也可以正常運作
  5. 練習04：練習 Angular 2 資料繫結方法：內嵌繫結 ( interpolation )
    1. 在header.component內增加屬性，pageTitle = “The will will Web Test"
      1. 可以不用加型別，因為typescript會自動型別判定
    2. 到header.component.html把title換成{{pageTitle}}
  6. 練習05：練習 Angular 2 資料繫結方法：屬性繫結 ( Property Binding )
    1. <a [href]="pageTitleLink">
      1. 將href的屬性加上[]，這樣就不用加上{{}}
      2. pageTitleLink是header.component.ts的變數
  7. 練習06：練習 Angular 2 資料繫結方法：屬性繫結 ( Property Binding ) + DOM 屬性繫結 ( innerHTML )
    1. 如果要綁在某個tag上，利用innerHtml屬性處理，例如
      1. <h3 [innerHtml]="subTitle"></h3>
      2. subTitle = '記載著 <strong>Will</strong>  在網路世界的學習心得與技術分享';
  8. 練習07：了解 Angular 2 元件 CSS 樣式如何套用到頁面上
    1. 將class寫到header.component.css，例如.blus {color:blue;}，並將想調整的tag加上class
    2. 因為ng2下的tag都會加上component的專屬ID，這樣可以讓各component的互不影響
      1. 例如app.component.css內的class css不會影響到header.component.html的class
  9. 練習08：練習 Angular 2 資料繫結方法：事件繫結 ( Property Binding ) + DOM 屬性繫結 ( Event Binding )
    1. 先在html的tag加上(click)="plus($event)"
      1. $event固定
    2. 然後到ts內寫method
    3. plus(event:MouseEvent){
           this.num++;
       }
      1. event後面加上型別，可以讓ts知道event有什麼屬性可用
  10. 練習09：練習 Angular 2 資料繫結方法：雙向繫結 ( Two-way Binding )
    1. ng2的ng-model寫法如下
      1. <input type="text" placeholder="請輸入搜尋關鍵字" accesskey="s" (keyup)="search($event)" [(ngModel)]="keyword”>{{keyword}}
    2. 可以不宣告keyword這個變數在header.ts內
    3. [(ngModel)]由[ngModel] = “keyword” & (ngModelChange) = “keyword = $event"
  11. 練習10：練習 Angular 2 範本參考物件的用法 ( #name )
    1. 單向綁定的寫法，透過範本參考變數使用
    2. <input type="text" placeholder="請輸入搜尋關鍵字" accesskey="s" (keyup)="search($event,keywordInput)" #keywordInput>
      1. #keywordInput會是一個存在template內的變數，用來存取這個input的屬性
    3. search(event:KeyboardEvent,input:HTMLInputElement){
        this.keyword = input.value;
      }
      1. input的value像是$(input).val()的意思
      2. Keyboard,HTMLInputElement都是告知ts這個變數的可以有什麼屬性
  12. 練習11：練習 Angular 2 屬性型指令 (directives)：ngClass
    1. 先寫好css classname
    2. <h3 (click)="plus($event)" [innerHtml]="subTitle" [ngClass]="{blue: num%2==1,red:num%2==0}"></h3>
      1. 根據物件名稱例如 blue後的條件，決定要不要使用這個class
    3. 另一種寫法<h3 (click)="plus($event)" [innerHtml]="subTitle" [class.blue]="num%2==1" [class.red]="num%2==0"></h3>
  13. 練習12：練習 Angular 2 結構型指令 (directives)：ngIf
    1. <div *ngIf="num%2==1" id="social-icons" class="pull-right social-icon">
  14. 練習13：練習 Angular 2 結構型指令 (directives)：ngFor
    1. <article *ngFor="let item of data" class="post">
    2. <a href="" [innerHTML]="item.test"></a>
    3. <a href="" >{{item.test}}</a>
  15. 練習14：練習 Angular 2 的元件資料輸入機制 @Input()
    1. 在主要的html引用另一個component，例如<app-post [item]="data"></app-post>
      1. item是子層的component的變數，data是父層component的變數
    2. 子層的component，import { Component, OnInit,Input } from '@angular/core';
      1. Input是關鍵字，傳值的東西
    3. @Input() item:any;
      1. 這個寫法就會將父層的data，指定成父層的data變數
  16. 練習15：請將先前 App 元件的 ngFor 迴圈改成 Article 元件 + ngFor 迴圈 + 傳入單一文章物件到 Article 元件裡
    1. <app-post [item]="data"></app-post>
  17. 練習16：
    1. Output：回傳資料
    2. EventEmitter：送資料回去
      doSearch(event:KeyboardEvent,input:HTMLInputElement){
      if(event.keyCode == 13){
             this.keyword = input.value;
             this.search.emit(this.keyword);
           }
      }
    3. 範例：@Output() search = new EventEmitter();
    4. 父層html寫<app-search (search)="searchKeyword=$event"></app-search>
      1. search = 子層的變數
      2. searchKeyword = 父層的變數
      3. $event = 回傳值 = 第二點的this.search.emit(this.keyword);
  18. 練習17：注入器，共用service
    1. 利用@Injectable()，建立相依
    2. 到main.ts新增serviceProvider
    3. 到要共用service的component的import
    4. 在建構子設定
      constructor(private searchSearch: SearchService) {}
    5. 這樣就能共用該service.ts內的function及函式
  19. 練習18：利用ajax接值(GET)
    1. main.ts加入
      1. import { HTTP_PROVIDERS } from '@angular/http';
      2. bootstrap(AppComponent, [HTTP_PROVIDERS]);
    2. 到要使用ajax的component加入
      1. import { Http } from '@angular/http';
      2. constructor(private http: Http) {
           http.get('/api/articles.json').subscribe((value) => {
             this.data = this.defaults = value.json();
           });
        } 

留言

  1. Unknown2017年5月18日 晚上8:54

    可以問一下...
    5. 用ng2下的tag都會加上component的專屬ID，這樣可以讓各component的互不影響
    這點是甚麼意思嗎?

    回覆刪除
    回覆
    1. 1232017年6月20日 晚上8:33

      抱歉有點晚才回覆，這課程是去年上的，印象有點模糊

      我印象中是這樣的

      ng底下的每個component都有自己專用到ID，是由ng產生的，這樣可以避免html的dom不會互相影響

      刪除

張貼留言