ionic UI(4)ionic2 framework - basic and components and native

ionicUI(4)ionic2framework-basicandcomponentsandnative

JustcreateatutorialprojectwithTypeScript

>ionicstartmyionic2project2tutorial--v2--ts

>ionicserve

Visitthepage

http://localhost:8100/

ErrorMessage:

ERRORin[default]/Users/carl/work/hybrid/myionic2project2/node_modules/angular2/src/facade/promise.d.ts:1:9

Cannotre-exportnamethatisnotdefinedinthemodule.

Solution:

Nosolutionyet

waitingthiswebsitetoupgradehttps://github.com/driftyco/ionic2-app-base.angular2isstillbeta.

1ProjectStructure

app/app.tsistheentrypointforourapp.

DefinitionaboutApp

@App({

templateUrl:'build/app.html',

config:{}//http://ionicframework.com/docs/v2/api/config/Config/

})

./app/app.html-isthemaintemplateHTML.

2AddingPages

<ion-navid="nav"[root]="rootPage"#contentswipe-back-enabled="false"></ion-nav>

[root]meansthefirstpage

IntheTScode

rootPage:any=HelloIonicPage;

Thispageisdefinedhere

import{HelloIonicPage}from'./pages/hello-ionic/hello-ionic';

Eachpagehasitsownfolder.Itcontains.html,.scssand.ts

import{Page}from'ionic-angular';

@Page({

templateUrl:'build/pages/hello-ionic/hello-ionic.html'

})

exportclassHelloIonicPage{}

@PagedecoratorfromangularJS,Everypageshouldhaveahtmltemplateandaclass.

Navigationbar

<ion-navbar*navbar>

NavigatingtoPages

this.nav.push(),itworkslikeasimplestack.

http://ionicframework.com/docs/v2/components/#navigation

UIcomponents

http://ionicframework.com/docs/v2/components/

3Components

http://ionicframework.com/docs/v2/components/

ActionSheets-optionbuttons

Alert-Basicalertinformation,

PromptAlertInformation-askusertoinput

ConfirmAlert

RadioAlert-Selecttheoptionyouwant

CheckboxAlert-Selecttheoptionsyouwant

Badges-showthenumber,likehowmanylikes

Buttons-ButtonsinComponents

Cards-Displaycontents-list;Imageslist;Backgroundimageslist;

Checkbox-

Grid-

Icons-listalltheicons

http://ionicons.com/

Inputs-floatinglabelinput;

Lists-ListDividers;iconsList-settingpages;avatarlistwithsmallicons;multiplelinelistswithsmallicons;Thumbnaillistwithsmalliconsandbuttons

Menus-

Modals-useforloginorsignup,itisanewpage

Navigation-

Radio-

SearchBar-

Segments-itlooksliketabs

Select-Slidesforthefirstfewscreens.

Tabs-icontabs;iconsandtexts;

Badges-shownumbersonthetabsicons

Toggle-checkbox

Toolbar-canbeusedasaheaderofourapps;buttonsintoolbar;segmentsandbuttonsintoolbar;

4Native

ActionSheet-nativeoptions;

AppAvailability-checkifanappisinstalledonthismobiledevice;

Badge-badgelikeunreadmessageontheiconofapplication;

BarcodeScanner-opencameraandscanthebarcodeandreturnthedata;

BLE-SupportforiOSandAndroid-oh.

Calendar-Addeventtothecalendar

Camera-photoorvideo

Clipboard-

Contacts-manageandaccesscontacts

Device-getdeviceUUIDandotherdeviceinformation

Geolocation-GPSandrelatedGEOinformation

ImagePicker-

LocalNotifications-

Push-pushnotification

Splashscreen-

AppRate-rateyourappplugin

AppVersion-readtheappversion

Base64toGallery-savebase64datatophotos?

BatteryStatus-

DatePicker-

DeviceMotion-

DeviceOrientation-compass

Dialogs-nativedialog

Facebook-

Flashlight-

Globalization-

Hotspot-

Keyboard-

Navigator-

SMS-textmessage

StatusBar-

Toast-

TouchID-

Vibration-

References: