In the previous chapters, we have learned how to import ionic frameworks into projects.
Next, we will introduce you how to create an ionic APP application.
ionic creates APPs are built using HTML, CSS and Javascript, so we can create a www directory and create an index.html file in the directory. The code is as follows:
Follow the steps to carefully complete the creation of this app on your editor.
<!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><!-- Files included in the APP created with Cordova/PhoneGap are provided by Cordova/PhoneGap (404 displayed during development) --><script src="cordova.js"></script></head><body></body></html>
In the above code, we have introduced the Ionic CSS file, the Ionic JS file and the Ionic AngularJS extension ionic.bundle.js (ionic.bundle.js).
The ionic.bundle.js file already contains the AngularJS extensions of Ionic core JS, AngularJS, and Ionic. If you need to introduce other Angular modules, you can call them from the lib/js/angular directory.
cordova.js is generated when creating an application using Cordova/PhoneGap. It does not require manual introduction. You can find the file in the Cordova/PhoneGap project, so it is normal to display 404 during development.
Create an APP
Next, we will implement an application that includes title, sidebar, list, etc. The design diagram is as follows:
Create a sidebar
Sidebar creation uses the ion-side-menus controller.
Edit the index.html file we created earlier and modify the contents in <body> as follows:
<body><ion-side-menus><ion-side-menu-content></ion-side-menu-content><ion-side-menu side="left"></ion-side-menu></ion-side-menus></body>
Controller analysis:
ion-side-menus: is a container with a sidebar menu that can be expanded by clicking a button or sliding the screen.
ion-side-menu-content: A container that displays the main content, you can expand menu by sliding the screen.
ion-side-menu: The container for storing the sidebar.
Initialize the APP
Next we create a new AngularJS module and initialize it. The code is located in www/js/app.js:
angular.module('todo', ['ionic'])Then add the ng-app attribute to our body tag:
<body ng-app="todo">
Introduce the app.js file on the <script src="cordova.js"></script> in the index.html file:
<script src="js/app.js"></script>
Modify the content of the index.html file body tag, the code is as follows:
<body ng-app="todo"><ion-side-menus><!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1></ion-header-bar><ion-content></ion-content><!-- Left menu--><ion-side-menu side="left"><ion-header-bar><h1>Projects</h1></ion-header-bar></ion-side-menu></ion-side-menu></body>
In the above steps, we have completed the application of the ionic basic APP.
Create a list
First create a controller TodoCtrl:
<body ng-app="todo" ng-controller="TodoCtrl">
In the app.js file, use the controller to define the list data:
angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope) {$scope.tasks = [{ title: 'novice tutorial' },{ title: 'www.runoob.com' },{ title: 'novice tutorial' },{ title: 'www.runoob.com' }];});In the index.html page, we use Angular ng-repeat to iterate through the data:
<!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1></ion-header-bar><ion-content><!-- List--><ion-list><ion-item ng-repeat="task in tasks">{{task.title}}</ion-item></ion-list></ion-content></ion-side-menu-content>After modification, the code in the index.html body tag is as follows:
<body ng-app="todo" ng-controller="TodoCtrl"><ion-side-menus><!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1></ion-header-bar><ion-content><!-- List--><ion-list><ion-item ng-repeat="task in tasks">{{task.title}}</ion-item></ion-list></ion-content><!-- Left menu--><ion-side-menu side="left"><ion-header-bar><h1>Projects</h1></ion-header-bar></ion-side-menu></ion-side-menus><script src="http://www.runoob.com/static/ionic/js/app.js"></script><script src="cordova.js"></script></body>Create an Add Page
After modifying index.html, add the following code after </ion-side-menus>:
<script id="new-task.html" type="text/ng-template"><div><!-- Modal header bar --><ion-header-bar><h1>New Task</h1><button ng-click="closeNewTask()">Cancel</button></ion-header-bar><!-- Modal content area --><ion-content><form ng-submit="createTask(task)"><div><label><input type="text" placeholder="What do you need to do?" ng-model="task.title"></label></div><div><button type="submit">Create Task</button></div></form></ion-content></div></script>
In the above code, we define a new template page through <script id="new-task.html" type="text/ng-template"> .
The createTask(task) function is triggered when the form is submitted.
ng-model=”task.title” will assign the input data of the form to the title property of the task object.
Modify the content in <ion-side-menu-content>, the code is as follows:
<!-- Center content--><ion-side-menu-content><ion-header-bar><h1>Todo</h1><!-- Add a button--><button ng-click="newTask()"><i></i></button></ion-header-bar><ion-content><!-- List--><ion-list><ion-item ng-repeat="task in tasks">{{task.title}}</ion-item></ion-list></ion-content></ion-side-menu-content>app.js file, the controller code is as follows: angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope, $ionicModal) {$scope.tasks = [{ title: 'Novice Tutorial' },{ title: 'www.runoob.com' },{ title: 'Novice Tutorial' },{ title: 'www.runoob.com' }];// Create and load the model $ionicModal.fromTemplateUrl('new-task.html', function(modal) {$scope.taskModal = modal;}, {scope: $scope,animation: 'slide-in-up'});// Call $scope.createTask = function(task) {$scope.tasks.push({title: task.title});$scope.taskModal.hide();task.title = "";};// Open the newly added model $scope.newTask = function() {$scope.taskModal.show();};// Close the newly added model $scope.closeNewTask = function() {$scope.taskModal.hide();};});Create a sidebar
Through the above steps, we have implemented new features, and now we add sidebar function to the app.
Modify the content in <ion-side-menu-content>, the code is as follows:
<!-- Center content--><ion-side-menu-content><ion-header-bar><button ng-click="toggleProjects()"><i></i></button><h1>{{activeProject.title}}</h1><!-- Add a button--><button ng-click="newTask()"><i></i></button></ion-header-bar><ion-content scroll="false"><ion-list><ion-item ng-repeat="task in activeProject.tasks">{{task.title}}</ion-item></ion-list></ion-content></ion-side-menu-content>Add a sidebar: <!-- Left-bar--><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}}</ion-item></ion-list></ion-content></ion-side-menu>The ng-class directive in <ion-item> sets the menu activation style.
Here we create a new js file app2.js (to not be confused with the previous one), the code is as follows:
angular.module('todo', ['ionic'])/*** The Projects factory handles saving and loading projects* from local storage, and also lets us save and load the* last active project index.*/.factory('Projects', function() {return {all: function() {var projectString = window.localStorage['projects'];if(projectString) {return angular.fromJson(projectString);}return [];},save: function(projects) {window.localStorage['projects'] = angular.toJson(projects);},newProject: function(projectTitle) {// Add a new projectreturn {title: projectTitle,tasks: []};},getLastActiveIndex: function() {return parseInt(window.localStorage['lastActiveProject']) || 0;},setLastActiveIndex: function(index) {window.localStorage['lastActiveProject'] = index;}}}).controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {// 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);}// Load or initialize projects$scope.projects = Projects.all();// Grab the last active, or the first project$scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];// Called to create a new project$scope.newProject = function() {var projectTitle = prompt('Project name');if(projectTitle) {createProject(projectTitle);}};// Called to select the given project$scope.selectProject = function(project, index) {$scope.activeProject = project;Projects.setLastActiveIndex(index);$ionicSideMenuDelegate.toggleLeft(false);};// Create our modal$ionicModal.fromTemplateUrl('new-task.html', function(modal) {$scope.taskModal = modal;}, {scope: $scope});$scope.createTask = function(task) {if(!$scope.activeProject || !task) {return;}$scope.activeProject.tasks.push({title: task.title});$scope.taskModal.hide();// Inefficient, but save all the projectsProjects.save($scope.projects);task.title = "";};$scope.newTask = function() {$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 initialized// properly$timeout(function() {if($scope.projects.length == 0) {while(true) {var projectTitle = prompt('Your first project title:');if(projectTitle) {createProject(projectTitle);break;}}}});}); The ion-side-menus code in body is as follows:: <ion-side-menus><!-- Center content--><ion-side-menu-content><ion-header-bar><button ng-click="toggleProjects()"><i></i></button><h1>{{activeProject.title}}</h1><!-- Add a button --><button ng-click="newTask()"><i></i></button></ion-header-bar><ion-content scroll="false"><ion-list><ion-item ng-repeat="task in activeProject.tasks">{{task.title}}</ion-item></ion-list></ion-content><!-- Left 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}}</ion-item></ion-list></ion-content></ion-side-menu></ion-side-menus>The above content is the entire code of how Ionic creates an APP project that the editor introduced to you. I hope it will be helpful to everyone!