Ionic Create App

From WikiOD

Ionic create app[edit | edit source]

In the previous chapters, we have learned how to import the ionic framework into the project.

Next, we will introduce how to create an ionic APP application.

ionic creates an APP using HTML, CSS and Javascript to build, so we can create a www directory and create an index.html file in the directory, the code is as follows:

 <!DOCTYPE html>
 <code><html>
   <head>
     <meta charset="utf-8"></code>
 <code> </code>   <code><title>Todo</title></code>
 <code> </code>   <code><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></code>
 
 <code> </code>   <code><link href="lib/ionic/css/ionic.css" rel="stylesheet"></code>
 
 <code> </code>   <code><script src="lib/ionic/js/ionic.bundle.js"></script></code>
 
     <code><script src="cordova.js"></script></code>
 <code> </code> <code></head></code>
 <code> </code> <code><body>
   </body></code>
 <code></html></code>

In the above code, we introduced Ionic CSS files, Ionic JS files and Ionic AngularJS extension ionic.bundle.js (ionic.bundle.js).

The ionic.bundle.js file already contains Ionic core JS, AngularJS, and Ionic's AngularJS extensions. If you need to import other Angular modules, you can call them from the lib/js/angular directory.

cordova.js is generated when using Cordova/PhoneGap to create an application. It does not need to be imported manually. You can find this file in the Cordova/PhoneGap project, so it is normal to display 404 during the development process.


Create APP[edit | edit source]

Next, let's implement an application that includes a title, sidebar, list, etc. The design diagram is as follows:

Image 244.png

Create a sidebar[edit | edit source]

The sidebar is created using the ion-side-menus controller.

Edit the index.html file we created earlier and modify the content 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, which can be expanded by clicking a button or sliding the screen.
  • ion-side-menu-content : A container that displays the main content. The menu can be expanded by sliding the screen.
  • ion-side-menu : The container for storing the sidebar.
Initialize the app[edit | edit source]

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">

Import the app.js file above the <script src="cordova.js"></script> of the index.html file:

 <script src="js/app.js"></script>

Modify the content of the body tag of the index.html file, the code is as follows:

 <body ng-app="todo">
   <ion-side-menus>
 
    <!-- Center Content-->
     <ion-side-menu-content>
       <ion-header-bar class="bar-dark">
         <code><h1 class="title">Todo</h1></code>
       </ion-header-bar>
       <ion-content>
       </ion-content>
     </ion-side-menu-content>
 
     <!-- Left menu-->
     <ion-side-menu side="left">
       <ion-header-bar class="bar-dark">
         <code><h1 class="title">Projects</h1></code>
       </ion-header-bar>
     </ion-side-menu>
 
   </ion-side-menus>
 </body>

We have completed the application of the ionic basic APP in the above steps.


Create a list[edit | edit source]

First create a controller Todo Ctrl :

 <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:'Rookie Tutorial' },
     {title:'www.phpxs.com' },
     {title:'Rookie Tutorial' },
     {title:'www.phpxs.com'}
   ];
 });

In the data list on the index.html page, we use Angular ng-repeat to iterate the data:

<!-- Center Content-->
 <ion-side-menu-content>
 <code> </code> <ion-header-bar class="bar-dark">
 <code> </code>   <code><h1 class="title">Todo</h1></code>
 <code> </code> </ion-header-bar>
 <code> </code> <ion-content>
     <ion-list>
 <code> </code>     <ion-item ng-repeat="task in tasks">
 <code> </code>       <code>{{task.title}}</code>
 <code> </code>     </ion-item>
 <code> </code>   </ion-list>
 <code> </code> </ion-content>
 </ion-side-menu-content>
The code in the index.html body tag after modification is as follows:
  <code><body ng-app="todo" ng-controller="TodoCtrl">
     <ion-side-menus>
 
     <ion-side-menu-content>
       <ion-header-bar class="bar-dark">
         <h1 class="title">Todo</h1></code>
 <code> </code>     </ion-header-bar>
 <code> </code>     <ion-content>
         <ion-list>
 <code> </code>         <ion-item ng-repeat="task in tasks">
 <code> </code>           <code>{{task.title}}</code>
 <code> </code>         </ion-item>
 <code> </code>       </ion-list>
 <code> </code>     </ion-content>
 <code> </code>   </ion-side-menu-content>
 
     <ion-side-menu side="left">
 <code> </code>     <ion-header-bar class="bar-dark">
 <code> </code>       <code><h1 class="title">Projects</h1></code>
 <code> </code>     </ion-header-bar>
 <code> </code>   </ion-side-menu>
 
 <code> </code>   </ion-side-menus>
 <code> </code>   <code><script src="http://www.phpxs.com/static/ionic/js/app.js"></script></code>
 <code> </code>   <code><script src="cordova.js"></script></code>
 <code></body></code>
----

Create add page[edit | edit source]

