Simple Todo app with Ionic framework

Simple Todo app with Ionic framework

In this first tutorial for the Ionic Framework we are going to see how to create a simple Todo application with this beautiful framework. The beauty of this framework is the possibility to get the app compiled for almost every mobile platform in a minute.

It also use AngularJS as the programming framework and this make things a lot more easy, with double data binding and component injection.

Let start creating our blank app from command line.

  • ionic start ionicTodo blank
  • cd todoapp
  • ionic serve

Now we have our newly created app running in the browser. I usually prefer to use chrome for the possibility of simulate a real device.

First of all we need a new angular service module to work as the model part of our application. For this simple tutorial we will write all of our javascript in the same app.js file.


app.service('Todo', function() {

    var todos = [
        {'title': 'Test1', 'done': 'false'}, 
        {'title': 'Test2', 'done': 'false'}, 
        {'title': 'Test3', 'done': 'true'}, 
        {'title': 'Test4', 'done': 'true'}];

    this.list = function() {
        return todos;
    }

    this.add = function(todo) {
        todos.splice(0, 0, todo);
    }

});


It’s enough to define just 2 function in the AngularJS service. One is for add the todo items and one for retrieving all of them.

To interact with our model let’s start defining a Controller injecting the previous create Todo service.


app.controller('todoController', ['$scope', 'Todo',
function($scope, Todo) {

    $scope.todos = Todo.list();
    $scope.addTodo = function(todo) {
        todo.done=false;
        Todo.add(angular.copy(todo));
        todo.title = '';

    }

}
]);


In the controller we retrive all the todos in the service and then define a function to store newly added todos. The last thing we need to make this app working is a view.

For the sake of simplicity following is listed just the code for the body section of the index.html file.


<body ng-app="starter">
    <ion-pane>
    <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content ng-controller="todoController">
    <ul class="list">
      <label class="item item-input">
        <input type="text" placeholder="New Todo" ng-model="todo.title">
      </label>
      <button class="button button-block button-positive" ng-click="addTodo(todo)">
      Add
      </button>
      <li class="item item-checkbox" ng-repeat="todo in todos">
        <label class="checkbox">
          <input type="checkbox" ng-model="todo.done" ng-checked={{todo.done}}>
        </label> {{todo.title}}
      </li>
    </ul>
    </ion-content>
    </ion-pane>
  </body>


Now if you run your app in the browser you will be able to create new todos and also check it as done or not.

This is a really basic app so we will not deploy for a device. I prefer to show more about that in another tutorial plus how to manage the storage of the list and deletion of todo items.

Cheerss! Happy coding!

Adam Brown
Please follow and like us:

Leave a Comment