ionic3學習之路（三）

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) {}
           

、
            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包
           

、建立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 = ; i < ; 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);
            }
           

、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;
                }
            }
           

、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、類    略