В предыдущих главах мы узнали, как импортировать ионные рамки в проекты.
Далее мы представим вас, как создать приложение Ionic App.
Ionic создает приложения, созданные с использованием HTML, CSS и JavaScript, поэтому мы можем создать каталог www и создать файл index.html в каталоге. Код заключается в следующем:
Следуйте шагам, чтобы тщательно завершить создание этого приложения в вашем редакторе.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> todo </title> <meta name = "viewport" content = "Начальная шкала = 1, максимальная масштаба = 1, пользовательский шкалеровский = no, width = device-width"> <link href = "lib/ionic/css/yonic"> <link href = "lib/ionic/css/yonic" rel = "styleSheet"> <script src = "lib/lib/ionic/js/ionic.bundle.js"> </script> <!-файлы, включенные в приложение, созданное с помощью Cordova/Phonegap, предоставляются Cordova/PhoneGap (404 отображаются во время разработки)-> <Скрипт src = "cordova.js"> </script> </head> <body> </body> </html>
В приведенном выше коде мы ввели файл ионного CSS, файл Ionic JS и Ionic AngularJs Extension Ionic.bundle.js (ionic.bundle.js).
Файл ionic.bundle.js уже содержит расширения Angularjs Ionic Core JS, AngularJS и Ionic. Если вам нужно ввести другие угловые модули, вы можете позвонить им из каталога Lib/JS/Angular.
Cordova.js генерируется при создании приложения с использованием Cordova/PhoneGap. Это не требует ручного введения. Вы можете найти файл в проекте Cordova/PhoneGap, поэтому нормально отображать 404 во время разработки.
Создать приложение
Далее мы будем реализовать приложение, которое включает в себя заголовок, боковую панель, список и т. Д. Схема дизайна заключается в следующем:
Создайте боковую панель
Создание боковой панели использует контроллер ионной стороны-меню.
Измените файл index.html, который мы создали ранее, и изменить содержимое в <body> следующим образом:
<body> <ионо-сторона-menus> <ионо-сторона-menu-content> </ион-сторона-menu-content> <ионо-сторона-menu side = "слева"> </ион-сторона-menu> </ион-сторона-menus> </body>
Анализ контроллера:
Ионная сторона-меню: это контейнер с меню боковой панели, который может быть расширен, нажав кнопку или скольжение экрана.
Ионно-точная-меню-контент: контейнер, который отображает основной контент, вы можете расширить меню, скользят на экране.
Ионная сторона-меню: контейнер для хранения боковой панели.
Инициализировать приложение
Затем мы создаем новый модуль AngularJS и инициализируем его. Код находится в www/js/app.js:
Angular.Module ('todo', ['Ionic'])Затем добавьте атрибут ng-app в наш тег тела:
<body ng-app = "todo">
Представьте файл app.js в <script src = "cordova.js"> </script> в файле index.html:
<script src = "js/app.js"> </script>
Измените содержимое тега тега корпуса файла index.html, код следующим образом:
<body ng-app = "todo"> <Ion-side-menus> <!-Center Content-> <Ion-side-menu-content> <Ion-heмон-bar> <h1> todo </h1> </ion-header-bar> <Ion-content> </Ion-content> <!-Left Menu-> <Ion-side-men side = "left"> <yon-header-bar> <h1> Проекты </h1> </ион-заголовок-bar> </ионно-сторона-menu> </ионно-сторона-menu> </body>
В приведенных выше шагах мы завершили приложение приложения Ionic Basic.
Создайте список
Сначала создайте контроллер Todoctrl:
<body ng-app = "todo" ng-controller = "todoctrl">
В файле app.js используйте контроллер для определения данных списка:
angular.module ('todo', ['' Ionic ']). Controller (' todoctrl ', function ($ scope) {$ scope.tasks = [{title:' новичок Tutorial '}, {title:' www.runoob.com '}, {title:' nepice turnial '}, {title:' www.run;На странице index.html мы используем угловой ng-repeat для итерации через данные:
<!-Центральное содержание-> <Ion-side-menu-content> <Ion-header-bar> <h1> todo </h1> </oon-header-bar> <yon-content> <!-List-> <Ion-list> <Ion-item ng-repeat = "Задача в Tasks "> {{asse.title}} </ион-item> </or-list> </on-content> </ион-сторона-menu-content>После модификации код в теге Body Index.html выглядит следующим образом:
<body ng-app = "todo" ng-controller = "todoctrl"> <Ion-side-menus> <!-Center Content-> <Ion-side-menu-content> <Ion-Header-bar> <h1> todo </h1> </ион-голов-bar> <Ion-content> <!-Listist> <-yon-lister> <! ng-repeat = "task in tasks"> {{task.title}} </ion-item> </ионно-list> </ион-content> <!-Left Menu-> <Ion-side-menu side = "left"> <Ion-header-bar> <h1> Projects </h1> </ion-header-bar> </on-side-menu> </yon-side-menus> <script src = "http://www.runoob.com/static/ionic/js/app.js"> </script> <script src = "cordova.js"> </script> </body>Создать страницу добавления
После изменения index.html добавьте следующий код после </ion-side-menus>:
<script id = "new-task.html" type = "text/ng-template"> <div> <!-модальный заголовок-> <Ion-header-bar> <h1> Новая задача </h1> <Кнопка ng-click = "rolenewtask ()"> cancel </button> </yon-header-bar> <!-Modal Content Area-> <-hon-cont-cont-cont-cont-cont-cont ng-submit = "createTask (task)"> <div> <babel> <input type = "text" Placeholder = "Что вам нужно сделать?" ng-model = "task.title"> </label> </div> <div> <button Type = "propect"> Создать задачу </button> </div> </form> </ion-content> </div> </script>
В приведенном выше коде мы определяем новую страницу шаблона через <script id = "new-task.html" type = "text/ng-template"> .
Функция CreateTask (задача) запускается при подаче формы.
ng-model = ”task.title” назначит входные данные формы правлению названия объекта задачи.
Измените контент в <Ion-side-menu-content>, код заключается в следующем:
<!-Центральный содержимое-> <Ion-side-menu-content> <Ion-header-bar> <h1> todo </h1> <!-Добавить кнопку-> <Кнопка ng-click = "newtask ()"> <i> </i> </button> </oon-header-bar> <Ion-content> <! Tasks "> {{asse.title}} </ион-item> </on-list> </on-content> </ion-side-menu-content> файл. {$ scope.tasks = [{title: 'nepice turniory'}, {title: 'www.runoob.com'}, {название: 'новичок учебник'}, {title: 'www.runoob.com'}]; // create и загрузить модель $ yonicmodal.fromtemplateuptrateurl ('new-task.html', modepmal ', modemal' htmal ', modal) function. {$ scope.taskmodal = modal;}, {scope: $ scope, анимация: 'slide-in-up'}); // call $ scope.createtask = function (task) {$ scope.tasks.push ({teal: task.title}); $ scope.taskmodal.hide (); $ scope.newtask = function () {$ scope.taskmodal.show ();}; // Закрыть вновь добавленную модель $ scope.closenewtask = function () {$ scope.taskmodal.hide ();};});Создайте боковую панель
Благодаря вышеуказанным шагам мы реализовали новые функции, и теперь мы добавляем функцию боковой панели в приложение.
Измените контент в <Ion-side-menu-content>, код заключается в следующем:
<!-Центр Содержание-> <Ion-side-menu-content> <Ion-header-bar> <button ng-click = "toggleProjects ()"> <i> </i> </button> <h1> {{activeProject.title}} </h1> <!-Добавить кнопку-> <Кнопка ng-click = "newtask ()"> <i> </i> </button> </oon-header-bar> <ion-content scroll = "false"> <Ion-list> <Ion-item ng-repeat = "Задача ActiveProject.tasks "> {{task.title}} </ion-item> </ионно-list> </ион-content> </ион-сторона-menu-content> Добавить боковую панель: <!-левый-bar-> <ion-side-menu adecle =" слева "> <! ng-click = "newProject ()"> </button> </ионо-заголовок-bar> <Ion-content Scroll = "false"> <Ion-list> <Ion-item ng-repeat = "Проект в проектах" ng-click = "selectProj Project} "> {{project.title}} </ion-item> </or-list> </on-content> </ионно-сторона-menu>Директива NG-класса в <Ion-item> устанавливает стиль активации меню.
Здесь мы создаем новый файл JS App2.js (чтобы не путать с предыдущим), код заключается в следующем:
Angular.Module ('todo', ['' Ionic '])/*** Фабрика проектов заводских проектов с сохранением и загрузкой* из локального хранилища, а также позволяет нам сохранять и загружать* последний активный индекс проектов.*/. Factory (' Projects ', function () {return {all: function () {var projectString = window.localorage [' project ']; if projectString) angular.fromjson (projectString);} return [];}, save: function (projects) {window.localstorage ['projects'] = angular.tojson (projects);}, newproject: function (projecttitle) {// add a new projectreturn {title: projecttitle, tasks: []}; parseint (window.localstorage ['astiactaperproject']) ||. Функция утилиты для создания нового проекта // с данным ProjectTitlevar createProject = function (ProjectTitle) {var newProject = projects.newProject (ProjectTitle); $ scope.projects.push (newproject); projects.save ($ scope.projects); или инициализировать проекты $ scope.projects = projects.all (); // Grab the Last Active или первый проект $ scope.activeproject = $ scope.projects [projects.getlastactiveDex ()]; // вызванный для создания нового проекта $ scope.newproject = function () {var projecttle = ropply ('name'); {createProject (projectTitle);}}; // вызывается для выбора данного проекта $ scope.selectproject = function (project, index) {$ scope.activeProject = project; projects.setLastactiveIndex (index); $ ionicsIdemenudelegate.toggleleft (false); Modal $ ionicmodal.fromtemplateurl ('new-task.html', function (modal) {$ scope.taskmodal = modal;}, {scope: $ scope}); $ scope.createtask = function (задача) {if (! {return;} $ scope.actiactproject.tasks.push ({title: task.title}); $ scope.taskmodal.hide (); // неэффективно, но сохраните все проекты. {$scope.taskModal.show();};$scope.closeNewTask = function() {$scope.taskModal.hide();}$scope.toggleProjects = function() {$ionicSideMenuDelegate.toggleLeft();};// Try to create the first project, make sure to defer// this by using $timeout so everything is инициализирован // правильно $ timeout (function () {if ($ scope.projects.length == 0) {while (true) {var projecttitle = raffic ('ваш первый проект заголовок:'); if (projecttitle) {createProject (projectTitle); Break;}}}});}); Код ионо-со стороны меню в теле следующим образом :: <Ion-side-menus> <!-Center Content-> <Ion-side-menu-content> <Ion-Header-bar> <Кнопка ng-click = "toggleProjects ()"> <i> </i> </button> <h1> {{{acativeProject ng-click = "newtask ()"> <i> </i> </button> </oon-header-bar> <ion-content scroll = "false"> <Ion-list> <Ion-item ng-repeat = "task in activeProject.tasks"> {kask.title}} </ion-item> </ionist> </itist> </ionist> </orite-list> </orite-list> </of column--><ion-side-menu side="left"><ion-header-bar><h1>Projects</h1><button 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}} </oon-item> </ионно-list> </ион-content> </ионно-стороны-menu> </ион-сторона-menus>Приведенный выше контент - это весь код того, как Ionic создает проект приложения, который редактор представил вам. Я надеюсь, что это будет полезно для всех!