Simple ToDo list using IONIC - Part II

Simple ToDo list using IONIC - Part II

In the previous post we have seen how to create an hybrid mobile application using IONIC framework to manage list of to-do tasks. If you haven't read that part, please visit the post.

If you note, in the previous post, we haven't stored the tasks that we created or marked as complete. So when we close the app and reopen it again it will not shown any tasks in the view. So, in this post we will how we can store them locally and then retrieve and render them in the view.

We will make use of browser local storage to store the created tasks and we will use an angular module that gives us access to the browser local storage. that is angular-local-storage.

To have this module in our app, follow the following steps.

• Navigate to the todo app folder in cmd prompt tool
• Run this npm command npm install angular-local-storage
• Copy the angular-local-storage.min.js file from todo\node_modules\angular-local-storage\dist\ folder and paste it inside todo\www\lib\ionic\js\ folder.
• Refer angular-local-storage.min.js in index.html file below ionic.bundle.js like this

       <script src="lib/ionic/js/angular-local-storage.min.js"></script>

• Add LocalStorageModule module in the application starter module in app.js file like this 

      angular.module('starter', ['ionic','LocalStorageModule'])

That's it. LocalStorage module is now available in our app to store and retrieve tasks in the browser's local storage.

This added LocalStorageModule has an service named localStorageService that we can use to set and get data in the local storage. and that needs to be added in controller as dependency like this.

angular.module('starter')

    .controller('todoCtrl', ['$scope', 'localStorageService',

        function($scope, localStorageService) {

Let us store the data in local storage as key-value pair and with key name as "todo_lists" as below.

var TODO_KEY = "todo_lists";

var setDataToLS = function(data){

  localStorageService.set(TODO_KEY , data);

};

var getDatafromLS = function(){

  return localStorageService.get(TODO_KEY );

};

setDataToLS function would store the data against todo_lists key in local storage.

getDatafromLS function would retrieve the data from local storage.

Next thing, let us introduce a function to load named loadToDo all complete and incomplete tasks from local storage.

var loadToDo = function(){  

  var data = getDatafromLS(); 

  if(data){

    $scope.tasks = data;

  }else{

    $scope.tasks = {'completed':[], 'incomplete':[] };

  }

};

Nothing special here. we just get the data from local storage and store it in a variable named data. In detail, if there are already some tasks then assign to data else if there are no tasks created so far lets create empty complete and incomplete arrays in an object and assign it to data variable.

This loadToDo function is the first one that needs to be called when we open the app so that it will load all tasks in the view. To do that let us call this function inside the controller as below.

loadToDo();

Next thing is we need to store the tasks whenever we create newly or update tasks from incomplete to complete and vice versa.

For that let us call setDataToLS function in addTask, deleteTask and toggleTaskCompleted function as below

$scope.addTask = function(task) {

                $scope.tasks.incomplete.splice(0, 0, {

                    'name': task.name

                });

                $scope.task = {};

                setDataToLS($scope.tasks);

            };

$scope.deleteTask = function(from, task) {

                if (from == "incomplete") {

                    $scope.tasks.incomplete.splice($scope.tasks.incomplete.indexOf(task), 1);

                } else {

                    $scope.tasks.complete.splice($scope.tasks.complete.indexOf(task), 1);

                }

                setDataToLS($scope.tasks);

            };

$scope.toggleTaskCompleted = function(from, task) {

                if (from == "incomplete") {

                    var removedTask = $scope.tasks.incomplete.splice($scope.tasks.incomplete.indexOf(task), 1);

                    $scope.tasks.complete.splice(0, 0, removedTask[0]);

                } else {

                    var removedTask = $scope.tasks.complete.splice($scope.tasks.complete.indexOf(task), 1);

                    $scope.tasks.incomplete.splice(0, 0, removedTask[0]);

                }

                setDataToLS($scope.tasks);

            };

That's it. Now all the tasks will be shown when you open the app.

To view the result in device run below command

ionic run android

I have kept the www folder of  this project in github. You can download and play around with that.

Just create an empty project and then replace the www folder with this www in github folder to get it working.

Thanks,

Jey