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

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