《中级前端5.6》AngularJS 之移动 APP 开发——Ionic,cordova,phonegap

在这个移动 APP 和移动设备呈爆炸式增长的大环境下，原先的 Web 开发者变得廉价，为了改变这一现状,现在我们可以通过 HTML，JavaScript 和 CSS 迅速开发出一个兼容 Android 和 iOS 的 APP。本课程讲解如何来使用高性能的移动 Web 框架 ionic 和 中间件 Cordova。

核心内容： 1.Ionic 的简介； 2.Cordova 的简介； 3.开发环境的搭建； 4.联系人 APP 的开发 

 

Ionic 简介

Ionics是一款接近原生的Html5移动App开发框架，可以让我们用（html css js）web技术创建夸平台的移动APP。

优点：漂亮的界面，追求性能，专注原生，免费开元；

性能： 操作最少的 DOM，非 jQuery，和硬件加速过渡，让您感觉到用html5开发的app也可以飞起来。

完美融合：融合AngularJS引擎，下一代移动端解决方案。

命令行：只需要一个命令行"npm install -g ionic"就可以创建，构建，测试，部署你的应用程序在任何平台上。

文档完善，会html css js和angularjs，就可以用ionic开发跨平台的移动app

 

相对于Sencha Touch和jQueryMobile，Ionics的性能优势明显，在android上也不卡。而且Ionic是基于Angularjs的，MVVM也很适合团队大型项目

 

官方文档：http://ionicframework.com/docs/

css组件：http://ionicframework.com/docs/components/

js组件：http://ionicframework.com/docs/api/

中文网站：http://www.ionic.wang/

国外官网卡的话就翻下墙吧，用360极速浏览器里的“快线”插件，注册一个账号就能用一天；或者用代理软件proxy999，都是免费的。

 

下面我们通过一段代码来看看Ionic到底长什么样，怎么用：

 1 <html ng-app="ionicApp">
 2 <head>
 3     <meta charset="utf-8">
 4     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 5     <title>菜鸟教程(runoob.com)</title>
 6     <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
 7     <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
 8     <script type="text/javascript">
 9     angular.module('ionicApp', ['ionic'])
10 
11     .controller('MyCtrl', function($scope) {
12 
13     });
14     </script>
15     <style>
16     body {
17     cursor: url('http://www.runoob.com/static/img/finger.png'), auto;
18     }
19     </style>
20 </head>
21 <body ng-controller="MyCtrl">
22 
23     <ion-header-bar class="bar-positive">
24     <h1 class="title">Hello World!</h1>
25     </ion-header-bar>
26 
27     <ion-content>
28                 <p>我的第一个 ionic 应用。</p>
29     </ion-content>
30 
31     </body>
32 </html>

里面的ionic文件可以去github或者它的官网下载。下载后的文件有三个目录 css,font,js

js里边就包含了angularjs以及ionic的js。上面例子我们用一个捆绑的js文件，可以实现所有ionic的东西。

 

我们看到上面的例子和我们之前做的AngularJS的代码非常相似。

不同之处：angular.module中的app后面又加了一个'ionic'参数，作用是引入ionic框架。

hmtl部分，用了很多ionic自定义的html组件，   这个其实就是angularjs的directive封装出来的。  很多的样式和效果，我们都可以在ionic的官网看，就不多说了。

我们尝试一下：

1 .controller('MyCtrl', function($scope) {
2     $scope.unum = 800;
3 });
<p>我的第{{unum}}个 ionic 应用。</p>

看，跟我们AngularJS中学的一样

所以ionic就是一个界面的库。所有的程序代码还是angularjs那样的。

如果要做成app并且实现一些手机原声的功能，如拍照等，就需要用到我们下面要介绍的Cordova了，也就是PhoneGap

 

 

Cordova 简介

Cordova是PhoneGap的一个项目，是一个第三方平台，可以把html5类网页版的应用打包成通用于各个手机平台的APP。

Cordova可以使程序调用大部分手机原生的功能。

AngularJS团队把Cordova常用的组件都封装成了一个AngularJS的Directive组件，可以直接使用。http://ngcordova.com/docs/plugins/

 

Action Sheet Example:

module.controller('ThisCtrl', function($cordovaActionSheet) {

  var options = {
    title: 'What do you want with this image?',
    buttonLabels: ['Share via Facebook', 'Share via Twitter'],
    addCancelButtonWithLabel: 'Cancel',
    androidEnableCancelButton : true,
    winphoneEnableCancelButton : true,
    addDestructiveButtonWithLabel : 'Delete it'
  };


  document.addEventListener("deviceready", function () {

    $cordovaActionSheet.show(options)
      .then(function(btnIndex) {
        var index = btnIndex;
      });
  }, false);

});

 

 

 

开发环境的搭建

本课时讲解 AngularJS+Ionic+Cordova 开发环境的搭建。

posted @ 2016-01-19 12:53  暖风叔叔  阅读(399)  评论(0)    收藏  举报