Nos capítulos anteriores, aprendemos a importar estruturas iônicas para projetos.
Em seguida, apresentaremos como criar um aplicativo de aplicativo iônico.
O Ionic cria aplicativos é criado usando HTML, CSS e JavaScript, para que possamos criar um diretório www e criar um arquivo index.html no diretório. O código é o seguinte:
Siga as etapas para concluir cuidadosamente a criação deste aplicativo em seu editor.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> TODO </title> <meta name = "viewport" content = "inicial-escala = 1, scale máximo = 1, scalable/não, sem largura =/largura"> <link href = 1, href = 1, scalable/não, sem largura/largura/link href = 1, href = 1, scalable/não, sem largura =/largura/link/scale rel = "Stylesheet"> <script src = "lib/ionic/js/ionic.bundle.js"> </script> <!-arquivos incluídos no aplicativo criado com Cordova/PhoneGap são fornecidos por Cordova/PhoneGap (404 exibido durante o desenvolvimento)-> <Script src = "cordova.js"> </script> </head> <body> </body> </html>
No código acima, introduzimos o arquivo CSS iônico, o arquivo js iônico e o iOnic AngularJS Extension iionic.bundle.js (ionic.bundle.js).
O arquivo iionic.bundle.js já contém as extensões angulares de js do núcleo iônico, angularjs e iionic. Se você precisar introduzir outros módulos angulares, poderá chamá -los do diretório Lib/JS/Angular.
O Cordova.js é gerado ao criar um aplicativo usando Cordova/PhoneGap. Não requer introdução manual. Você pode encontrar o arquivo no projeto Cordova/PhoneGap, por isso é normal exibir 404 durante o desenvolvimento.
Crie um aplicativo
Em seguida, implementaremos um aplicativo que inclua título, barra lateral, lista, etc. O diagrama de design é o seguinte:
Crie uma barra lateral
A criação da barra lateral usa o controlador de ion-mênus.
Edite o arquivo index.html que criamos anteriormente e modifique o conteúdo em <body> da seguinte forma:
<Body> <iion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-menu side = "left"> </ion-side-menu> </ion-side-menus> </body>
Análise do controlador:
Menus de íons: é um contêiner com um menu da barra lateral que pode ser expandido clicando em um botão ou deslizando a tela.
Conteúdo do Menu-Menu de íons: Um contêiner que exibe o conteúdo principal, você pode expandir o menu deslizando a tela.
Menu-lito: o contêiner para armazenar a barra lateral.
Inicialize o aplicativo
Em seguida, criamos um novo módulo AngularJS e o inicializamos. O código está localizado em www/js/app.js:
Angular.Module ('TODO', ['Ionic'])Em seguida, adicione o atributo NG-App à nossa tag corporal:
<corpo ng-app = "TODO">
Apresente o arquivo app.js no <script src = "corova.js"> </sCript> no arquivo index.html:
<script src = "js/app.js"> </sCript>
Modificar o conteúdo da etiqueta do corpo do arquivo index.html, o código é o seguinte:
<corpo ng-app = "TODO"> <Ion-side-Menus> <!-Conteúdo central-> <ion-side-menu-content> <ion-heate-barato> <h1> TODO </H1> </Ion-header-Bar> <ion-content> </ion-content> <!-Menor-Menu- side = "Left"> <ion-header-Bars> <h1> Projetos </h1> </one-header-Bars> </ion-side-Menu> </ion-side-menu> </body>
Nas etapas acima, concluímos a aplicação do aplicativo básico iônico.
Crie uma lista
Primeiro, crie um controlador Todoctrl:
<corpo ng-app = "TODO" ng-controller = "Todoctrl">
No arquivo app.js, use o controlador para definir os dados da lista:
angular.module ('TODO', ['Ionic']).Na página Index.html, usamos o NG-REPET angular para iterar através dos dados:
<!-Conteúdo central-> <ion-side-menu-content> <on-header-bar Tasks "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content>Após a modificação, o código na etiqueta corporal index.html é a seguinte:
<corpo ng-app = "TODO" Ng-Controller = "Todoctrl"> <ion-side-Menus> <!-Conteúdo central-> <ion-side-menu-content> <ion-heate-Barr-Bar> <h1> TOTDO </H1> </ION-BAR> <ion---Pontent> <! Tasks "> {{Task.title}} </ion-item> </ion-list> </ion-content> <!-Menu esquerdo-> <ion-side-menu side =" esquerdista "> </ion-bar> Projetos <H1> </h1 </ion-non </ion-side> <h1> src = "http://www.runoob.com/static/ionic/js/app.js"> </script> <script src = "cordova.js"> </sCript> </body>Crie uma página Adicionar
Após modificar o index.html, adicione o seguinte código após </on-side-menus>:
<script id = "new-Task.html" type = "text/ng-template"> <div> <!-barra de cabeçalho modal-> <on-header-Barer> <h1> nova tarefa </h1> <buter ng-click = "CloseNewTask ()"> Cancel </button> </ion-head-barbar> <! ng-submit = "createTask (tarefa)"> <div> <belt> <input type = "text" placeholder = "O que você precisa fazer?" ng-model = "task.title"> </elabel> </div> <div> <button type = "submit"> crie tarefa </button> </div> </form> </ion-content> </div> </sCript>
No código acima, definimos uma nova página de modelo através de <script id = "new-Task.html" type = "text/ng-template"> .
A função CreateTask (tarefa) é acionada quando o formulário é enviado.
ng-model = "task.title" atribuirá os dados de entrada do formulário à propriedade do título do objeto de tarefas.
Modificar o conteúdo em <-side-menu-content>, o código é o seguinte:
<!-Conteúdo central-> <ion-side-menu-content> <Ion-header-Bars> <h1> TODO </H1> <!-Adicione um botão-> <botão ng-click = "newTask ()"> <i> <! Tasks "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> App.js, o código do controlador é o seguinte: 'ANGULE.Module (' TOM ', [' ionic ').). {$ scope.tasks = [{Title: 'Novice Tutorial'}, {Title: 'www.runoob.com'}, {title: 'Novice Tutorial'}, {title: 'www.runoob.com'}]; // criar e carregar o modelo $ ionicmodal.fromtemurl. {$ scope.taskmodal = modal;}, {scope: $ scope, animação: 'slide-in-up'}); // ligue para $ scope.createTask = function (tarefa) {$ scope.takmasks.push ({title.title}); $ scope.TaskMas.hide (); $ scope.NewTask = function () {$ scope.taskmodal.show ();}; // fechar o recém -adicionado modelo $ scope.cloSeNewTask = function () {$ scope.taskmodal.hide ();};});Crie uma barra lateral
Através das etapas acima, implementamos novos recursos e agora adicionamos a função da barra lateral ao aplicativo.
Modificar o conteúdo em <-side-menu-content>, o código é o seguinte:
<!-Conteúdo central-> <ion-side-menu-content> <Ion-header-Bars> <button ng-click = "ToggleProjects ()"> <i> </i> </button> <h1> {{ActiveProject.title}} </h1> <!-Add a Buttão-> ng-click = "newTask ()"> <i> </i> </button> </on-header-bar ActiveProject.Tasks "> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> Adicione um sidebar: <!-esquerda-> <ion-side-menu side =" Left "> <ion-herança> ng-click = "newProject ()"> </button> </Ion-header-Bars> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "Project em projetos" ng-click = "selectProject (Project, $ index)" ng-class = "{Active: Active: Projeto} "> {{Project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu>A diretiva da classe ng em <on-item> define o estilo de ativação do menu.
Aqui, criamos um novo arquivo js app2.js (para não ser confundido com o anterior), o código é o seguinte:
angular.module ('TODO', ['Ionic']))/*** Os projetos lida com projetos de economia e carregamento* do armazenamento local, e também nos permite salvar e carregar o último índice de projeto ativo.*/. angular.Fromjson (ProjectString);} return [];}, salve: function (projetos) {window.localStorage ['Projects'] = angular.tojson (Projects);}, newProject: functitTit (ProjectTitle) {// Adicionar um novo ProjectRurn {Title: ProjectTitle, Tasks: [] Parseint (Window.localStorage ['LastActiveProject']) ||. Função para criar um novo projeto // com o ProjectLeVar CreateProject = (ProjectTitle) {var newProject = Projects.NewProject (ProjectTitle); $ scope.projects.push (newProject); Projects.Save ($ scope.projects); $ scope.selectProject (NewProject; Inicialize os projetos $ scope.projects = Projects.all (); // pegue o último ativo, ou o primeiro projeto $ scope.activeProject = $ scope.projects [Projects.getLasTactiveIndEx ()]; // chamado para criar um novo projeto $ scope.NewProject = function () {var ProjectTle = ('Nome do projeto'); {CreateProject (ProjectTitle);}}; // chamado para selecionar o projeto dado $ scope.SelectProject = function (Project, Index) {$ scope.activeProject = Projects.setLastActiveIndex (index); $ ionicsidemenudElegate.toggleleft (false); Modal $ ionicmodal.FromTemplateurl ('new-Task.html', function (modal) {$ scope.taskmodal = modal;}, {scope: $ scope}); $ scope.createtask = function (task) {if (! {return;} $ scope.activeProject.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); // ineficiente, mas salve todos os projetosProjects.Save ($ scope.Projects); Task.title = "";}; scope.nNeNe.NeNNEN. {$ scope.taskmodal.show ();}; $ scope.closeNewTask = function () {$ scope.taskmodal.hide ();} $ scope.toggleprojects = function () {$ ionicsidemenudElegate.toggleleft ();}; inicializado // corretamente $ timeout (function () {if ($ scope.projects.length == 0) {while (true) {var ProjectTitle = prompt ('seu primeiro título do projeto:'); if (ProjectTitle) {CreateProject (ProjectTitle); Break;}}}});}); O código-mênus do lado do íon no corpo é o seguinte :: <ion-side-menus> <!-conteúdo central-> <ion-side-menu-content> <ion-header-Bars> <butter ng-click = "ToggleProjects ()"> <i> </i> </button> <h1> {{{(ActivePoject) "> <i> </i> </button> <h1> {{{) ng-click = "newTask ()"> <i> </i> </button> </non-header-Bars> <ion-content scroll = "false"> <ion-list> <ion-item ng-repeat = "Tarefa em ativoproject.Tasks"> {{{Task. Coluna-> <ion-side-menu side = "esquerd"> <Ion-header-Bars> <h1> Projetos </h1> <button ng-click = "newProject ()"> </button> </ion-header-Bars> <ion-content scrol = "false"> <ion-list> <l-ion-item ng-repent ngentpat = $ index) "ng-class =" {Active: ActiveProject == Project} "> {{Project.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus>O conteúdo acima é o código inteiro de como a Ionic cria um projeto de aplicativo que o editor apresentou a você. Espero que seja útil para todos!