Subscribe via RSS Feed

Task List with Angular.js, HTML5 Local Storage and Decorate with Bootstrap in Google Chrome Extension

June 19, 2013 0 Comments

We had an idea to add a Daily Task List as Google Chrome Extension with News Feed Reader related to daily interested news to us.

So here is a Chrome Extension made with following integrated tools -
1>

Angular.js

to make the Task List and Task Adding Functionalities.

2>

HTML5 Localstorage

to keep the task data in temporary storage and serve those from there.

3> Integrated our

Personal Feed Reader

to make the useful news available to us.

4> Made a Bare minimum

Google Chrome Extension

to be available in Google Chrome Browser.

Here are our previous posts related to -

HTML5 and LocalStorage -

A> HTML5 LocalStorage and Json Object – Some Operations

RSS Feed Reader -

B> Creating RSS Feed Reader and Decorating with Bootstrap.js and CSS

Integration of Feed reader in Google Chrome Extension -

C> Creating Google Chrome Extension to add a Custom RSS Feed Reader

Here is our code base for the Work with Angular.js, HTML5 locastorage and RSS Feed Reader.

Also reader can find the code in github.

Also here is our Google Chrome Extension.

Reader can have it live in Google Chrome Webstore.

We have discussed the part of making rss feed reader, Bootstrap integration and making google chrome extension in earlier mentioned articles in this post.

Below is the picture for the Extension -

Task List and Feed Reader

Here we mainly show and discuss about Angular.js and HTML5 localstorage integration. We will comment inline within the code to understand the work.

HTML templates in Angular.js
========================

To show the list of Tasks, the codes are (listtodo.html) -


<form ng-submit="clear()">  <!-- On submit of this form clear method in controller will fire -->
   <div style="float:right;"><center><button type="submit" >Clear Tasks</button></center></div>
      <ul style="list-style-type:none">
         <li ng-repeat="todo in todos" > <!-- Our favourite repeater functionality from angular.js -->
            <p>{{todo.task}}</p> <!-- Task element in todo object will be shown here. It is a Json Element -->
         </li>
      </ul>
</form>

To show the Addition of Tasks, the codes are (addtodo.html) -

<form ng-submit="save()"> <!-- The method in controller which will save data in localstorage-->
   <fieldset>
      <legend>New Task</legend>
      <div class="control-group">
         <center><input type="text" placeholder="Task…" ng-model="task" size=50 required/></center> <!--Angular.js Model-->
      </div>
   </fieldset>
   <p>
       <div><center><button type="submit" >Remember it...</button></center></div>
   </p>
</form>

Main Code snippets in index.html are -


<html lang="en" ng-app="taskslist" ng-csp=""> <!-- enable angular.js in chrome extension (ng-csp)
.....
<div ng-controller="TaskListCtrl" > <!-- Angular Controller which is responsible to render the data in View -->
.....
<div id="addtodo" class="tab-pane fade" ng-include="'views/addtodo.html'"></div> 
<div id="listtodo" class="tab-pane fade active in" ng-include="'views/listtodo.html'"></div>
<!-- adding the angular templates with ng-include -->

Now the main code snippet in controller -

  /* Controllers */
  function TaskListCtrl($scope,$location) {

    $scope.save = function() {
          var tmpVar = {}; 
	  tmpVar.task = this.task; // new json object to get the data from angular.js model
	  this.task = '';
	  $scope.todos.push(tmpVar); // pushing the json object in array in angular $scope variable
	  localStorage.setItem("todoList", JSON.stringify($scope.todos)); // saving array in html5 local storage
	  console.log($scope.todos.length);
	  $scope.list();
    };

    //Data Load
    $scope.list = function(){ 	 
	  if(typeof $scope.todos ==='undefined')
	  {
		  if(localStorage.getItem("todoList") ===null)
		  {
		  	$scope.todos = [];
		  }
		  else
		  {
		  	$scope.todos = JSON.parse(localStorage.getItem("todoList")); // get value from localstorage
		  }
	  } 
	  else
	  {
		  console.log('length'+$scope.todos.length);
	  }
	};

    $scope.clear = function(){ 	
		  $scope.todos = [];
		  localStorage.setItem("todoList", JSON.stringify($scope.todos)); 
                  // clear all value in particular storage variable in HTML5 localstorage
	};

   $scope.list(); // whenever we are through this angular controller, we will fire the list method
   if(!$scope.$$phase) {
	$scope.$apply(); // apply all changes in angular $scope
   }
}

So…that is all for now. Keep commenting and try to implement chrome extensions according to your need…also..if you find the article useful…share it in Google Plus or tweet it…

And add the Chrome Extension in your Chrome Browser if you like it…

Enter your email address:

Delivered by FeedBurner