更新框架：

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. UIApplication介绍

    一.什么是UIApplication UIApplication对象是应用程序的象征. 每一个应用都有自己的UIApplication对象,这个对象是系统自动帮我们创建的, 它是一个单例对象. 一个i ...

  2. php array(object) 与xml相互转换

    private function _array_to_xml($source, $charset='utf-8'){ $array = json_decode($source); $pre = '&l ...

  3. PAT1038. Recover the Smallest Number

    //意识到一个重要错误,一直以为atoi,itoa是windows独有的,linux下不可用,直到刚刚... //string+=比strcat好用多了,字符比较也方便的多,但是用scanf读入str ...

  4. 使用python脚本实现基于指定字符串的文本排序

    朋友用ansible导出了一个文件,文件中包含上千台机器的磁盘信息,他想要知道哪些机器最需要赶紧扩磁盘.思路是,按剩余磁盘空间百分数,从小到大对文本内容重新排序.下面是具体实现. 源文件ip.txt的 ...

  5. 简短总结一下C#里跨线程更新UI

    摘自: http://my.oschina.net/sdqxcxh/blog/53707 跨线程更新UI是写多线程程序尤其是通信类的程序经常遇到的问题,这里面主要的问题是冲突,比如数据线程想要更新UI ...

  6. Widows2003开机取消按CTRL+ALT+DEL

    一, Widows2003开机取消按CTRL+ALT+DEL 1. 单击windows开始键→管理工具→本地安全策略(如下图) 2. 本地安全设置→本地策略→安全选项 3. 安全选项→右侧→找到这个文 ...

  7. ASP.NET数据绑定

    数据绑定是ASP.NET提供的另一种访问数据库的方法.与ADO.NET数据库访问技术不同的是:数据绑定技术可以让程序员不关注数据库连接.数据库命令以及如何格式化这些数据以显示在页面上等环节,而是直接把 ...

  8. input文本框实现宽度自适应代码实例，input文本框

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

  9. jMeter 监控cpu、内存

    http://jmeter-plugins.org/downloads/all/ 将JMeterPlugins.jar包复制到Jmeter的lib目录下面的ext目录下面,重新启动Jmeter,我们点 ...

  10. nginx 解决400 bad request 的方法（转载）

    nginx的400错误比较难查找原因,因为此错误并不是每次都会出现的,另外,出现错误的时候,通常在浏览器和日志里看不到任何有关提示. 经长时间观察和大量试验查明,此乃request header过大所 ...