偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

通過Ionic構(gòu)建一個簡單的混合式(Hybrid)跨平臺移動應(yīng)用

作者：佚名
移動開發(fā)
自從混合式移動開發(fā)火起來之后，一部分Web工程師開始轉(zhuǎn)戰(zhàn)移動開發(fā)?；旌鲜揭苿娱_發(fā)技術(shù)讓W(xué)eb工程師可以開發(fā)出各個平臺的移動應(yīng)用，而且不需要 學(xué)習(xí)各個平臺的原生編程語言?，F(xiàn)在已經(jīng)有很多諸如PhoneGap和Titanium這些混合式開發(fā)平臺來幫助我們進(jìn)行混合式編程，今天我們要介紹一是一個相比之下更新的混合式移動開發(fā)平臺Ionic。

介紹

自從混合式移動開發(fā)火起來之后，一部分Web工程師開始轉(zhuǎn)戰(zhàn)移動開發(fā)?；旌鲜揭苿娱_發(fā)技術(shù)讓W(xué)eb工程師可以開發(fā)出各個平臺的移動應(yīng)用，而且不需要 學(xué)習(xí)各個平臺的原生編程語言。現(xiàn)在已經(jīng)有很多諸如PhoneGap和Titanium這些混合式開發(fā)平臺來幫助我們進(jìn)行混合式編程，今天我們要介紹一是一個相比之下更新的混合式移動開發(fā)平臺Ionic。

Ionic是一個高級HTML5混合式移動應(yīng)用開發(fā)框架，同時也是一個開源的前端框架。Ionic應(yīng)用是基于Cordova的, 所以Cordova相關(guān)的工具也都可以構(gòu)建到應(yīng)用中去，Lonic注重的是視覺效果和用戶體驗，所以使用了 AngularJS來構(gòu)建很各種酷的效果。

安裝

想要開始Ionic開發(fā)，你需要先安裝 Node.js。

然后根據(jù)你的開發(fā)環(huán)境來安裝相應(yīng)的 Android 或 IOS 平臺，在這篇文章中，我們會創(chuàng)建一個Android應(yīng)用。

接下來你要安裝一個 Cordova 和 Ionic的命令行工具，操作如下：

  1. npm install -g cordova ionic 

安裝完成之后，你可以嘗試開始創(chuàng)建一個工程：

  1. ionic start myIonicApp tabs 

進(jìn)入項目目錄，添加ionic平臺，創(chuàng)建應(yīng)用，在虛擬機(jī)中運行，成為高富帥……

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

下面就是樣例應(yīng)用的效果：

開始

我們已經(jīng)有一個不錯的開始了，現(xiàn)在我們來創(chuàng)建一個ToDo列表的應(yīng)用，我們從空白模板開始：

  1. ionic start myToDoList blank 

 如果你進(jìn)入到項目目錄，你會看到AngularJS文件，這是我們添加相關(guān)代碼的地方。

創(chuàng)建和展示列表

首先，你需要在應(yīng)用中添加一個list，我們直接用 ion-list ，添加ion-list到www/index.html：

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

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

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

然后我們可以在 www/js/中創(chuàng)建一個controllers.js文件，來定義一個新的cntroller，我們暫且叫它ToDoListCtrl。這是controllers.js文件的內(nèi)容：

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

在上面的代碼中，我們定義了一個叫starter的module和一個叫作calledToDoListCtrl的Controler。

然后我們就要把這個module加到我們的應(yīng)用中了。打開www/js/app.js ，然后把module添加進(jìn)去：

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

我們繼續(xù)，定義一個$scope來攜帶ToDo list的條目，ToDoListCtrl中聲明一個新的$scope變量，如下： 

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

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

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

在上面的代碼中，我們添加了bar-positive來給應(yīng)用加顏色。你可以有同樣添加很多不同的header。這里有詳細(xì)的文檔： here。

我們現(xiàn)在需要在index.html中添加一個button來觸發(fā)事件：

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

現(xiàn)在確認(rèn)一下，在上面的操作中，我們在modal中添加了一個header，一個input box和一個button。

我們同樣有需要一個回退的Button在header中，它用來觸發(fā) closeModal() 功能。

現(xiàn)在我們開始綁定 ionic modal 到我們的 controller中，我們通過如下的方法把 $ionicModal 注入到controller中：

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

我們在上面的代碼中使用了 .fromTemlateUrl 來加載html的內(nèi)容，然后在初始化的時候通過兩個選項定義了$scope和animation的類型。 

當(dāng)然我們也定義了打開、關(guān)閉moda和添加條目到數(shù)組的方法。

運行

好了，萬事俱備，虛擬機(jī)走起，看起來還不錯吧。

總結(jié)

在這篇文章中，我們了解了使用Ionic的一個大概流程。你可以在這里看到詳細(xì)的代碼。如果想深入學(xué)習(xí)，還是應(yīng)該多了解一下 AngularJS。

參考：大家有興趣的話，可以閱讀這套AngularJS的基礎(chǔ)開發(fā)教程：AngularJS開發(fā)框架實用編程入門之一

via sitepoint

責(zé)任編輯：閆佳明 來源： gbtags
IonicHybrid混合應(yīng)用
相關(guān)推薦

2023-09-21 10:06:53

數(shù)據(jù)分析Gartner

2014-12-22 11:40:31

HTML5混合式應(yīng)用框架

2014-12-17 10:29:59

混合應(yīng)用Hybrid App開發(fā)實戰(zhàn)

2010-01-27 09:10:06

Windows 7混合硬盤技術(shù)

2009-03-10 19:21:39

Windows 7混合式硬盤

2012-12-03 13:49:01

IBMdW

2014-03-12 10:00:26

移動開發(fā)跨平臺

2021-12-01 05:34:47

云計算微軟云應(yīng)用

2015-03-17 09:59:41

跨平臺

2021-07-23 11:13:49

技術(shù)

2013-08-05 10:50:00

2015-04-21 14:54:39

HTML5混合式App

2024-02-27 11:25:38

2020-11-09 06:38:00

ninja構(gòu)建方式構(gòu)建系統(tǒng)

2024-12-06 15:07:42

Python開發(fā)

2010-08-04 10:40:40

2017-11-20 20:06:59

APP移動Web

2020-07-03 11:33:44

vmware
點贊
收藏

51CTO技術(shù)棧公眾號