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

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