Dans les chapitres précédents, nous avons appris à importer des cadres ioniques dans des projets.
Ensuite, nous vous présenterons comment créer une application d'application ionique.
Les applications IonIC créent sont construites à l'aide de HTML, CSS et JavaScript, afin que nous puissions créer un répertoire www et créer un fichier index.html dans le répertoire. Le code est le suivant:
Suivez les étapes pour compléter soigneusement la création de cette application sur votre éditeur.
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> todo </ title> <meta name = "vision" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = Device-width"> <link href = "lib / ionic / css / ion.css" href = "lib / ionic / css / ion.cs" href = "lib / ionic / css / ion.css" href = "lib / ionic / css / ionic.cs" Href = "lib / ionic / css / ionic. rel = "Stylesheet"> <script src = "lib / ionic / js / ionic.bundle.js"> </ script> <! - Les fichiers inclus dans l'application créés avec Cordova / PhoneGap sont fournis par Cordova / PhoneGap (404 affichés pendant le développement) -> <script src = "Cordova.js"> </cript> </discours
Dans le code ci-dessus, nous avons introduit le fichier CSS ionique, le fichier JS ionique et l'extension ionique angularjs ionic.bundle.js (ionic.bundle.js).
Le fichier ionic.bundle.js contient déjà les extensions angularjs de noyau ionique JS, angularjs et ionic. Si vous avez besoin d'introduire d'autres modules angulaires, vous pouvez les appeler à partir du répertoire Lib / JS / Angular.
Cordova.js est généré lors de la création d'une application à l'aide de Cordova / PhoneGap. Il ne nécessite pas d'introduction manuelle. Vous pouvez trouver le fichier dans le projet Cordova / PhoneGap, il est donc normal d'afficher 404 pendant le développement.
Créer une application
Ensuite, nous implémenterons une application qui comprend le titre, la barre latérale, la liste, etc. Le schéma de conception est le suivant:
Créer une barre latérale
La création de la barre latérale utilise le contrôleur des menus-ions.
Modifiez le fichier index.html que nous avons créé plus tôt et modifiez le contenu dans <body> comme suit:
<body> <ion-SIDE-MENUS> <ion-Side-Menu-Content> </ ion-Side-MenU-content> <ion-Side-menu Side = "Left"> </ ion-Side-Menu> </ ion-Side-Menus> </Gold>
Analyse du contrôleur:
Menus ionique: est un conteneur avec un menu de barre latérale qui peut être élargi en cliquant sur un bouton ou en gardant l'écran.
CONTENTION-MENU-MENU-MENU: un conteneur qui affiche le contenu principal, vous pouvez développer le menu en faisant glisser l'écran.
Ménu-ion: le conteneur pour stocker la barre latérale.
Initialiser l'application
Ensuite, nous créons un nouveau module AngularJS et l'initialisons. Le code est situé sur www / js / app.js:
Angular.Module ('ToDo', ['ionic'])Ajoutez ensuite l'attribut NG-App à notre balise corporelle:
<corps ng-app = "todo">
Introduire le fichier app.js sur le <script src = "cordova.js"> </cript> dans le fichier index.html:
<script src = "js / app.js"> </ script>
Modifiez le contenu de la balise du corps de fichier index.html, le code est le suivant:
<corps ng-app = "todo"> <ion-side-menus> <! - Contenu central -> <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ ion-header-bar> <ion-content> </ion-contente> <! Side = "Left"> <ion-header-bar> <h1> projets </h1> </ ion-header-bar> </ ion-side-menu> </ ion-side-menu> </body>
Dans les étapes ci-dessus, nous avons terminé l'application de l'application de base ionique.
Créer une liste
Créez d'abord un contrôleur Todoctrl:
<body ng-app = "todo" ng-contrôleur = "toDoctrl">
Dans le fichier app.js, utilisez le contrôleur pour définir les données de liste:
angular.module ('todo', ['ionic']). Controller ('toDoctrl', function ($ scope) {$ scope.tasks = [{title: 'Novice Tutorial'}, {Title: 'www.runoob.com'}, {Title: 'Novice Tutorial'}, {title: 'www.runoob.com'.Dans la page index.html, nous utilisons une répétition Angular Ng pour itérer les données:
<! - Contenu central -> <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ ion-header-bar> <ion-content> <! - list -> <ion-list> <ion-item ng-repeat = "task in tâches "> {{task.title}} </ ion-item> </ ion-list> </ ion-content> </ ion-side-menu-content>Après modification, le code dans la balise corporelle index.html est le suivant:
<body ng-app = "todo" ng-contrôleur = "toDoctrl"> <ion-side-més> <! - Contenu central -> <ion-menu-contenu> <ion-header-bar> <h1> todo </h1> </ ion-header-bar> <ion-content> <! - list -> <ion-list> ng-repeat = "task in tasks"> {{task.title}} </ ion-item> </ ion-list> </ ion-content> <! - Menu de gauche -> <ion-menu-menu Side = "Left"> <ion-header-bar> <h1> projets </h1> </ ion-header-bar> </ ion-side-menu> </ ion-side-menus> <script src = "http://www.runoob.com/static/ionic/js/app.js"> </cript> <script src = "cordova.js"> </ script> </ body>Créer une page Ajouter
Après avoir modifié index.html, ajoutez le code suivant après </ ion-side-menus>:
<script id = "new-task.html" type = "text / ng-timplate"> <v> <! - Modal Header Bar -> <ion-header-bar> <h1> new tâche </h1> <Button ng-Click = "Closewtask ()"> Annuler </button> </on-header> <! - Modal Content Area -> <ion-contient> <format-bar> <! ng-sunumit = "CreateTask (tâche)"> <v> <vabed> <entrée type = "text" placeholder = "Que devez-vous faire?" ng-model = "task.title"> </ label> </ div> <div> <button type = "soumi"> Créer la tâche </fruts> </div> </ form> </ion-content> </div> </cript>
Dans le code ci-dessus, nous définissons une nouvelle page de modèle via <script id = "new-task.html" type = "text / ng-template"> .
La fonction CreateTask (tâche) est déclenchée lorsque le formulaire est soumis.
ng-model = ”task.title” attribuera les données d'entrée du formulaire à la propriété de titre de l'objet Task.
Modifiez le contenu dans <ion-side-menu-content>, le code est le suivant:
<! - Centre Contenu -> <ion-Menu-Continte> <ion-Header-Bar> <H1> TODO </H1> <! - Ajoutez un bouton -> <Button ng-Click = "NewTask ()"> <i> </i> </ Button> </ ion-Header-Bar> <ion-Content> <! - Liste -> <ion-list> Dans les tâches "> {{task.title}} </ ion-item> </ ion-list> </ion-content> </ ion-side-menu-content> app.js fichier, le code du contrôleur est le suivant: angular.module ('todo', ['ionic']). {$ scope.tasks = [{Title: 'Novice Tutorial'}, {Title: 'www.runoob.com'}, {Title: 'Novice Tutorial'}, {Title: 'www.runoob.com'}]; // Créer et charger le modèle $ ionicmodal. {$ scope.taskmodal = modal;}, {Scope: $ Scope, Animation: 'Slide-up'}); // Appeler $ scope.createTask = function (task) {$ scope.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); tâche.Title = ";}; $ scope.newtask = function () {$ scope.taskmodal.show ();}; // Fermez le modèle nouvellement ajouté $ scope.closewtask = function () {$ scope.taskmodal.hide ();};});Créer une barre latérale
Grâce aux étapes ci-dessus, nous avons implémenté de nouvelles fonctionnalités, et maintenant nous ajoutons la fonction de barre latérale à l'application.
Modifiez le contenu dans <ion-side-menu-content>, le code est le suivant:
<! - Contenu central -> <ion-side-menu-content> <ion-header-bar> <bouton ng-Click = "toggleProjects ()"> <i> </i> </futton> <h1> {{activeProject.Title}} </h1> <! - Ajouter un bouton -> <bouton ng-Click = "newtask ()"> <i> </i> </ bouton> </ ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "tâche dans activeProject.tasks "> {{task.title}} </ ion-item> </ ion-list> </ ion-contenu> </ ion-side-menu-content> Ajoutez une barre latérale: <! - Bar -> <ion-menu-mens Side =" Left "> <ion-header> <h1> projects </1> <bouton ng-Click = "newProject ()"> </ Button> </ ion-header-bar> <ion-content Scroll = "false"> <ion-list> <ion-item ng-repeat = "project in projects" ng-Click = "selectProject (project, $ index)" ng-class = "{active: ActiveProject = Project} "> {{project.title}} </ ion-item> </ ion-list> </ ion-content> </ ion-side-menu>La directive de classe NG dans <ion-item> définit le style d'activation du menu.
Ici, nous créons un nouveau fichier JS App2.js (pour ne pas être confondu avec le précédent), le code est le suivant:
angular.module ('todo', ['ionic']) / *** L'usine de projets gère la sauvegarde et le chargement des projets * à partir du stockage local, et nous permet également d'enregistrer et de charger le * dernier index de projet actif. * /. Factory ('projets', function () {return {all: function () {var projectString = window.LocalStorage ['projets']; angular.fromjson (projectString);} return [];}, sauver: function (projets) {window.localstorage ['projects'] = angular.tojson (projets);}, newProject: function (projectTitle) {// ajoute un nouveau projectreturn {title: projectTitle, task PARSEIINT (Window.LocalStorage ['LastActiveProject']) || 0;}, SetLastActiveIndex: Fonction (index) {Window.LocalStorage Fonction utilitaire pour créer un nouveau projet // avec le projet PROJECTIONTLEVAR CREATEPROject = fonction (ProjectTitle) {var newproject = project.newproject (projectTitle); $ scope.projects.push (newProject); projets.save ($ scope.projects); $ Scope.SpelectProject (newproject, $ scope.project.Lest.Lord-1); ou initialiser les projets $ scope.projects = projectS.all (); // saisissez le dernier actif, ou le premier projet $ scope.activeProject = $ scope.projects [projectS.GetLastActiveIndex ()]; // appelé pour créer un nouveau projet $ scope.newproject = function () {var projectTitle = prompt ('Project Name'); if (projectTitle) {CreateProject (projectTitle);}}; // appelé pour sélectionner le projet donné $ scope.selectProject = function (project, index) {$ scope.activeproject = project; project.SetlastActiveIndex (index); $ ionicdemeNudelegate.toggleleft (false);}; // créer notre modal $ ionicModal.fromTemplateUrl ('new-task.html', fonction (modal) {$ scope.taskmodal = modal;}, {scope: $ scope}); $ scope.createTask = fonction (tâche) {if (! $ Scope.activeProject ||! Task) gens {$ scope.taskmodal.show ();}; $ scope.closewtask = function () {$ scope.taskmodal.hide ();} $ scope.toggleprojects = function () {$ ionicdeDemeNelegate.toggleleft ();}; // Essayez de créer le premier projet, assurez-vous de désactiver! initialisé // correctement $ timeout (function () {if ($ scope.projects.length == 0) {while (true) {var projectTitle = inside ('votre premier titre de projet:'); if (projectTitle) {createProject (projectTitle); Break;}}}}});}); Le code du ménus ionique dans le corps est le suivant :: <ion-side-menus> <! - Center Content -> <ion-Side-Menu-conters> <ion-header> </ bouton ng-click = "toggleprojects ()"> <i> </ i> </sick> <h1> {{activeProject.TiTle}} -> <bouton ng-click = "newtask ()"> <i> </i> </ bouton> </ ion-header-bar> <ion-conten-cantroll = "false"> <ion-list> <ion-item ng-repeat = "task in in activeProject.tasks "> {{task.title}} </ ion-item> </ion-list> </ion-conten-contenu> <! - Colonne de gauche -> <ion-side-menu Side =" Left "> <ion-header-bar> <h1> projets </h1> < ng-Click = "newProject ()"> </ Button> </ ion-header-bar> <ion-content Scroll = "false"> <ion-list> <ion-item ng-repeat = "project in projects" ng-Click = "selectProject (project, $ index)" ng-class = "{active: ActiveProject = Project} "> {{project.title}} </ ion-item> </ ion-list> </ ion-content> </ ion-side-menu> </ ion-side-menus>Le contenu ci-dessus est l'ensemble du code de la façon dont Ionic crée un projet d'application que l'éditeur vous a introduit. J'espère que ce sera utile à tous!