ionic2学习资料-经验总结

使用fontawesomeUse

UseFontAwesomeIconsInYourIonic2AndroidAndiOSApp
但是7.3号的文章，现在的并么有ionic.config.js文件。从gulp到rc0的npmscript之后，配置文件不方便修改。所以使用font-awesome就把整个文件夹复制到assets然后手动链接css，好处是可以push到github方便云端同步。

ionic2使用第三方库，js模块的下载和声明，declariton.d.ts

视频上面的是可以提示第三方库js的函数和方法名，这个比较方便（目前又变了），目前还不同于angular2
typingsinstall

样式默认直接添加到组件（比较方便）

ionic2路由——>导航

详细博客教程

Whenshouldyoupushandwhenshouldyousettherootpage? Atfirst,itmaybehardtounderstandwhetheryoushouldsettherootpagetonavigatetoadifferentpageorpushtheview.Ingeneral,iftheviewyouwanttoswitchtoisachildofthecurrentview,orifyouwanttheabilitytonavigatebacktothepreviousviewfromthenewview,youshouldpush.Forexample,ifIwasviewingalistofartistsandtappedononeIwouldwanttopushthedetailspageforthatartist.IfIwasgoingthroughamulti-pageformandclicked‘Next’togotopage2oftheform,Iwouldwanttopushthatsecondpage.

Iftheviewyouareswitchingtoisnotachildofthecurrentview,oritisadifferent_section_oftheapplication,thenyoushouldinsteadchangetherootpage.Forexample,ifyouhavealoginscreenthatleadstothemainapplicationyoushouldchangetherootpagetobeyourmainloggedinviewoncetheuserhassuccessfullyauthenticated.IfyouhaveasidemenuwiththeoptionsDashboard,Shop,AboutandContactyoushouldsettherootpagetowhicheverofthesetheuserselects.

Keepinmindthattherootpageisdifferenttotherootcomponent,typicallytherootcomponent(whichisdefinedinapp.component.ts)willdeclarewhattherootpageis–therootpagecanbechangedthroughouttheapplication,therootcomponentcannot.

不同页面传输数据passdatabetweenpages

上层页面

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

下层也页面

import{Component}from'@angular/core';
import{NavController,NavParams}from'ionic-angular';

@Component({
templateUrl:'second-page.html'
})
exportclassSecondPage{
name:string;
constructor(publicnavCtrl:NavController,publicnavParams:NavParams){

}
this.name=this.navParams.get('thing1');
}

然后可以在ts里面使用，也可以在htm数据模板里面{{}}以及各种绑定数据来使用，当然用setRoot时也一样可以使用

mvcmvvm-angular2

angular2mvvm理解http://lib.csdn.net/article/a...

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

实例讲解

CreatetheDataModel

Createanewfileatapp/models/checklist-model.tsandaddthefollowing

exportclassChecklistModel{

constructor(publictitle:string,publicitems: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);
}
}

}
}

Ifyou’vealreadybeenplayingaroundwithIonic2,thenthisshouldlookprettysimilartoothercomponentsyou’vebeencreating.We’recreatinganewclass(forthoseunfamiliarwithclasses,aclassislikeablueprinttocreateinstancesofobjects–youcancreatemanyobjectsfromthesameclassdefinition,whichisexactlywhatwewillbedoing).
Theclasshasaconstructorwhichisruneachtimeitisusedtoinstantiateanobject,andwe’reusingittosetupsomedatalikethetitleandanyitemspassedinorjustanemptyarrayforitems.Withtheconstructorsetupthiswaywecaneithercreateanewdatamodellikethis:

newChecklistModel('mychecklist',itemsArray);

ThenwehaveouraddItemandremoveItemfunctionsdefined,whichmanipulatetheitemsarrayforus.

Youcantakethisevenfurtherthoughandaddsomeextrahelperfunctionslikethis:

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!