更新框架：

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. DNS协议 实践

    根据DNS协议发送UDP请求,然后获取IP地址 头文件: #ifndef __DNS__ #define __DNS__ #include <stdio.h> #include <s ...

  2. XML Namespace 命名空间

    根据 Namespaces in XML W3C 推荐标准的定义,XML 命名空间 是由国际化资源标识符 (IRI) 标识的 XML 元素和属性集合:该集合通常称作 XML“词汇”. 定义 XML 命 ...

  3. 二模08day2解题报告

    T1.引爆炸弹(bomb) N个炸弹构成一棵树,引爆一颗叶节点,会一直引爆到根节点.每颗炸弹有一个价值,求引爆k个炸弹的最大价值. 既然是一棵树,那么自然想到dp.所以先树形dp了一遍(由于可能出现多 ...

  4. 【spring 3】AOP：静态代理

    一.代理的基本简介 首先,在什么时候使用代理: 在面向方面编程过程中,当需要对所有类进行某种操作(如,安全性检查,记录操作日志)时,考虑到OCP原则,我们不能在所有实现类中直接添加某些相关方法,这样一 ...

  5. openStack reboot调试

  6. EnCase v7 search hits in compound files?

    I used to conduct raw search in EnCase v6, and I'd like to see if EnCase v7 raw search could hit key ...

  7. hdu2078

    刚开始看这题,感觉是DP什么的 ,后来我发现,只要找到中最小值,就可以啦,哈哈.假如用x1把0-100分割. 则0-x1-100  ===>   x1^2+(100-x1)^2 跟0-100   ...

  8. 在centos下安装django

    这里有一个不错的Django的学习资料.先收藏一下,以备后用.谢谢 http://www.ziqiangxuetang.com/django/django-install.html 在centos下安 ...

  9. 安装JAVA JDK注意事项

    1 WIN8系统 安装JDK  我安装的是1.6版本,   64位的 : 2 安装好后  cmd  输入 java -version  正常 java  命令  正常 javac 命令不正常    提 ...

  10. 使用javascript取得网站的根路径

    //Javascript获取站点获得根目录绝对路径 function getRootPath() { //完整路径 var strFullPath = window.document.location ...