In the previous chapters, we have learned how to import the ionic framework into a project.
Next, we will introduce how to create an ionic APP.
An ionic APP is built using HTML, CSS, and Javascript. Therefore, we can create a `www` directory and create an `index.html` file within it, with the code as follows:
Todo
In the code above, we have included the Ionic CSS file, Ionic JS file, and the Ionic AngularJS extension `ionic.bundle.js`.
The `ionic.bundle.js` file already contains the Ionic core JS, AngularJS, and Ionic's AngularJS extensions. If you need to include other Angular modules, you can call them from the `lib/js/angular` directory.
`cordova.js` is generated when creating an application using Cordova/PhoneGap and does not need to be manually included. You can find this file in a Cordova/PhoneGap project, so it is normal for it to show a 404 during development.
* * *
## Creating the APP
Next, we will implement an application that includes a header, sidebar, list, etc. The design mockup is as follows:
!(#)
### Creating the Sidebar
The sidebar is created using the `ion-side-menus` controller.
Edit the `index.html` file we created earlier and modify the content within the `` tag as follows:
Controller explanation:
* **ion-side-menus:** A container with side menus that can be opened by clicking a button or swiping the screen.
* **ion-side-menu-content:** The container for displaying the main content, which can be used to open the menu by swiping the screen.
* **ion-side-menu:** The container that holds the sidebar.
### Initializing 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:
Include the `app.js` file in `index.html` above the `` tag:
Modify the content of the `body` tag in `index.html` as shown below:
Todo
Projects
[Try it »](#)
With the above steps, we have completed the basic ionic APP application.
* * *
## Creating a List
First, create a controller **TodoCtrl**:
In the `app.js` file, define the list data using the controller:
angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope) { $scope.tasks = [ { title: '' }, { title: 'www.' }, { title: '' }, { title: 'www.' } ];});
In the `index.html` page, we use Angular's `ng-repeat` to iterate over the data list:
Todo
{{task.title}}
The modified code within the `body` tag of `index.html` is as follows:
Todo
{{task.title}}
Projects
[Try it »](#)
* * *
## Creating the Add Page
Modify `index.html` by adding the following code after ****:
New Task
In the code above, we define a new template page using ****.
The `createTask(task)` function is triggered when the form is submitted.
`ng-model="task.title"` assigns the input data from the form to the `title` property of the `task` object.
Modify the content within **** as follows:
Todo
{{task.title}}
In the `app.js` file, the controller code is as follows:
angular.module('todo', ['ionic']).controller('TodoCtrl', function($scope, $ionicModal) { $scope.tasks = [ { title: '' }, { title: 'www.' }, { title: '' }, { title: 'www.' } ]; // Create and load the modal $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 modal $scope.newTask = function() { $scope.taskModal.show(); }; // Close the new modal $scope.closeNewTask = function() { $scope.taskModal.hide(); };});
* * *
## Creating the Sidebar
Through the above steps, we have implemented the add functionality. Now, we add the sidebar functionality to the app.
Modify the content within **** as follows:
{{activeProject.title}}
{{task.title}}
Add the sidebar:
Projects
{{project.title}}
The `ng-class` directive in `` sets the active style for the menu.
Here we create a new JS file `app2.js` (to avoid confusion with the previous one), with the code 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 `ion-side-menus` code in the `body` is as follows:
YouTip