En los capítulos anteriores, hemos aprendido cómo importar marcos iónicos en proyectos.
A continuación, le presentaremos cómo crear una aplicación de aplicación Ionic.
Las aplicaciones de creación de Ionic se construyen utilizando HTML, CSS y JavaScript, por lo que podemos crear un directorio www y crear un archivo index.html en el directorio. El código es el siguiente:
Siga los pasos para completar cuidadosamente la creación de esta aplicación en su editor.
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> toDo </title> <meta name = "viewport" content = "inicial = 1, maximum-scale = 1, user-scalable = no, width = dispositivo width"> <link href = "lib/ionic/csss/cionsss" rel = "stylesheet"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <!-Los archivos incluidos en la aplicación creada con cordova/phinegap se proporcionan por cordova/phonegap (404 se muestra durante el desarrollo)-> <script src = "cordova.js"> </script> </body> </body </body </cotor
En el código anterior, hemos introducido el archivo CSS iónico, el archivo JS Ionic y la extensión Ionic AngularJS ionic.bundle.js (ionic.bundle.js).
El archivo Ionic.bundle.js ya contiene las extensiones AngularJS del núcleo iónico JS, AngularJS e Ionic. Si necesita introducir otros módulos angulares, puede llamarlos desde el directorio lib/js/angular.
Cordova.js se genera al crear una aplicación usando Cordova/PhoneGap. No requiere introducción manual. Puede encontrar el archivo en el proyecto Cordova/PhoneGap, por lo que es normal mostrar 404 durante el desarrollo.
Crear una aplicación
A continuación, implementaremos una aplicación que incluya título, barra lateral, lista, etc. El diagrama de diseño es el siguiente:
Crear una barra lateral
La creación de la barra lateral utiliza el controlador de menús del lado de iones.
Edite el archivo index.html que creamos anteriormente y modificamos el contenido en <Body> como sigue:
<body> <ion-side-Menus> <ion-side-Menu-content> </ ion-side-Menu-content> <ion-side-menu side = "left"> </ion-side-menu> </ ion-side-Menus> </body>
Análisis del controlador:
Menus del lado de iones: es un contenedor con un menú de barra lateral que se puede ampliar haciendo clic en un botón o deslizando la pantalla.
Concontente-Menu-Menu: un contenedor que muestra el contenido principal, puede expandir el menú deslizando la pantalla.
Menu del lado de iones: el contenedor para almacenar la barra lateral.
Inicializar la aplicación
A continuación, creamos un nuevo módulo AngularJS y lo inicializamos. El código se encuentra en www/js/app.js:
Angular.module ('toDo', ['iónico'])Luego agregue el atributo NG-APP a nuestra etiqueta de cuerpo:
<Body Ng-App = "TODO">
Introducir el archivo App.js en <script src = "cordova.js"> </script> en el archivo index.html:
<script src = "js/app.js"> </script>
Modifique el contenido de la etiqueta del cuerpo del archivo index.html, el código es el siguiente:
<cuerpo ng-app = "toDo"> <ion-side-Menus> <!-Center Content-> <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ ion-header-bar> <ion-content> </fontent> <!-menú de izquierda-> <ion-side-men-men lado = "izquierda"> <ion-header-bar> <h1> proyectos </h1> </ ion-header-bar> </ ion-side-menu> </ion-side-menu> </body>
En los pasos anteriores, hemos completado la aplicación de la aplicación Ionic Basic.
Crear una lista
Primero cree un controlador TODOCTRL:
<Body Ng-App = "TODO" NG-Controller = "TODOCTRL">
En el archivo App.js, use el controlador para definir los datos de la lista:
angular.module ('toDo', ['ionic']). Controller ('toDoctrl', function ($ scope) {$ scope.tasks = [{title: 'Novice tutorial'}, {title: 'www.runoob.com'}, {Title: 'Novice tutorial'}, {Title: www.runoOBEn la página index.html, usamos angular ng-repeat para iterar a través de los datos:
<!-Contenido central-> <ion-side-menu-content> <ion-header-bar> <h1> todo </h1> </ ion-header-bar> <ion-content> <!-list-> <ion-list> <ion-item ng-repeat = " Tareas "> {{task.title}} </ ion-item> </ ion-list> </ ion-content> </ ion-side-menu-content>Después de la modificación, el código en la etiqueta del cuerpo index.html es el siguiente:
<cuerpo ng-app = "toDo" ng-concontroller = "toDoctrl"> <ion-side-Menus> <!-Center Content-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> </ ion-header-bar-bar> <ion-content> <!-Lista-> <ion-list> <ion-list> <ion-list> <eDem-iM-ionem ng-repeat = "tarea en tareas"> {{task.title}} </ ion-item> </ ion-list> </ ion-content> <!-menú izquierda-> <ion-side-menu lado = "izquierda"> <ion-header-bar> <h1> proyectos </h1> </ ion-header-bar> </ ion-side-menu> </ ion-side-menus> <script src = "http://www.runoob.com/static/ionic/js/pp.js"> </script> <scrito> src = "cordova.js"> </script> </body>Crear una página ADM
Después de modificar index.html, agregue el siguiente código después de </ion-side-Menus>:
<script id = "new-task.html" type = "text/ng-template"> <div> <!-barra de encabezado modal-> <ion-header-bar> <h1> nueva tarea </h1> <botón ng-Click = "CloseNewTask ()"> Cancelar </botte> </ion-teader-bar> <!-Área de contenido modal-> <ion-centent> <ion-centent> ng-submit = "createTask (tarea)"> <div> <label> <input type = "text" placeHOLDER = "¿Qué necesitas hacer?" ng-model = "task.title"> </label> </div> <div> <button type = "enviar"> Crear tarea </boton> </div> </form> </ion-content> </div> </script>
En el código anterior, definimos una nueva página de plantilla a través de <script id = "new-task.html" type = "text/ng-spplate"> .
La función CreateTask (tarea) se activa cuando se envía el formulario.
ng-model = "task.title" asignará los datos de entrada del formulario a la propiedad del título del objeto de tarea.
Modifique el contenido en <ion-side-Menu-content>, el código es el siguiente:
<!-Contenido central-> <ion-side-menu-content> <ion-header-bar> <h1> toDo </h1> <!-Agregar un botón-> <botón ng-click = "newtask ()"> <i> </i> </button> </ion-header-bar> <ion-content> <! Tareas "> {{task.title}} </ion-item> </ion-list> </ ion-content> </ion-side-menu-content> app.js archivo, el código del controlador es el siguiente: angular.module ('toDo', ['iónico']). Controler ('toDoctrl', function ($ scope, $ ionicmodal). {$ scope.tasks = [{title: 'Novice Tutorial'}, {title: 'www.runoob.com'}, {Título: 'Novice Tutorial'}, {title: 'www.runoob.com'}]; // Crear y cargar el modelo $ ionicModal.fromtemplateRl ('new-Task.html', Function (Modal). {$ scope.taskModal = modal;}, {scope: $ scope, animation: 'slide-up'}); // call $ scope.createTask = function (tarea) {$ scope.tasks.push ({Título: task.title}); $ scope.taskmodal.hide (); task.title = "";} $ scope.newtask = function () {$ scope.taskmodal.show ();}; // cierre el modelo recién agregado $ scope.clossewTask = function () {$ scope.taskmodal.hide ();};});Crear una barra lateral
A través de los pasos anteriores, hemos implementado nuevas funciones, y ahora agregamos la función de la barra lateral a la aplicación.
Modifique el contenido en <ion-side-Menu-content>, el código es el siguiente:
< ng-Click = "newtask ()"> <i> </i> </boton> </ ion-header-bar> <ion-Content scroll = "false"> <ion-list> <ion-item ng-repeat = "en ActiveProject.Tasks "> {{task.title}} </ ion-item> </ ion-list> </ion-content> </ion-side-menu-content> agregue una barra lateral: <!-Left-bar-> <ion-side-menu side =" izquierda "> <ion-teader-bar> <h1> proyectos </h1> </h1 </h1 botín ng-Click = "newProject ()"> </boton> </ ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "proyecto en proyectos" ng-click = "selectProject (proyecto, $ index)" ng-class = "{activo: activo == Proyecto} "> {{Project.title}} </ ion-item> </ ion-list> </ ion-content> </ ion-side-menu>La directiva de clase NG en <ion-Item> establece el estilo de activación del menú.
Aquí creamos un nuevo archivo JS App2.js (para no confundirse con el anterior), el código es el siguiente:
angular.module ('toDo', ['ionic'])/*** Los proyectos de fábrica manejan proyectos de guardado y carga* desde el almacenamiento local, y también nos permite guardar y cargar el* último índice activo de proyectos activos.*/. fábrica ('proyectos', function () {return {todos: function () {var ProjectString = window.localStora angular.fromjson (ProjectString);} return [];}, save: function (proyectos) {window.localStorage ['proyectos'] = angular.tojson (proyectos);}, newProject: function (proyectTitle) {// Agregar un nuevo Projectreturn {Título: ProjectTitle, Tasks: []};},}, getLastActiveDex: parseInt (Window.localStorage ['lastactiveProject']) || 0;}, setLastActiveIndex: function (index) {window.localStorage ['lastactiveProject'] = index;}}}). Controller ('TODOCTRL', function ($ Scope, $ TimeOut, $ ionicModal, $ ionicSeNeMeNeMeDeMeDeMeDeMeDeMeNeMen A utility function for creating a new project// with the given projectTitlevar createProject = function(projectTitle) {var newProject = Projects.newProject(projectTitle);$scope.projects.push(newProject);Projects.save($scope.projects);$scope.selectProject(newProject, $scope.projects.length-1);}// Cargar o inicializar proyectos $ scope.projects = proyects.all (); // toma el último activo, o el primer proyecto $ scope.activeproject = $ scope.projects [proyects.getLastActiveIndex ()]; // llamado para crear un nuevo proyecto $ scope.newproject = function () {var proyecttitle = aprop {CreateProject (ProjectTitle);}}; // llamado para seleccionar el proyecto dado $ scope.selectProject = function (proyecto, index) {$ scope.activeproject = proyecto; proyecto.setLastactiveIndex (index); $ ionicsidemenudelegate.toggleleft (falso);}; // crea nuestro modal $ ionicmodal.fromtemplateUrl ('new-Task.html', function (modal) {$ scope.taskmodal = modal;}, {alcance: $ scope}); $ scope.createTask = function (tarea) {if (! $ scope.activeProject ||! tarea) {return;} $ scope.activeproject.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); // ineficiente, pero guarde todos los proyectosprojects.save ($ scope.projects); task.title = "";}; $ scope.newtask = function () {$ scope.taskmodal.show ();}; $ scope.clossewTask = function () {$ scope.taskmodal.hide ();} $ scope.toggleprojects = function () {$ ionicsidEmenudelegate.toggleleft ();}; // trate para crear el primer proyecto, asegurándose de que se asegure de sí mismo. Inicializado // correctamente $ timeOut (function () {if ($ scope.projects.length == 0) {while (true) {var proyectTitle = pronto ('su primer título del proyecto:'); if (ProjectTitle) {CreateProject (ProjectTitle); break;}}}});}); El código del menú del lado del ión en el cuerpo es el siguiente :: <ion-side-Menus> <!-Center Content-> <ion-side-menu-content> <ion-header-bar> <button ng-click = "toggleProjects ()"> <i> </i> </boton> <h1> {{ActiveProject.title}}}}}}} <h1> </i> </boton> <h1> ng-Click = "newTask ()"> <i> </i> </boton> </ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-item ng-depreat = "tarea en activoproject.tasks"> {{tarea.title}}} </ion-item> </ion-list> </ioncent> </ioncent. columna-> <ion-side-menu side = "izquierda"> <ion-header-bar> <h1> proyectos </h1> <botón ng-click = "newProject ()"> </boton> </ ion-header-bar> <ion-content scroll = "false"> <ion-list> <ion-ionem ng-speat = "Project in Project in Projects" ng-cLicke $ index) "ng-class =" {activo: activoproject == Project} "> {{Project.title}} </ ion-Item> </ ion-list> </ion-content> </ ion-side-menu> </ ion-side-metenus>El contenido anterior es el código completo de cómo Ionic crea un proyecto de aplicación que el editor le presentó. ¡Espero que sea útil para todos!