ionic2-基於angular2的學習總結

 ionic2學習資料-經驗總結

 使用fontawesomeUse

Use Font Awesome Icons In Your Ionic 2 Android And iOS App
可是7.3號的文章，如今的並麼有ionic.config.js文件。從gulp到rc0的npm script以後，配置文件不方便修改。因此使用font-awesome就把整個文件夾複製到assets而後手動連接css，好處是能夠push到github方便雲端同步。

 ionic2使用第三方庫，js模塊的下載和聲明，declariton.d.ts 

視頻上面的是能夠提示第三方庫js的函數和方法名，這個比較方便（目前又變了），目前還不一樣於angular2 
typings install

 樣式默認直接添加到組件（比較方便）

 ionic2 路由——>導航 

 詳細博客教程

When should you push and when should you set the root page? At first, it may be hard to understand whether you should set the root page to navigate to a different page or push the view. In general, if the view you want to switch to is a child of the current view, or if you want the ability to navigate back to the previous view from the new view, you should push. For example, if I was viewing a list of artists and tapped on one I would want to push the details page for that artist. If I was going through a multi-page form and clicked ‘Next’ to go to page 2 of the form, I would want to push that second page.

---

If the view you are switching to is not a child of the current view, or it is a different _section_ of the application, then you should instead change the root page. For example, if you have a login screen that leads to the main application you should change the root page to be your main logged in view once the user has successfully authenticated. If you have a side menu with the options Dashboard, Shop, About and Contact you should set the root page to whichever of these the user selects.

---

Keep in mind that the root page is different to the root component, typically the root component (which is defined in app.component.ts) will declare what the root page is – the root page can be changed throughout the application, the root component can not.

 不一樣頁面傳輸數據 pass data between pages

上層頁面

this.navCtrl.push(SecondPage, {
    thing1: data1,
    thing2: data2
});

下層也頁面

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
 
@Component({
    templateUrl: 'second-page.html'
})
export class SecondPage {
    name:string;
    constructor(public navCtrl: NavController, public navParams: NavParams){
 
    }
    this.name=this.navParams.get('thing1');
}

而後能夠在ts裏面使用，也能夠在htm數據模板裏面{{}}以及各類綁定數據來使用，固然用setRoot時也同樣能夠使用

 mvc mvvm- angular2 

 angular2 mvvm理解 http://lib.csdn.net/article/a...

 how-to-create-a-data-model-in-ionic-2 (M)

 實例講解

Create the Data Model

Create a new file at app/models/checklist-model.ts and add the following

export class ChecklistModel {
 
    constructor(public title: string, public items: any[]){
 
    }
 
    addItem(item){
        this.items.push({
            title: item,
            checked: false
        });
    }
 
    removeItem(item){
 
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items.splice(i, 1);
            }
        }
 
    }
}

If you’ve already been playing around with Ionic 2, then this should look pretty similar to other components you’ve been creating. We’re creating a new class (for those unfamiliar with classes, a class is like a blueprint to create instances of objects – you can create many objects from the same class definition, which is exactly what we will be doing).  
The class has a constructor which is run each time it is used to instantiate an object, and we’re using it to set up some data like the title and any items passed in or just an empty array for items. With the constructor set up this way we can either create a new data model like this:

new ChecklistModel('my checklist', itemsArray);

Then we have our addItem and removeItem functions defined, which manipulate the items array for us.

You can take this even further though and add some extra helper functions like this:

export class ChecklistModel {
 
    constructor(public title: string, public items: any[]){
 
    }
 
    addItem(item){
        this.items.push({
            title: item,
            checked: false
        });
    }
 
    removeItem(item){
 
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items.splice(i, 1);
            }
        }
 
    }
 
    renameItem(item, title){
        for(i = 0; i < this.items.length; i++) {
            if(this.items[i] == item){
                this.items[i].title = title;
            }
        }
    }
 
    setTitle(title){
        this.title = title;
    }
}

Now we can also rename items and change the tile of the checklist. We could take this even further still and have an ItemModel model defined so that each item inside of the checklist is also a nice object that we can manage (this would make our ChecklistModel cleaner because we are still manually manipulating the items array here).

Import and Use the Data Model

Add the following to the top of the home.js file:

import {ChecklistModel} from '../../models/checklist-model';

then you can use it anywhere simply by using:

new ChecklistModel('my checklist');

how-to-create-a-sliding-delete-button-for-lists

實例博客教程

released-an-ionic-2-angular-2-application

比較專業的ionic2案列教程-學習都有哪些考慮的，好比htt取數據，list,grid佈局等等,modals等等

生成提交流程

how-to-use-pipes-to-manipulate-data-in-ionic-2

pipes編寫實例-官方api爲準，教程爲輔學習參考

how-to-create-a-directive-in-ionic-2-parallax-header

實例博客教程（綁定id實現的，angular2官網有單獨的屬性綁定的

ionic-2-handling-a-simple-user-authorization

涉及this.root=homePage formPage 登錄驗證的跳轉問題 localStorage的存取

cordova組件的使用

一次編寫，對安卓ios平臺皆使用

Image picker

圖標和啓動界面（splash scrren）

國內外有專門的網站生成，抑或用ioinic resources