ionic UI(4)ionic2 framework - basic and components and native
Just create a tutorial project with TypeScript
> ionic start myionic2project2 tutorial --v2 --ts
> ionic serve
Visit the page
http://localhost:8100/
Error Message:
ERROR in [default] /Users/carl/work/hybrid/myionic2project2/node_modules/angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.
Solution:
No solution yet
waiting this website to upgrade https://github.com/driftyco/ionic2-app-base. angular2 is still beta.
1 Project Structure
app/app.ts is the entry point for our app.
Definition about App
@App({
templateUrl: 'build/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
./app/app.html - is the main template HTML.
2 Adding Pages
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
[root] means the first page
In the TS code
rootPage: any = HelloIonicPage;
This page is defined here
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
Each page has its own folder. It contains .html, .scss and .ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}
@Page decorator from angularJS, Every page should have a html template and a class.
Navigation bar
<ion-navbar *navbar>
Navigating to Pages
this.nav.push(), it works like a simple stack.
http://ionicframework.com/docs/v2/components/#navigation
UI components
http://ionicframework.com/docs/v2/components/
3 Components
http://ionicframework.com/docs/v2/components/
Action Sheets - option buttons
Alert - Basic alert information,
Prompt Alert Information - ask user to input
Confirm Alert
Radio Alert - Select the option you want
Checkbox Alert - Select the options you want
Badges - show the number, like how many likes
Buttons - Buttons in Components
Cards - Display contents - list ; Images list; Background images list;
Checkbox -
Grid -
Icons - list all the icons
http://ionicons.com/
Inputs - floating label input;
Lists - List Dividers; icons List - setting pages; avatar list with small icons; multiple line lists with small icons; Thumbnail list with small icons and buttons
Menus -
Modals - use for login or sign up, it is a new page
Navigation -
Radio -
SearchBar -
Segments - it looks like tabs
Select - Slides for the first few screens.
Tabs - icon tabs; icons and texts;
Badges - show numbers on the tabs icons
Toggle - checkbox
Toolbar - can be used as a header of our apps; buttons in toolbar; segments and buttons in toolbar;
4 Native
ActionSheet - native options;
App Availability - check if an app is installed on this mobile device;
Badge - badge like unread message on the icon of application;
Barcode Scanner - open camera and scan the barcode and return the data;
BLE - Support for iOS and Android - oh.
Calendar - Add event to the calendar
Camera - photo or video
Clipboard -
Contacts - manage and access contacts
Device - get device UUID and other device information
Geolocation - GPS and related GEO information
Image Picker -
Local Notifications -
Push - push notification
Splash screen -
App Rate - rate your app plugin
App Version - read the app version
Base64 to Gallery - save base64 data to photos?
Battery Status -
Date Picker -
Device Motion -
Device Orientation - compass
Dialogs - native dialog
Facebook -
Flashlight -
Globalization -
Hotspot -
Keyboard -
Navigator -
SMS - text message
StatusBar -
Toast -
TouchID -
Vibration -
References:
http://sillycat.iteye.com/blog/2285319