Modify index.html and add the following code after </ion-side-menus> :

 <script id="new-task.html" type="text/ng-template">
 
   <code><div class="modal"></code>
 
    <!-- Modal header bar -->
     <ion-header-bar class="bar-secondary">
       <code><h1 class="title">New Task</h1></code>
       <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
     </ion-header-bar>
 
     <!-- Modal content area -->
     <ion-content>
 
       <form ng-submit="createTask(task)">
         <code><div class="list"></code>
           <label class="item item-input">
             <input type="text" placeholder="What do you need to do?" ng-model="task.title">
           </label>
         <code></div></code>
         <code><div class="padding"></code>
           <button type="submit" class="button button-block button-positive">Create Task</button>
         <code></div></code>
       </form>
 
     </ion-content>
 
   <code></div></code>
 
 </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 attribute 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 class="bar-dark">
 <code> </code> <code><h1 class="title">Todo</h1></code>
   <code><button class="button button-icon" ng-click="newTask()">
     <i class="icon ion-compose"></i></code>
 <code> </code> <code></button></code>
 </ion-header-bar>
 <ion-content>
   <ion-list>
 <code> </code>   <ion-item ng-repeat="task in tasks">
 <code> </code>     <code>{{task.title}}</code>
 <code> </code>   </ion-item>
 <code> </code> </ion-list>
 </ion-content>
 </ion-side-menu-content>

In the app.js file, the controller code is as follows:

 angular.module('todo', ['ionic'])
 
 .controller('TodoCtrl', function($scope, $ionicModal) {
   $scope.tasks = [
     {title:'Rookie Tutorial' },
     {title:'www.phpxs.com' },
     {title:'Rookie Tutorial' },
     {title:'www.phpxs.com'}
   ];
 
   // Create and load the model
   $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
     $scope.taskModal = modal;
   }, {
     scope: $scope,
     animation:'slide-in-up'
   });
 
   // Called when the form is submitted
   $scope.createTask = function(task) {
     $scope.tasks.push({
       title: task.title
     });
     $scope.taskModal.hide();
     task.title = "";
   };
 
   // Open the new model
   $scope.newTask = function() {
     $scope.taskModal.show();
   };
 
   // Close the newly added model
   $scope.closeNewTask = function() {
     $scope.taskModal.hide();
   };
 });
----

Create a sidebar[edit | edit source]

Through the above steps, we have realized the new function, and now we add the sidebar function to the app.

Modify the content in <ion-side-menu-content> , the code is as follows:

<!-- Center Content-->
 <ion-side-menu-content>
 <code> </code> <ion-header-bar class="bar-dark">
 <code> </code>   <code><button class="button button-icon" ng-click="toggleProjects()">
       <i class="icon ion-navicon"></i></code>
 <code> </code>   <code></button></code>
 <code> </code>   <code><h1 class="title">{{activeProject.title}}</code><code></h1></code>
     <code><button class="button button-icon" ng-click="newTask()">
       <i class="icon ion-compose"></i></code>
 <code> </code>   <code></button></code>
 <code> </code> </ion-header-bar>
 <code> </code> <ion-content scroll="false">
 <code> </code>   <ion-list>
 <code> </code>     <ion-item ng-repeat="task in activeProject.tasks">
 <code> </code>       <code>{{task.title}}</code>
 <code> </code>     </ion-item>
 <code> </code>   </ion-list>
 <code> </code> </ion-content>
 </ion-side-menu-content>

Add a sidebar:

<!-- Left column-->
 <ion-side-menu side="left">
 <ion-header-bar class="bar-dark">
 <code> </code> <code><h1 class="title">Projects</h1></code>
 <code> </code> <code><button class="button button-icon ion-plus" ng-click="newProject()">
   </button></code>
 </ion-header-bar>
 <ion-content scroll="false">
 <code> </code> <ion-list>
 <code> </code>   <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
 <code> </code>     <code>{{project.title}}</code>
 <code> </code>   </ion-item>
 <code> </code> </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 (in order not to 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 project
       return {
         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 projectTitle
   var 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 projects
     Projects.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 code of ion-side-menus in the body is as follows:

 <ion-side-menus>
 
 <ion-side-menu-content>
 <code> </code> <ion-header-bar class="bar-dark">
 <code> </code>   <code><button class="button button-icon" ng-click="toggleProjects()">
       <i class="icon ion-navicon"></i></code>
 <code> </code>   <code></button></code>
 <code> </code>   <code><h1 class="title">{{activeProject.title}}</code><code></h1></code>
     <code><button class="button button-icon" ng-click="newTask()">
       <i class="icon ion-compose"></i></code>
 <code> </code>   <code></button></code>
 <code> </code> </ion-header-bar>
 <code> </code> <ion-content scroll="false">
 <code> </code>   <ion-list>
 <code> </code>     <ion-item ng-repeat="task in activeProject.tasks">
 <code> </code>       <code>{{task.title}}</code>
 <code> </code>     </ion-item>
 <code> </code>   </ion-list>
 <code> </code> </ion-content>
 </ion-side-menu-content>
 
 <ion-side-menu side="left">
 <ion-header-bar class="bar-dark">
 <code> </code> <code><h1 class="title">Projects</h1></code>
 <code> </code> <code><button class="button button-icon ion-plus" ng-click="newProject()">
   </button></code>
 </ion-header-bar>
 <ion-content scroll="false">
 <code> </code> <ion-list>
 <code> </code>   <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
 <code> </code>     <code>{{project.title}}</code>
 <code> </code>   </ion-item>
 <code> </code> </ion-list>
 </ion-content>
 </ion-side-menu>
 
 </ion-side-menus>