Jak zainstalować Ionic i tworzyć aplikacje lub projekty od zera za pomocą tego Frameworka

Możesz tworzyć aplikacje Ionic na dowolnym preferowanym systemie operacyjnym, wiedząc, że to nic innego jak zoptymalizowane pod kątem urządzeń mobilnych narzędzia interfejsu użytkownika i gesty do tworzenia szybkich i wysoce interaktywnych aplikacji. Ionic był rozwijany kilka razy w Mac OS X, Linux i Windows. Jak tworzyć aplikacje mobilne za pomocą Ionic Framework?

Najpierw musimy zacząć od informacji o minimalnych wymaganiach do zbudowania aplikacji przy użyciu aktualnej wersji Ionic. Celuje w urządzenia iPhone i Android (obecnie). Obsługuje do iOS 7+ i Androida 4.1+.

Jednak w tej chwili będziesz musiał użyć wiersza poleceń, aby postępować zgodnie z tym przewodnikiem, i musisz mieć system OS X, aby tworzyć i wdrażać aplikacje na iPhone’a, dlatego zaleca się OS X, jeśli to możliwe.

Polecenia z tego przewodnika uruchomisz w systemie Windows Git Bash lub Console2. Najpierw zainstalujemy najnowszą wersję Apache Cordova i nauczymy się tworzyć i rozwijać aplikacje na Androida za pomocą Apache Cordova i SQlite.

SQLite to biblioteka w trakcie, która implementuje silnik skryptowy. Transakcyjna baza danych SQL samowystarczalny, bezserwerowy, bez konfiguracji. Dowiedz się wszystkiego o programowaniu QT i bazie danych SQLite.

Pamiętaj, aby pobrać SQLite Android Studio, między innymi w celu uzyskiwania kursów, tworzenia zapytań, wyświetlania danych, przeglądania baz danych. Który weźmie naszą aplikację i spakuje ją do natywnego kontenera, aby była tradycyjna aplikacja natywna.

Jak tworzyć aplikacje mobilne z Ionic Framework?

Do Zainstaluj Cordovę, upewnij się, że masz zainstalowany Node.js

$ sudo npm install -g cordova

Zainstaluj Ionic

Ionic jest wyposażony w poręczne narzędzie wiersza poleceń do uruchamiania, budowania i pakowania aplikacji Ionic. Do zainstaluj, po prostu uruchom:

$ sudo npm install -g ionic

stworzyć projekt

Teraz musimy utworzyć nowy projekt Cordova gdzieś na komputerze dla naszego kodu aplikacji:

$ ionic start todo blank – type ionic2

Spowoduje to utworzenie folderu o nazwie todo w katalogu, w którym wykonał polecenie. Następnie przejdziemy do tego katalogu i wyświetlimy jego zawartość.

Oto jak zewnętrzna struktura Twój projekt jonowy:

$ cd todo && ls

├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.

zainstaluj komputer jonowy

skonfigurować platformy

Teraz musimy powiedzieć jonowi, że chcemy włączyć Platformy iOS i Android:

$ ionic cordova platform add ios
$ ionic cordova platform add android

Spróbuj

Aby upewnić się, że domyślny projekt zadziałał, spróbuj zbudować i uruchomić projekt (zamiast tego zamień iOS na Androida, aby zbudować dla Androida):

$ ionic cordova build ios
$ ionic cordova emulate ios

Uruchamianie aplikacji

Teraz, gdy mamy wszystko zainstalowane i powstał nowy projekt Cordovazacznijmy budować prawdziwą aplikację.

Od każdej aplikacji joński to w zasadzie strona internetowa, musimy mieć plik indeks.html w naszej aplikacji, która definiuje pierwszą stronę ładowaną w aplikacji.

Będziemy tworzyć www/indeks.html i zainicjuj go tym:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

<script src="lib/ionic/js/ionic.bundle.js"></script>

<! – Needed for Cordova/PhoneGap (will be a 404 during development) – >
<script src="cordova.js"></script>
</head>
<body>
</body>
</html>

rama jonowa szt
W tym Powłoka powyżej, uwzględniamy jonowe CSS oraz zarówno rdzeń Ionic JS, jak i Ionic AngularJS w pliku ionic.bundle.js.

jonowy pochodzi z ngAnimacja Y ngOdkażenie dołączone, ale aby korzystać z innych modułów Angular, musisz dołączyć je z katalogu lib/js/angular.

Aby utworzyć boczne menu w Ionic, możemy użyć menu po stronie jonowej. Zapraszam do przeczytania, ale niezbędne znaczniki są proste. edytować plik indeks.html i zmienić treść aby wyglądało to tak:

<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>

W powyższym kodzie dodaliśmy nasz kontroler który będzie kontrolował przeciąganie i ekspozycję menu bocznego.

Wewnątrz kontrolera mamy który jest centralnym obszarem zawartości aplikacji, oraz a czyli menu po lewej stronie, początkowo ukryte.

inicjowanie aplikacji

Najpierw musimy utworzyć nowy moduł AngularJS i powiedzieć Angularowi, aby go zainicjował. Zamierzamy utworzyć nowy plik znajdujący się w www/js/aplikacja.js. Umieść ten kod w pliku:

angular.module('todo', ['ionic'])

To jest Angularowy sposób budowania aplikacji i mówimy Angularowi, aby zawierał moduł jonowy, który zawiera cały kod jonowy, który będzie przetwarzał powyższe tagi i sprawi, że nasz aplikacja ożywa.

Teraz wróć do index.html i tuż przed linią Dodaj:

<script src="js/app.js"></script>

Obejmuje to skrypt, który właśnie stworzyliśmy.

Aby uruchomić naszą nową aplikację, musimy dodać plik atrybut ng-app do tagu ciała:

<body ng-app="todo">

testowanie Twojej aplikacji

Istnieją cztery sposoby testowania aplikacji podczas jej tworzenia: w przeglądarce WebKit na komputerze, w symulatorze aplikacji, iOS lub Androidw przeglądarce mobilnej na telefonie lub jako natywna aplikacja na telefonie.