更新框架：

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. startup毕业论文

    今天起得相对比较晚,为的是一个没有目的面试,去了的结果.只是打击一下自己的自信心,走的时候,面试官冷冷的说了一句,你的面试到此结束,是的,我并没有很伤心,在门外等面试的时候,我就非常的后悔,今天是不该 ...

  2. hadoop的live node为0

    1.重新格式化namenode cd ~ rm -rf name mkdir name rm -rf hadoop-2.7.2/logs/ mkdir hadoop-2.7.2/logs/ hadoo ...

  3. OpenJudge 取数游戏

    描述 我们来玩一个游戏:自然数1到N,按顺序列成一排,你可以从中取走任意个数,但是相邻的两个不可以同时被取走.如果你能算出一共有多少种取法,那么你会被天神Lijiganjun奖励. 输入 仅包含一个数 ...

  4. 使用ffmpeg快速生成视频截图

    1 ffmpeg -i input.mkv -ss 00:10:00 -f image2 output.jpg 但是这个命令会花费相当长的时间. 对一个清晰的或者较大的视频文件进行操作, 会花费半分钟 ...

  5. 【MySQL】binlog_format以及binlog事务记录分析

    MySQL官方对于binlog_format参数的说明: http://dev.mysql.com/doc/refman/5.5/en/binary-log-setting.html binlog_f ...

  6. Android IOS WebRTC 音视频开发总结（二四）-- p2p调用堆栈

    本文主要分析webrtc音视频点对点部分的代码结构,文章来自博客园RTC.Blacker,转载请说明出处. 前段时间在查一个偶尔断线的问题(这种问题最蛋疼,不好重现,只能凭经验去搞),所以理了下web ...

  7. Android WebRTC 音视频开发总结（一）

    本系列文章主要总结和分享WebRTC开发过程中的一些经验,转载请说明出处(博客园RTC.Blacker),更多交流与合作请看页面上方的子标题! 一.WebRTC是什么? 可能您还不知道WebRTC是什 ...

  8. LinqToDataTable

    /// <summary> /// 下面通过一个方法来实现返回DataTable类型 /// LINQ返回DataTable类型 /// </summary> /// < ...

  9. 学生信息管理系统应用ios源码iPad版

    学生信息管理系统应用iPad版,该应用源码比较完整的,而且也很详细,这也是一款学校用的学生和老师管理系统,里面涉及到了很多ipad常用的控件,操作和数据存储. <ignore_js_op> ...

  10. android 的通知管理

    1在context里定义通知管理器(NotificationManager) NotificationManager notificationManager = (NotificationManage ...