行业资讯

通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

日期：2014-12-11点击次数：1812

介绍

自从混合式移动开发火起来之后，一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发出各个平台的移动应用，而且不需要 学习各个平台的原生编程语言。现在已经有很多诸如PhoneGap和Titanium这些混合式开发平台来帮助我们进行混合式编程，今天我们要介绍一是一个相比之下更新的混合式移动开发平台Ionic。

Ionic是一个高级HTML5混合式移动应用开发框架，同时也是一个开源的前端框架。Ionic应用是基于Cordova的, 所以Cordova相关的工具也都可以构建到应用中去，Lonic注重的是视觉效果和用户体验，所以使用了 AngularJS来构建很各种酷的效果。

安装

想要开始Ionic开发，你需要先安装 Node.js。

然后根据你的开发环境来安装相应的 Android 或 IOS 平台，在这篇文章中，我们会创建一个Android应用。

接下来你要安装一个 Cordova 和 Ionic的命令行工具，操作如下：



    
	
  1. 
		npm install -g cordova ionic 
    2. 




	安装完成之后，你可以尝试开始创建一个工程：




    
	
  1. 
		ionic start myIonicApp tabs 
    2. 




	进入项目目录，添加ionic平台，创建应用，在虚拟机中运行，成为高富帅……




    
	
  1. 
		cd myIonicApp 
    2. 
	
  2. 
		ionic platform add android 
    3. 
	
  3. 
		ionic build android 
    4. 
	
  4. 
		ionic emulate android 
    5. 




	下面就是样例应用的效果：



	



	开始



	我们已经有一个不错的开始了，现在我们来创建一个ToDo列表的应用，我们从空白模板开始：




    
	
  1. 
		ionic start myToDoList blank 
    2. 




	如果你进入到项目目录，你会看到AngularJS文件，这是我们添加相关代码的地方。




	创建和展示列表



	首先，你需要在应用中添加一个list，我们直接用 ion-list ，添加ion-list到www/index.html：




    
	
  1. 
		<ion-list>
    2. 
	
  2. 
		<ion-item>Scuba Diving</ion-item>
    3. 
	
  3. 
		<ion-item>Climb Mount Everest</ion-item>
    4. 
	
  4. 
		</ion-list>
    5. 




	之后我们看一看添加ion-list之后我们的html文件是什么样的：




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		  
    4. 
	
  4. 
		<head>
    5. 
	
  5. 
		<meta charset="utf-8">
    6. 
	
  6. 
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    7. 
	
  7. 
		<title></title>
    8. 
	
  8. 
		  
    9. 
	
  9. 
		<link href="lib/ionic/css/ionic.css" rel="stylesheet">
    10. 
	
  10. 
		<link href="css/style.css" rel="stylesheet">
    11. 
	
  11. 
		  
    12. 
	
  12. 
		<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    13. 
	
  13. 
		<link href="css/ionic.app.css" rel="stylesheet">
    14. 
	
  14. 
		-->
    15. 
	
  15. 
		  
    16. 
	
  16. 
		<!-- ionic/angularjs js -->
    17. 
	
  17. 
		<script src="lib/ionic/js/ionic.bundle.js"></script>
    18. 
	
  18. 
		  
    19. 
	
  19. 
		<!-- cordova script (this will be a 404 during development) -->
    20. 
	
  20. 
		<script src="cordova.js"></script>
    21. 
	
  21. 
		  
    22. 
	
  22. 
		<!-- your app's js -->
    23. 
	
  23. 
		<script src="js/app.js"></script>
    24. 
	
  24. 
		</head>
    25. 
	
  25. 
		  
    26. 
	
  26. 
		<body ng-app="starter">
    27. 
	
  27. 
		  
    28. 
	
  28. 
		<ion-pane>
    29. 
	
  29. 
		<ion-header-bar class="bar-stable">
    30. 
	
  30. 
		<h1 class="title">My ToDo List</h1>
    31. 
	
  31. 
		</ion-header-bar>
    32. 
	
  32. 
		<ion-content>
    33. 
	
  33. 
		<ion-list>
    34. 
	
  34. 
		<ion-item>Scuba Diving</ion-item>
    35. 
	
  35. 
		<ion-item>Climb Mount Everest</ion-item>
    36. 
	
  36. 
		</ion-list>
    37. 
	
  37. 
		</ion-content>
    38. 
	
  38. 
		</ion-pane>
    39. 
	
  39. 
		</body>
    40. 
	
  40. 
		  
    41. 
	
  41. 
		</html>
    42. 




	然后我们可以在 www/js/中创建一个controllers.js文件，来定义一个新的cntroller，我们暂且叫它ToDoListCtrl。这是controllers.js文件的内容：




    
	
  1. 
		angular.module('starter.controllers', [])  
    2. 
	
  2. 
		.controller('ToDoListCtrl', function ($scope) {  
    3. 
	
  3. 
		});  
    4. 




	在上面的代码中，我们定义了一个叫starter的module和一个叫作calledToDoListCtrl的Controler。



	然后我们就要把这个module加到我们的应用中了。打开www/js/app.js ，然后把module添加进去：




    
	
  1. 
		angular.module('starter', ['ionic', 'starter.controllers']) 
    2. 
	
  2. 
		.run(function ($ionicPlatform) { 
    3. 
	
  3. 
		$ionicPlatform.ready(function () { 
    4. 
	
  4. 
		if (window.StatusBar) { 
    5. 
	
  5. 
		StatusBar.styleDefault(); 
    6. 
	
  6. 
		} 
    7. 
	
  7. 
		}); 
    8. 
	
  8. 
		}) 
    9. 




	我们继续，定义一个$scope来携带ToDo list的条目，ToDoListCtrl中声明一个新的$scope变量，如下： 




    
	
  1. 
		.controller('ToDoListCtrl', function ($scope) { 
    2. 
	
  2. 
		  
    3. 
	
  3. 
		$scope.toDoListItems = [{ 
    4. 
	
  4. 
		task: 'Scuba Diving', 
    5. 
	
  5. 
		status: 'not done' 
    6. 
	
  6. 
		}, { 
    7. 
	
  7. 
		task: 'Climb Everest', 
    8. 
	
  8. 
		status: 'not done' 
    9. 
	
  9. 
		}] 
    10. 
	
  10. 
		}); 
    11. 




	把controllers.js添加到index.html中：




    
	
  1. 
		<ion-list ng-controller="ToDoListCtrl">
    2. 
	
  2. 
		<ion-item ng-repeat="item in toDoListItems">
    3. 
	
  3. 
		{{item.task}} 
    4. 
	
  4. 
		</ion-item>
    5. 
	
  5. 
		</ion-list>
    6. 




	在上面的代码中，我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档： here。



	我们现在需要在index.html中添加一个button来触发事件：




    
	
  1. 
		<script id="modal.html" type="text/ng-template">
    2. 
	
  2. 
		<div class="modal">
    3. 
	
  3. 
		  
    4. 
	
  4. 
		<div class="bar bar-header bar-calm">
    5. 
	
  5. 
		<button class="button" ng-click="closeModal()">back</button>
    6. 
	
  6. 
		<h1 class="title">Add Item</h1>
    7. 
	
  7. 
		</div>
    8. 
	
  8. 
		<br></br>
    9. 
	
  9. 
		<br></br>
    10. 
	
  10. 
		<form ng-submit="AddItem(data)">
    11. 
	
  11. 
		<div class="list">
    12. 
	
  12. 
		<div class="list list-inset">
    13. 
	
  13. 
		<label class="item item-input">
    14. 
	
  14. 
		<input type="text" placeholder="ToDo Item" ng-model="data.newItem">
    15. 
	
  15. 
		</label>
    16. 
	
  16. 
		</div>
    17. 
	
  17. 
		<button class="button button-block button-positive" type="submit">
    18. 
	
  18. 
		Add Item 
    19. 
	
  19. 
		</button>
    20. 
	
  20. 
		</div>
    21. 
	
  21. 
		</form>
    22. 
	
  22. 
		  
    23. 
	
  23. 
		</div>
    24. 
	
  24. 
		</script>
    25. 




	现在确认一下，在上面的操作中，我们在modal中添加了一个header，一个input box和一个button。



	我们同样有需要一个回退的Button在header中，它用来触发 closeModal() 功能。



	现在我们开始绑定 ionic modal 到我们的 controller中，我们通过如下的方法把 $ionicModal 注入到controller中：




    
	
  1. 
		angular.module('starter.controllers', []) 
    2. 
	
  2. 
		.controller('ToDoListCtrl', function ($scope, $ionicModal) { 
    3. 
	
  3. 
		// array list which will contain the items added 
    4. 
	
  4. 
		$scope.toDoListItems = []; 
    5. 
	
  5. 
		//init the modal 
    6. 
	
  6. 
		$ionicModal.fromTemplateUrl('modal.html', { 
    7. 
	
  7. 
		scope: $scope, 
    8. 
	
  8. 
		animation: 'slide-in-up' 
    9. 
	
  9. 
		}).then(function (modal) { 
    10. 
	
  10. 
		$scope.modal = modal; 
    11. 
	
  11. 
		}); 
    12. 
	
  12. 
		// function to open the modal 
    13. 
	
  13. 
		$scope.openModal = function () { 
    14. 
	
  14. 
		$scope.modal.show(); 
    15. 
	
  15. 
		}; 
    16. 
	
  16. 
		// function to close the modal 
    17. 
	
  17. 
		$scope.closeModal = function () { 
    18. 
	
  18. 
		$scope.modal.hide(); 
    19. 
	
  19. 
		}; 
    20. 
	
  20. 
		//Cleanup the modal when we're done with it! 
    21. 
	
  21. 
		$scope.$on('$destroy', function () { 
    22. 
	
  22. 
		$scope.modal.remove(); 
    23. 
	
  23. 
		}); 
    24. 
	
  24. 
		//function to add items to the existing list 
    25. 
	
  25. 
		$scope.AddItem = function (data) { 
    26. 
	
  26. 
		$scope.toDoListItems.push({ 
    27. 
	
  27. 
		task: data.newItem, 
    28. 
	
  28. 
		status: 'not done' 
    29. 
	
  29. 
		}); 
    30. 
	
  30. 
		data.newItem = ''; 
    31. 
	
  31. 
		$scope.closeModal(); 
    32. 
	
  32. 
		}; 
    33. 
	
  33. 
		  
    34. 
	
  34. 
		}); 
    35. 




	我们在上面的代码中使用了 .fromTemlateUrl 来加载html的内容，然后在初始化的时候通过两个选项定义了$scope和animation的类型。 



	当然我们也定义了打开、关闭moda和添加条目到数组的方法。



	运行



	好了，万事俱备，虚拟机走起，看起来还不错吧。



	总结



	在这篇文章中，我们了解了使用Ionic的一个大概流程。你可以在这里看到详细的代码。如果想深入学习，还是应该多了解一下 AngularJS。(文/佚名 gbtags)



	 

                        

                            

                                上一篇：Docker部署:基于Ryu的SDN环境下一篇：HTML6 初探 — 你没看错，是6不是5

                        

                    

                

            

        

        
        



 

版权所有 金名计算机系统集成股份有限公司 备案号：京ICP备13027063号