Angular4第二週

1、第一天

1.1、路由知識梳理、理解

2、第二天

2.1、Angular4雙向資料繫結(Angular4中預設單向資料繫結，有時我們需要用到雙向資料繫結，一般有兩種情況)

    2.1.1、同一組件中，頁面與控制器進行雙向資料繫結，一般是表單控制元件。用法是在頁面的表單控制元件中新增
        [(ngModel)]=”控制器中的屬性”

    2.1.2、在子元件和父元件中使用。因為子元件和父元件進行通訊的話會有其自身的機制。即輸入屬性和輸出
        屬性（@Input和@Output）。所以在子元件中的控制器中使用輸入屬性和輸出屬性，輸出屬性的名稱是
        輸入輸入名稱再加上Change（這樣可以避免不用在父元件模板上新增自定義事件和在控制器中新增事件
        處理程式）。輸出屬性的用法就不多說了，（EventEmmiter物件）。然後在父元件模板引用子元件的
        標籤上新增[(輸入屬性名稱)]=“父元件控制器屬性名稱”，這樣既可。

2.2、http通訊模擬後臺資料庫訪問

    2.2.1、app.module.ts中

        2.2.1.1、import { HttpModule } from '@angular/http';

        2.2.1.2、imports: [
                    HttpModule,
                  ],

    2.2.2、需要用到的元件中ts檔案

        2.2.2.1、import { Http ,Response} from '@angular/http';

        2.2.2.2、constructor(public http:Http) {}
 

        2.2.2.3、
            listData: Object;
            printText(){
                this.http.request('http://127.0.0.1:8080/JsonGet/GetJson')
                .subscribe((res: Response) => {
                    this.listData = res.json();
                    console.log(this.listData);
                })
 
;
            }

    2.2.3、後臺建立名為JsonGet的web專案

        2.2.3.1、匯入/JsonGet/WebContent/WEB-INF/lib/gson-2.2.4.jar的jar包

        2.2.3.2、建立GetJson類（一個servlet類）

            protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
                Gson gson = new
 
 Gson();
                ArrayList<Users> arrayList = new ArrayList<Users>();
                for (int i = 0; i < 5; i++) {
                    Users user = new Users();
                    user.id = "this is id" + i;
                    user.name = "this is name" + i;
                    user.address.street = "this is street" + i;
                    user.address.city = "this is city" + i;
                    arrayList.add(user);
                }
                String str = gson.toJson(arrayList);
                // 設定跨域請求，否則無法訪問獲取資料
                response.setHeader("Access-Control-Allow-Origin", "*");
                response.getWriter().append(str);
            }

        2.2.3.3、Address實體類

            package cn.lz.servlet;

            public class Address {
                public String street;
                public String city;
                public String getStreet() {
                    return street;
                }
                public void setStreet(String street) {
                    this.street = street;
                }
                public String getCity() {
                    return city;
                }
                public void setCity(String city) {
                    this.city = city;
                }
            }

        2.2.3.4、Users實體類

            package cn.lz.servlet;

            public class Users {
                public String id;
                public String name;
                public Address address = new Address();
                public String getId() {
                    return id;
                }
                public void setId(String id) {
                    this.id = id;
                }
                public String getName() {
                    return name;
                }
                public void setName(String name) {
                    this.name = name;
                }
                public Address getAddress() {
                    return address;
                }
                public void setAddress(Address address) {
                    this.address = address;
                }
            }

        2.2.3.5、頁面中既可以引用了

            <button ion-button (click)="printText()">控制檯打印出資料</button>

            <ion-list *ngFor="let item of listData">
                <ion-item>
                    <ion-avatar item-left>
                        <img [src]="item?.url">
                    </ion-avatar>
                    {{item?.address?.street}}
                </ion-item>
            </ion-list>

3、第三、四天

3.1、部署檢視老師給的專案

    3.1.1、解壓檔案

    3.1.2、到node_modules目錄下把node-sass資料夾刪除。

    3.1.3、在專案目錄下執行npm install node-sass（後面會有一段錯誤，不用管它）

    3.1.4、執行ionic serve（能正確執行）。

    3.1.5、執行ionic cordova run android，會報找不到一個png圖片的錯。

    3.1.6、把那一堆圖片複製進去。

    3.1.7、執行ionic cordova run android，正確執行。

4、第五天

4.1、TypeScript學習

    4.1.1、基礎型別

        4.1.1.1、布林值boolean

        4.1.1.2、數字number（TypeScript裡的所有數字都是浮點數）

        4.1.1.3、字串string

        4.1.1.4、陣列

            4.1.1.4.1、 第一種，可以在元素型別後面接上 [] ：
                let list: number[] = [1, 2, 3];

            4.1.1.4.2、第二種方式是使用陣列泛型，Array<元素型別> ：
                let list: Array<number> = [1, 2, 3];

        4.1.1.5、元組 Tuple：
            元組型別允許表示一個已知元素數量和型別的陣列，各元素的型別不必相同
            let x: [string, number];
            x = ['hello', 10];

        4.1.1.6、列舉enum
            enum Color {Red, Green, Blue}
            let c: Color = Color.Green;

        4.1.1.7、Any
            let notSure: any = 4;
            notSure = "maybe a string instead";

        4.1.1.8、Void

        4.1.1.9、Null 和 Undefined

        4.1.1.10、Never
            never型別表示的是那些永不存在的值的型別

        4.1.1.11、型別斷言

            4.1.1.11.1、“尖括號”語法
                let someValue: any = "this is a string";
                let strLength: number = (<string>someValue).length;

            4.1.1.11.2、as語法
                let someValue: any = "this is a string";
                let strLength: number = (someValue as string).length;

    4.1.2、變數宣告    略

    4.1.3、介面    略

    4.1.4、類    略