Ionic ngCordova 构建 App比Cordova快几倍

/ 0评 / 0

命令行安装

首先您需要安装 Node.js,下载地址:https://nodejs.org/download/release/v0.12.7/node-v0.12.7-x86.msi

我们在接下来的安装中需要使用到其 NPM 工具,更多 NPM 介绍可以查看我们的NPM 使用介绍

然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考Android 和 iOS 官方文档来安装。

Window 和 Linux 上打开命令行工具执行以下命令:

$ npm install -g cordova ionic

Mac 系统上使用以下命令:

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。

sudo npm install -g ionic

如果你已经安装了以上环境,可以执行以下命令来更新版本:

npm update -g cordova ionic

sudo npm update -g cordova ionic

创建应用

使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:

$ ionic start myApp tabs
ionic start myApp tabs   //创建带有top栏和bottom栏的示例项目
ionic start myApp sidemenu  //创建带有左侧带有menu栏的示例项目
ionic start myApp blank   //创建空白项目

运行我们刚才创建的ionic项目

使用 ionic tool 创建,测试,运行你的apps(或者通过Cordova直接创建)。

创建android应用:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

创建ios应用:

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

                                                                                    

bower的安装

首先确定你的系统安装了nodejs。之后就可以用npm包管理工具下载并全局安装bower:
> npm install -g bower

全局安装Bower后,可以查看Bower的帮助信息,使用命令:
> bower help

bower的使用

使用了bower的项目都会在目录下有一个bower.json文件。在该文件同级目录下,使用如下命令即可安装相关依赖库。

> bower install

 

ngCordova安装

进入到工程目录,使用bower工具安装

1
$ bower install ngCordova

 

 

然后将ng-cordova.js或者ng-cordova.min.js添加到index.html中的cordova.js引入之前,例如:

1
2
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

 

 

然后再angular中添加ngCordova依赖,

1
angular.module('myApp', ['ngCordova'])

 

 

在使用每个插件之前,必须先检测设备是否就绪,通过cordova内置的原生事件deviceready来检测,如下:

1
2
3
4
5
6
7
document.addEventListener("deviceready", function () {
  $cordovaPlugin.someFunction().then(success, error);
}, false);
// OR with Ionic
$ionicPlatform.ready(function() {
  $cordovaPlugin.someFunction().then(success, error);
});

 

 

 

 

 

然后可以通过下面的命令添加插件到项目中:

1
cordova plugin add ...

 

 

至此ngcordova安装成功,关于plugin的教程,参见官网:
http://ngcordova.com/docs/plugins/

 

发表评论

邮箱地址不会被公开。 必填项已用*标注