Od počátku hybridních mobilních technologií se počet webových vývojářů, kteří se zaměřují na mobilní vývoj, nesmírně zvýšil.
Hybridní mobilní technologie umožňují webovým vývojářům vyvíjet mobilní aplikace, které běží na více mobilních platformách. To vše bez učení se nativních jazyků platformy a využití stávajících dovedností.
Hybridní mobilní technologie se hodně vyvinuly a existuje mnoho různých platforem, jako je PhoneGap a Titanium.
Novou vývojovou platformou Hybrid Mobile, kterou je třeba zvážit, je Ionic.
Ionic je pokročilý HTML5 hybridní rámec mobilních aplikací. Je to open-source front-end framework pro vytváření krásných mobilních aplikací pomocí HTML5.
Aplikace Ionic jsou založeny na Cordově, takže nástroje Cordova lze použít k vytváření, nasazení a testování aplikací. Ionic se zaměřuje na vzhled a chování aplikací a v současné době používá AngularJS k vytváření úžasně vypadajících front-endů.
Instalace
Chcete-li začít s Ionic, nejprve se ujistěte, že máte nainstalovaný Node.js.
Dále, v závislosti na platformě aplikace, pro kterou plánujete vývoj, nainstalujte požadované závislosti platformy Android nebo IOS. V tomto článku se pokusíme vytvořit aplikaci pro Android.
Dále nainstalujte nejnovější nástroj příkazového řádku Cordova a Ionic, jak je znázorněno níže:
npm install -g cordova ionic
Po dokončení instalace zkuste vytvořit nový projekt se šablonou karet, jak je znázorněno níže:
ionic start myIonicApp tabs
Přejděte do adresáře projektu, přidejte iontovou platformu, sestavte aplikaci a emulujte ji, jak je znázorněno níže:
cd myIonicApp
ionic platform add android
ionic build android
ionic emulate android
Takto vypadá výchozí aplikace šablon karet:
Začínáme
Vytvoříme jednoduchý ToDo List aplikace. Vytvořme jednoduchou aplikaci pomocí prázdné šablony, abychom mohli začít od začátku. Vytvořte novou aplikaci pomocí prázdné šablony, jak je uvedeno níže:
ionic start myToDoList blank
Pokud přejdete na myToDoList/www adresář můžete vidět soubory AngularJS. Zde přidáme příslušný kód pro vytvoření naší aplikace.
Vytvoření a zobrazení seznamu
Nejprve musíme vytvořit seznam, který zobrazí seznam úkolů. K tomu využijeme direktivu ion-list. Přidejte ion-list na naše www/index.html
jak je uvedeno níže:
<ion-list>
<ion-item>Scuba Diving</ion-item>
<ion-item>Climb Mount Everest</ion-item>
</ion-list>
Po přidání výše uvedeného ion-list až index.html takto vypadá celý html kód:
<!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>
Nyní aplikaci znovu sestavte a emulujte, abyste viděli seznam v akci.
Jak je vidět v kódu výše, pomocí ion-list jsme pevně zakódovali 2 položky do našeho seznamu úkolů. Aby byla aplikace plně funkční, měli bychom být schopni dynamicky přidávat a zobrazovat položky seznamu.
Uvnitř www/js/ vytvořte controllers.js a definujte nový řadič s názvem ToDoListCtrl uvnitř toho. Zde je návod, jak controllers.js vzhled souboru:
angular.module('starter.controllers', [])
.controller('ToDoListCtrl', function ($scope) {
});
Ve výše uvedeném kódu jsme definovali nový modul nazvaný starter.controller a definoval nový ovladač nazvaný ToDoListCtrl .
Dále musíme tento modul přidat do naší stávající aplikace. Otevřete www/js/app.js a přidejte do něj tento modul.
Zde je návod, jak app.js kód vypadá po přidání nového starter.controllers modul.
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Dále definujte $scope nosit položky seznamu úkolů. Uvnitř ToDoListCtrl deklarovat nový $scope proměnná s názvem toDoListItems jak je uvedeno níže:
.controller('ToDoListCtrl', function ($scope) {
$scope.toDoListItems = [{
task: 'Scuba Diving',
status: 'not done'
}, {
task: 'Climb Everest',
status: 'not done'
}]
});
Zahrňte controllers.js v index.html po app.js .
Potřebujeme připojit výše uvedenou logiku ovladače k našemu ion-list v index.html . Upravte ion-list jak je uvedeno níže:
<ion-list ng-controller="ToDoListCtrl">
<ion-item ng-repeat="item in toDoListItems">
{{item.task}}
</ion-item>
</ion-list>
Jak můžete vidět ve výše uvedeném kódu, použili jsme ng-controller direktiva pro připojení ovladače k seznamu iontů. Použili jsme ng-repeat direktivu pro iteraci toDoListItems definované v $scope proměnnou a zobrazí se v seznamu.
Nyní znovu sestavte aplikaci a emulujte a seznam by měl být v akci.
Přidání položek do seznamu
Dále musíme implementovat způsob, jak přidat položky do existujícího seznamu. K tomu použijeme ionicModal, který se po kliknutí na tlačítko na stránce výpisu vysune nahoru.
Chcete-li do seznamu přidat nové položky, nejprve přidejte nové tlačítko do horní části stránky se seznamem.
Dále uděláme, aby naše záhlaví vypadalo barevněji pomocí iontové hlavičky. Upravte kód, jak je uvedeno níže:
<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>
Jak můžete vidět ve výše uvedeném kódu, přidali jsme ion-header-bar s třídou bar-positive což mu dává tu barvu. Můžete mít mnoho různých typů hlaviček, podrobnou dokumentaci naleznete zde.
Také jsme přidali nové tlačítko na pravou stranu naší hlavičky s názvem Add který volá funkci pro otevření modálního okna (které si brzy nadefinujeme).
Přidejte modální vyskakovací okno do index.html jak je uvedeno níže:
<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>
Podle výše uvedeného kódu máme v našem modálu záhlaví, vstupní pole a tlačítko Přidat pro přidání nových položek do seznamu úkolů.
V záhlaví máme tlačítko zpět, ke kterému jsme připojili closeModal() pomocí ng-click pro uzavření modu. Připojili jsme funkci nazvanou AddItem do formuláře pomocí ng-submit , přidání položek do existujícího seznamu při odeslání formuláře.
Nyní musíme spojit iontový modal s naším ovladačem. Vložíme $ionicModal k ovladači a definujte požadované funkce, jak je uvedeno níže:
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'
}).then(function (modal) {
$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();
};
});
Jak je vidět ve výše uvedeném kódu, použili jsme .fromTemlateUrl pro načtení obsahu html a během inicializace definoval dvě možnosti pro definici $scope a typ animace použité při načítání obsahu.
Také jsme definovali funkce pro otevření, zavření modalu a funkci pro přidání položek do existujícího pole.
Ukázková obrazovka
Naše implementace je nyní dokončena a jsme připraveni spustit a emulovat naši aplikaci. Uložte všechny soubory, znovu vytvořte a emulujte aplikaci. Takto by měly vypadat dvě obrazovky naší aplikace se seznamem úkolů:
Závěr
V tomto článku jsme viděli, jak začít s Ionicem – pokročilým HTML5 frameworkem pro vývoj hybridních aplikací. Použili jsme některé iontové nástroje jako ionicModal a ion-list vyvinout jednoduchou a základní aplikaci se seznamem úkolů.
Aplikaci lze rozšířit o mnoho funkcí podrobně popsaných zde. Pro lepší pochopení AngularJS jsem doporučil odkazovat na dokument AngularJS. Mezitím je kód z výše uvedeného článku dostupný na GitHubu.