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
how-to-use-pipes-to-manipulate-data-in-ionic-2
how-to-create-a-directive-in-ionic-2-parallax-header
ionic-2-handling-a-simple-user-authorization
cordova组件的使用
一次编写,对安卓ios平台皆使用
Image picker
图标和启动界面(splash scrren)
国内外有专门的网站生成,抑或用ioinic resources