`
sillycat
  • 浏览: 2550908 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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
分享到:
评论

相关推荐

    Angular-ionic-native-http-connection-backend.zip

    Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...

    ionic-native-http-connection-backend:Ionic和iOS的CORS问题的解决方案

    ionic-native-http-connection-backend 该库添加@ionic-native/http (如果可用)作为与Angular的Http和HttpClient的连接后端 动机 现在,Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ,Ionic已通过其...

    ionic-framework-master.zip

    "ionic-framework-master.zip" 文件很可能包含了Ionic Framework的源代码仓库,通常用于开发和学习。 在解压"ionic-framework-master"后,我们可以期待找到以下关键组成部分: 1. **项目结构**:在根目录下,通常...

    Ionic.2.Cookbook.2nd.Edition.epub

    Leverage Angular 2 events and Ionic-specific events to communicate About the Author Hoc Phan is a technologist with a wide range of experiences in frontend development, cloud computing, and big data. ...

    Mobile App Development with Ionic 2

    Author Chris Griffith takes you step-by-step through Ionic’s powerful collection of UI components, and then helps you use it to build three cross-platform mobile apps. Whether you’re new to this ...

    ionic3蓝牙程序(typescript+html语言)

    在TypeScript文件中,引入`@ionic-native/ble`库: ```typescript import { Ble } from '@ionic-native/ble'; ``` 然后,通过构造函数注入Ble服务: ```typescript constructor(private ble: Ble) {} ``` 现在,你...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **Web Components**:一套用于构建可复用UI组件的标准API,可以在Ionic 2中使用。 #### Ionic 2基础知识 - **安装Ionic**:通过npm(Node Package Manager)安装Ionic CLI,这是开始新项目的基础步骤。 - **生成...

    week-5-ionic-native-christopherjacksonjr:week-5-ionic-native-christopherjacksonjr由GitHub Classroom创建

    在本项目"week-5-ionic-native-christopherjacksonjr"中,我们聚焦于使用Ionic Native库在TypeScript环境中构建原生移动应用。这个项目可能是由GitHub Classroom创建的一个教学资源,旨在帮助开发者掌握如何利用...

    前端-ionic-官网教程学习项目photo-gallery

    【标题】"前端-ionic-官网教程学习项目photo-gallery"是一个基于Ionic框架的前端应用示例,主要用于展示如何使用Ionic进行照片画廊的开发。这个项目可能是为了帮助开发者熟悉Ionic框架,尤其是涉及到UI组件和媒体...

    Ionic开发APP之启动时白屏,如何处理.zip

    在开发基于Ionic框架的应用程序时,开发者可能会遇到一个常见的问题:APP在启动时出现白屏现象。这不仅影响用户体验,也可能让初次接触Ionic的人感到困惑。本文将详细讲解如何处理这个困扰,主要针对 Ionic App 的...

    ionic sublime 2/3 提示插件 ionic-sublime-plugin

    当我们结合两者,通过"ionic-sublime-plugin"插件,可以进一步提升对Ionic项目的开发体验。 该插件是专为Sublime Text 2和3设计的,意味着无论你使用的是哪个版本的Sublime,都可以无缝地集成此插件,享受其带来的...

    Ionic Framework by Example

    2. **Ionic Framework的特点** - **CSS特性**:Ionic提供了丰富的CSS样式和组件,包括按钮、列表、表格、卡片等,可以轻松实现美观的用户界面设计。 - **JavaScript特性**:Ionic基于AngularJS或Angular构建,内置...

    ionic配合ion-nav-bar的导航右侧按钮指令

    ionic1 嵌套路由,用ion-nav-bar和ion-view来实现页面回退,导致不能个性化的设置导航右侧按钮,这个指令基于angular1实现个性化定制右侧按钮,

    ionic-native-google-maps:适用于Ionic Native的Google地图插件

    @ ionic-native / google-maps(v5.27.0) @ ionic-native / google-maps插件是用于Ionic框架的的包装器插件。 Ionic Native将插件回调包装在Promise或Observable中,为所有插件提供通用接口,并使其易于使用带有...

    ionic-datepicker-oysq

    "ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件,它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架,用于构建跨平台的混合移动应用。它提供了丰富...

    react-native-vs-ionic-todos, 比较本机和离子 2的简单应用程序.zip

    react-native-vs-ionic-todos, 比较本机和离子 2的简单应用程序 React vs 离子 2这里是一个( 非常) 简单的非持久性待机应用程序,它在两个离子 2中实现,为。本机响应代码在这里: rn/TodoApp 。js 。要尝试:cd rn...

    ionic-color-and-image-selector:离子的颜色和图像选择器

    ionic start ionic-color-and-image-selector blank的唯一更改是在pages / home和src / assets / imgs文件夹中。 将图像放在src / assets / imgs文件夹中。 更新home.ts和home.scss中的颜色和图像名称。 更新home...

    Mastering Ionic 2: The Definitive Guide [2017]

    Mastering Ionic 2 takes you through working with the Ionic 2 framework on a step-by-step basis from basic concepts and core technologies through to developing fully functional mobile apps with 3 ...

    Ionic Framework.pptx

    详述ionic3的开发流程 目录结构: 1、Ionic Framework简介 ...4、Ionic-UI 组件 5、Ionic-Native 6、Ionic 常见问题 注:本文档创作过程主要是根据项目实战做出的总结,但也借鉴了前贤的著作,若有侵权请联系删除。

Global site tag (gtag.js) - Google Analytics