½éÉÜ
×ÔHybrid Mobile¼¼Êõ·¢Õ¹ÒÔÀ´£¬Web¿ª·¢Õßתµ½Òƶ¯¿ª·¢µÄÈËÊý´ó´óÔö¼ÓÁË¡£
Hybrid Mobile¿ª·¢¼¼ÊõʹµÃÒ»¸öWeb¿ª·¢ÕßÄܹ»È¥¿ª·¢Ò»¸öÔËÐÐÔÚ¶à¸öƽ̨ÉϵÄÒƶ¯Ó¦Óá£ÍêÈ«²»ÓÃȥѧϰÏàÓ¦µÄƽ̨ÓïÑÔºÍʹÓÃÒѾ´æÔڵļ¼Êõ¡£
Hybrid Mobile¼¼ÊõÒѾ·¢Õ¹Á˺ܶ࣬Óкܶ಻ͬÀàÐ͵Äƽ̨´æÔÚ£¬±ÈÈç˵PhoneGapºÍTitanium¡£
Ò»¸öÖµµÃ¿¼ÂǵÄHybrid Mobile¿ª·¢ÐÂƽ̨¾ÍÊÇIonic¡£
Ionic ÊÇÒ»¸öÏȽøµÄHTML5(Hybrid Mobile)¼¼ÊõApp¿ò¼Ü¡£ËüÊÇÒ»¸ö¿ÉÒÔʹÓÃHTML5À´´´½¨Ò»¸öƯÁÁµÄÒƶ¯Ó¦ÓõÄÇ°¶Ë¿ªÔ´¿ò¼Ü¡£
IonicµÄApp¶¼ÊÇ»ùÓÚCordovaµÄ£¬ËùÒÔCordova¹¤¾ß¿ÉÒÔ ÓÃÀ´¹¹½¨£¬²¿ÊðºÍ²âÊÔApp¡£IonicÖصãÑо¿AppµÄÍâ¹ÛºÍ¸Ð¾õ£¬ËüĿǰʹÓÃAngularJSÀ´¹¹½¨Ò»¸ö¿´ÆðÀ´ºÜ°ôµÄÇ°¶Ë¡£
°²×°
Òª¿ªÊ¼Ê¹ÓÃIonic£¬Ê×ÏÈҪȷ±£ÄãÒѾ°²×°ÁËNode.js¡£
È»ºó£¬¸ù¾ÝÄãËùÏëÒª¿ª·¢µÄAppƽ̨£¬°²×°ËùÐèµÄAndroid»òÕßIOSƽ̨¸½¼þ¡£ÔÚÕâƪÎÄÕÂÀÎÒÃǽ«ÊÔ×Å´´½¨Ò»¸öAndroidµÄApp¡£
ÔÙÏÂÒ»²½£¬°²×°×îа汾µÄCordovaºÍIonic£¬ÃüÁîÐй¤¾ßÈçÏ£º
npm install -g cordova ionic |
µ±°²×°Íê³Éʱ£¬ÊÔ×ÅÓÃÒ»¸ö±êÇ©Ä£°æÈçÏÂͼËùʾ´´½¨Ò»¸öеÄÏîÄ¿£º
ionic start myIonicApp tabs |
Çл»µ½ÏîĿĿ¼£¬Ìí¼Óionicƽ̨£¬ÈçÏÂËùʾ½¨Á¢appºÍЧ·ÂËü£º
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android |
ÕâÊÇÒ»¸öĬÈϱêÇ©Ä£°æµÄapp:
ÈëÃÅ
ÎÒÃǽ«Òª´´½¨Ò»¸ö¼òµ¥µÄ ToDo ListÓ¦ÓóÌÐò¡£ÈÃÎÒÃÇʹÓÃÒ»¸ö¿ÕÄ£°æÀ´½¨Á¢Ò»¸ö¼òµ¥ µÄapp,ÕâÑùÄܹ»ÈÃÎÒÃÇ´ÓÁ㿪ʼ¡£ÈçÏÂËùʾʹÓÃÒ»¸ö¿ÕÄ£°æ½¨Á¢Ò»¸öÐÂapp£º
ionic start myToDoList blank |
Èç¹ûÄãÇл»µ½myToDoList/wwwµÄĿ¼ÏÂÄã¿ÉÒÔ¿´µ½AngularJSµÄÎļþ¡£Õâ¾ÍÊÇÎÒÃǽ«ÒªÌí ¼ÓÏà¹Ø´úÂëµÄµØ·½£¬ÒÔ±ãÓÚÓÃÀ´´´½¨ÎÒÃǵÄapp¡£
´´½¨ºÍÏÔʾÁбí
Ê×ÏÈ£¬ÎÒÃÇÐèÒª´´½¨Ò»¸öÁбíÓÃÀ´ÏÔʾ¡°ÈÎÎñÁÐ±í¡±¡£Îª´ËÎÒÃǽ«ÀûÓõ½ion-listÃüÁî¡£ÈçÏÂËùʾ½«ion-listÌí¼Óµ½ÎÒÃǵÄwww/index.htmlÖУº
<ion-list>
<ion-item>Scuba Diving</ion-item>
<ion-item>Climb Mount Everest</ion-item>
</ion-list> |
ÔÚÌí¼ÓÉÏÊöµÄion-listµ½index.htmlÖ®ºó£¬ÕâÀïÊÇhtmlÖÐËùÓеĴúÂëµÄÑù×Ó£º
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"initial-scale=1, maximum-scale=1,
user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css
" rel="stylesheet">
<link href="css/style.css" rel=
"stylesheet">
<!-- IF using Sass (run gulp sass first),
then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css
" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js
"></script>
<!-- cordova script
(this will be a 404 during development) -->
<script src="cordova.js
"></script>
<!-- your app's js -->
<script src="js/app.js
"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class=
"bar-stable">
<h1 class="title
">My ToDo List</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>Scuba Diving
</ion-item>
<ion-item>Climb Mount Everest
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
|
ÏÖÔÚ£¬ÈÃÎÒÃǶ¯ÊÖÀ´Öؽ¨ºÍ·ÂÕæ³öappÀ´µÃµ½Õâ¸öÁÐ±í¡£
¾ÍÏñÉÏÃæ¿´µ½µÄ´úÂ룬ʹÓÃion-listÎÒÃǸøÎÒÃǵÄÈÎÎñÁбíÓ²±àÂë³ö2¸öÏîÄ¿¡£ÎªÁËÈÃappµÄ¹¦Äܸü¼ÓÍêÉÆ£¬ÎÒÃÇÓ¦¸ÃÄܹ»¶¯Ì¬µÄÌí¼ÓºÍ²é¿´ÏîÄ¿ÁÐ±í¡£
ÔÚÀïÃ棬www/js/´´½¨ÁËÒ»¸öcontrollers.jsÎļþºÍ¶¨ÒåÁËÒ»¸ö½Ð×öToDoListCtrlеĿØÖÆÆ÷¡£ÕâÊÇcontrollers.jsÎļþµÄÑù×Ó£º
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope) {
}); |
ÔÚÉÏÃæµÄ´úÂëÖУ¬ÎÒÃǶ¨ÒåÁËÒ»¸öеÄÄ£¿éstarter.controllerºÍÒ»¸öеĿØÖÆÆ÷ToDoListCtrl¡£
½ÓÏÂÀ´£¬ÎÒÃÇÐèÒª½«Õâ¸öÄ£¿éÌí¼Óµ½ÎÒÃÇÒѾ´æÔÚµÄÓ¦ÓÃÖС£´ò¿ªwww/js/app.jsÈ»ºó½«Õâ¸öÄ£¿éÌí¼Ó½øÈ¥¡£
ÕâÊÇÌí¼ÓÁËеÄstarter.controllerÄ£¿éÖ®ºóµÄapp.js´úÂ룺
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
}) |
ÏÂÒ»²½£¬¶¨ÒåÒ»¸ö$scopeÀ´Ö§³ÅÈÎÎñÁбíÏîÄ¿¡£ÔÚÀïÃ棬ToDoListCtrlÉùÃ÷ÁËÒ»¸öеÄ$scope±äÁ¿toDoListItems£¬ÈçÏÂËùʾ£º
controller('ToDoListCtrl', function ($scope) {
$scope.toDoListItems = [{
task: 'Scuba Diving',
status: 'not done'
}, {
task: 'Climb Everest',
status: 'not done'
}]
});. |
ÔÚindex.htmlÀïµÄapp.js°üº¬×Åcontrollers.js¡£
ÎÒÃÇÐèÒª½«ÉÏÊöµÄ¿ØÖÆÆ÷Âß¼Ìí¼Óµ½ÎÒÃÇindex.htmlÀïµÄion-listÖÐ,ÈçÏÂͼËùʾÐÞ¸Äion-list£º
<ion-list ng-controller="ToDoListCtrl">
<ion-item ng-repeat="item in toDoListItems">
{{item.task}}
</ion-item>
</ion-list> |
ÕýÈçÄãÔÚÉÏÊö´úÂëÖÐËù¿´µ½µÄ£¬ÎÒÃÇʹÓÃng-controllerÖ¸ÁîÀ´½«¿ØÖÆÆ÷Ìí¼Óµ½ion-listÖС£ÎÒÃÇʹÓÃÁËng-repeatÖ¸ÁîÔÚ$scopeµÄ±äÁ¿Öз´¸´¶¨ÒåÁËtoDoListItems½«ËüչʾÔÚÁбíÖС£
ÏÖÔÚ£¬Í¨¹ýÐж¯À´Öؽ¨appºÍ·ÂÕæ³öÄãÏëÒª×öµÄÁÐ±í¡£
ÔÚÁбíÖÐÌí¼ÓÏîÄ¿
½ÓÏÂÀ´£¬ÎÒÃÇÐèҪʵÏÖ³ö¿ÉÒÔ½«ÏîÄ¿Ìí¼Óµ½ÒÑ´æÔÚµÄÁбíÖеÄÒ»ÖÖ·½Ê½¡£Îª´Ë£¬ÎÒÃǽ«»áÀûÓÃionicModal£¬Ëü¿ÉÒÔÔÚ°´Å¥±»µã»÷Ö®ºóÈÃÕ¹¿ªµÄÁбíÏòÉϹö¶¯ÆðÀ´¡£
Ê×ÏÈÔÚÕ¹¿ªµÄÒ³ÃæµÄ¶¥²¿Ìí¼ÓÒ»¸ö°´Å¥£¬ÒÔ±ãÓÚ¸øÁбíÌí¼ÓеÄÏîÄ¿¡£
È»ºó£¬ÈÃÎÒÃÇÀûÓÃion-header-barÀ´Ê¹ÎÒÃÇÁбíµÄÍ·²¿¿´ÆðÀ´¸ü¼Ó¸»ÓÐÉ«²ÊµÄ¡£ÈçÏÂËùʾÐ޸ĴúÂ룺
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">My ToDo List</h1>
<div class="buttons">
<button class="button" ng-click="openModal()">Add</button>
</div>
</ion-header-bar> |
ÕýÈçÄãÔÚÉÏÃæµÄ´úÂëÖÐËù¿´µ½µÄ£¬ÎÒÃÇÌí¼ÓÁËÒ»¸öÀàÃûΪbar-positiveµÄion-header-bar±êÇ©£¬Ëü¿ÉÒÔΪÁбíÌí¼ÓÑÕÉ«¡£Äã¿ÉÒԺܶ಻ͬÀàÐ͵ÄÍ·²¿£¬Çë²Î¿¼ÕâÀïµÄÏêϸÎĵµ¡£
ÎÒÃÇÒ²ÒѾÔÚÎÒÃÇÁбíµÄÍ·²¿µÄÓÒ²àÌí¼ÓÁËÒ»¸öÃûΪAddµÄа´Å¥£¬Ëü½«»áµ÷ÓÃÒ»¸öº¯ÊýÀ´´ò¿ªÒ»¸öģʽ´°¿Ú£¨ÎÒÃǽ«»áÁ¢¼´¶¨ÒåÕâ¸öģʽ£©¡£
ÈçÏÂËùʾÔÚindex.htmlÖÐÌí¼ÓÒ»¸öģʽµ¯³ö£º
<script id="modal.html" type="text/ng-template">
<div class="modal">
<div class="bar bar-header bar-calm">
<button class="button" ng-click="closeModal()">back</button>
<h1 class="title">Add Item</h1>
</div>
<br></br>
<br></br>
<form ng-submit="AddItem(data)">
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="ToDo Item" ng-model="data.newItem">
</label>
</div>
<button class="button button-block button-positive" type="submit">
Add Item
</button>
</div>
</form>
</div>
</script> |
°´ÕÕÉÏÃæµÄ´úÂ룬ÎÒÃÇÓÐÒ»¸öÍ·²¿ÎļþÔÚÎÒÃǵÄģʽ¼¯ÖУ¬Ò»¸öÊäÈë¿òºÍÒ»¸ö½«ÐÂÏîÄ¿Ìí¼Óµ½ÈÎÎñÁбíÖеÄÌí¼Ó°´Å¥¡£
ÎÒÃÇÔÚÍ·²¿ÎļþÖÐÓÐÒ»¸ö·µ»Ø°´Å¥£¬ÎÒÃǸøËüÌí¼ÓÁËÒ»¸öcloseModal()º¯ÊýÀ´Ê¹ÓÃng-clickÀ´¹Ø±Õģʽ¡£ÎÒÃÇʹÓÃng-submit¸ø±íµ¥Ìí¼ÓÁËÒ»¸ö½Ð×öAddItemµÄº¯Êý£¬µ±±íµ¥ Ìá½»µÄʱºò½«»áÌí¼ÓÏîÄ¿µ½ÒÑÓеÄÁбíÖС£
ÏÖÔÚ£¬ÎÒÃÇÐèÒª½«ionicģʽ½áºÏµ½ÎÒÃǵĿØÖÆÆ÷ÖС£ÎÒÃǽ«$ionicModalÌí¼Óµ½¿ØÖÆÆ÷²¢¶¨ÒåËùÐèÒªµ½µÄº¯Êý£¬ÈçÏÂËùʾ£º
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope, $ionicModal) {
// array list which will contain the items added
$scope.toDoListItems = [];
//init the modal
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
$scope.modal = modal;
});
// function to open the modal
$scope.openModal = function () {
$scope.modal.show();
};
// function to close the modal
$scope.closeModal = function () {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
//function to add items to the existing list
$scope.AddItem = function (data) {
$scope.toDoListItems.push({
task: data.newItem,
status: 'not done'
});
data.newItem = '';
$scope.closeModal();
};
}); |
ÕýÈçÔÚÉÏÊö´úÂëÖÐËù¿´µ½µÄ£¬ÎÒÃÇʹÓÃ.fromTemlateUrlÀ´¼ÓÔØhtmlÎı¾£¬ÔÚ¸ø$scope¶¨Òå³õʼ»¯Ê±¶¨ÒåÁËÁ½¸öÑ¡ÏÓе±Îı¾¼ÓÔصÄʱºòµÄ¶¯»ÀàÐÍ¡£
ÎÒÃÇͬÑù¶¨ÒåÁË´ò¿ª£¬¹Ø±ÕģʽµÄº¯Êý£¬Í¬Ê±»¹¶¨ÒåÁËÒ»¸öÏòÒÑ´æÔÚµÄÊý×éÖÐÌí¼ÓÏîÄ¿µÄº¯Êý¡£
ÑÝʾÆÁÄ»
ÎÒÃǵÄʵÏÖÒѾÍê³É£¬ÎÒÃÇÒѾ׼±¸ºÃÒªÔËÐкͷÂÕæÎÒÃǵÄapp¡£±£´æËùÓÐÎļþ£¬Öؽ¨²¢ÇÒ·ÂÕæapp¡£ÎÒÃÇÈÎÎñÁбíµÄappµÄÁ½¸öÆÁĻӦ¸ÃÊÇÕâ¸öÑù×ӵģº
APP
½áÊøÓï
ÔÚÕâƪÎÄÕÂÀÎÒÃÇ¿´µ½ÁËÈçºÎ´ÓÁ㿪ʼʹÓÃIonic¡ª¡ª»ìºÏÓ¦ÓóÌÐò¿ª·¢ÖеÄÒ»¸öÏȽøµÄHTML5¿ò¼Ü¡£ÎÒÃÇʹÓÃһЩIonicµÄ¹¤¾ßÈçionicModalºÍion-listÀ´¿ª·¢Ò»¸ö¼òµ¥µÄ»ù´¡µÄÈÎÎñÁбíapp¡£
Õâ¸öapp¿ÉÒÔÀ©Õ¹³ö¸ü¶àµÄ¹¦ÄÜ£¬ÕâÀïÓÐÏêϸ˵Ã÷¡£ÎªÁ˸üºÃµÄÈ¥Àí½âAngularJS£¬ÎÒ½¨Òé²Î¿¼AngularJSÎĵµ¡£Í¬Ê±ÉÏÊöÎÄÕÂÖеĴúÂë¿ÉÒÔÔÚGitHubÉϵõ½¡£
|