更新框架：

meteor update

meteor框架的优点不言而喻，它大大减轻了App前后端开发的负担，今年5月又获得B轮2000万融资，代表了市场对它一个免费、开源开发框架的肯定。cordova的优点就是插件多，ionic的优点是UI漂亮并且性能是目前hybird框架中最好的，本文涉及到的技术为作者所用，简述meteor+cordova+ionic的整合方法。

1，创建项目

meteor create projectName

cd [projectName]

meteor add urigo:angular

meteor add urigo:ionic

2，[projectName].html

<head>
    <title>ionic todo example</title>
</head>

<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>

3，tags.ng.html

<ion-tabs class="tabs-positive tabs-icon-only">

    <ion-tab title="Home" href="#/tab/home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">

        <ion-nav-view name="home-tab"></ion-nav-view>

        <!-- Tab 1 content -->

    </ion-tab>

    <ion-tab title="About"  href="#/tab/home2" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" >

        <ion-nav-view name="home-tab2"></ion-nav-view>

        <!-- Tab 2 content -->

    </ion-tab>

</ion-tabs>

4，states config code

    app.config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider

            .state('tabs', {

                url: "/tab",

                abstract: true,

                templateUrl: "tabs.ng.html"

            })

            .state('tabs.home', {

                url: "/home",

                views: {

                    'home-tab': {

                        templateUrl: "home.ng.html",

                        controller: 'HomeTabCtrl'

                    }

                }

            })

            .state('tabs.home2', {

                url: "/home2",

                views: {

                    'home-tab2': {

                        templateUrl: "home2.ng.html"

                    }

                }

            });

        $urlRouterProvider.otherwise("/tab/home");

    })

5，app init的代码

if (Meteor.isClient) {

    var app = angular.module('starter', [

        'angular-meteor',

        'ui.router',

        'ionic'

    ]);

...

6，添加inappbrower plugin

meteor add cordova:org.apache.cordova.inappbrowser@https://github.com/meteor/cordova-plugin-inappbrowser/tarball/8012ae709bb749eaad434c05cd7e2aeda8f3a425

格式：meteor add cordova:pluginName@https://github.com/myName/prjName/tarball/SHA-ID

其中tarball/后面是SHA1，在github的每次提交中可以查看到：

可以直接点图标copy。

meteor add-platform ios

meteor run ios

6，移除cordova plugin的语法

meteor remove cordova:org.apache.cordova.inappbrowser

7，inappbrower的用法

详见https://github.com/meteor/cordova-plugin-inappbrowser

示例源码：http://vdisk.weibo.com/s/ao-ZYIoZdaz86

附效果图：

在meteor中如何使用ionic组件tabs，及如何添加使用cordova plugin inappbrower的更多相关文章

  1. Yii Framework 开发教程Zii组件-Tabs示例

    有关Yii Tab类: http://www.yiichina.com/api/CTabView http://www.yiichina.com/api/CJuiTabs http://blog.cs ...

  2. [.Net Core] 在 Mvc 中简单使用日志组件

    在 Mvc 中简单使用日志组件 基于 .Net Core 2.0,本文只是蜻蜓点水,并非深入浅出. 目录 使用内置的日志组件 简单过渡到第三方组件 - NLog 使用内置的日志 下面使用控制器 Hom ...

  3. ionic的tabs

    <ion-tabs class="tabs-icon-top/bottom(决定这个tabs是置于上面还是底部)  tabs-color-active-positive(图标与字体色) ...

  4. 一个Angular模块中可以声明哪些组件？

    一个Angular模块中可以声明哪些组件? (1) controller        控制器 (2) directive                指令 (3) function         ...

  5. C#操作word或excel及水晶报表，检索 COM 类工厂中 CLSID 为 {} 的组件时失败，原因是出现以下错误: 80070005

    解决办法一:<转自http://www.cnblogs.com/Sue_/articles/2123372.html> 具体解决方法如下: 1:在服务器上安装office的Excel软件. ...

  6. .net开发中常用的第三方组件

    .net开发中常用的第三方组件 2013-05-09 09:33:32|  分类: dotnet |举报 |字号 订阅     下载LOFTER 我的照片书  |   RSS.NET.dll RSS. ...

  7. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  8. Delphi 在线程中如何使用TClientSocket组件并自动检测该组件

    在线程中如何使用TClientSocket组件并自动检测该组件的事件?我想在一个线程中动态创建一个TClientSocket组件,并要求该组件能够自动检测Socket事件(例如OnRead.OnErr ...

  9. SSIS中执行SQL任务组件参数传递的问题

    原文:SSIS中执行SQL任务组件参数传递的问题 症状: 执行SQL任务,传递参数到子查询中,执行报错. 错误: 失败,错误如下:"无法从使用 sub-select 查询的 SQL 语句中派 ...

随机推荐

  1. 应用OpenCV进行OCR字符识别

    opencv自带一个字符识别的例子,它的重点不是OCR字符识别,而主要是演示机器学习的应用.它应用的是UCI提供的字符数据(特征数据). DAMILES在网上发布了一个应用OpenCV进行OCR的例子 ...

  2. GLES & Shader Language 易错集锦

    1. vertex shader 和 fragment shader 通过varying变量传递数据,  如下代码在编译fragment shader时候会提示编译错误 vertex shader F ...

  3. windows内核对象可以等待

    内核对象有两种状态 触发 与未触发. 是可以等待的.

  4. C# 发送邮件方法2

    一. 发送邮件程序:(使用System.Web.Mail下的类) "; //SMTP服务密码 strFrom = "jailu@163.com"; //发送方邮件地址 C ...

  5. ruby中symbol

    Symbol 是什么 Ruby 是一个强大的面向对象脚本语言(本文所用 Ruby 版本为1.8.6),在 Ruby 中 Symbol 表示“名字”,比如字符串的名字,标识符的名字. 创建一个 Symb ...

  6. HTTP协议概述

    虽然cURL支持多种协议,但日常我们最常用的还是HTTP协议,下文中着重介绍HTTP的相关使用方法,因此我们要对HTTP协议有所了解. HTTP,超文本传送协议,通过因特网传送万维网文档的数据传送协议 ...

  7. 2.3搭建Android应用程序开发环境

    1.安装Android SDK (1)首选下载Android SDK: (2)下载完成之后,在Ubuntu系统下进行解压: (3)解压完成之后,配置环境变量: ①用vim打开/etc/profile文 ...

  8. Android IOS WebRTC 音视频开发总结（四六）-- 从另一个角度看国内首届WebRTC大会

    文章主要从开发者角度谈国内首届WebRTC大会,支持原创,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help. -------------------- ...

  9. Android IOS WebRTC 音视频开发总结（十七）-- 调试技巧

    本文章主要介绍WEBRTC在各平台下调试或日志查看方式,以方便问题排查,包括BS,PC,Android,IOS(本系列文章转载请说明出处,博客园RTC.Blacker). 1,浏览器开发: 这种开发方 ...

  10. Android开发教程AnimationDrawable逐帧播放动画

    下面我们一起来看篇Android开发AnimationDrawable控制逐帧播放动画实现过程,希望文章对各位朋友带不一些帮助. 当我们点击按钮时,该图片会不停的旋转,当再次点击按钮时,会停止在当前的 ...