Create Todo App with CodeIgniter 3 + AngularJs – Part 2

Welcome to the second part of the tutorial on how to create simple Todo App with CodeIgniter 3 and AngularJS. In the first part of the tutorial, we focused on creating the API. In this tutorial, we will configure the AngularJS to interact with our API.

Please note that I’m using AngularJS version 1.3.15 in this tutorial. AngularJS is a framework which really helpful if you are developing single-page application which support AJAX out of the box.

You may download the full source code here.

1. Create a new view file named index.php with the html structure as follows:

<!DOCTYPE html>
<html lang="en" data-ng-app="todoApp">
	<head>
		<title>Pisyek Demo Todo App with CodeIgniter + AngularJS</title>
	</head>

	<body data-ng-controller="TodoCtrl">

		<script src="js/angular.min.js"></script>
		<script src="js/app.js"></script>
	</body>
</html>

Create app.js file and make sure you load the file right after AngularJS.

2. In the welcome controller, load the index.php view file which we have created just now.

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('index');
	}

Access your project folder via web browser and you should see a blank page.

3. In the app.js, we defined our app name and the controller. Make sure that the name is the same as in the view file.

var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoCtrl', function ($scope, $http) {

	$http.get('api/tasks').success(function(data){
		$scope.tasks = data;
	}).error(function(data){
		$scope.tasks = data;
	});

	$scope.refresh = function(){
		$http.get('api/tasks').success(function(data){
			$scope.tasks = data;
		}).error(function(data){
			$scope.tasks = data;
		});
	}

	$scope.addTask = function(){
		var newTask = {title: $scope.taskTitle};
		$http.post('api/tasks', newTask).success(function(data){
			$scope.refresh();
			$scope.taskTitle = '';
		}).error(function(data){
			alert(data.error);
		});
	}

	$scope.deleteTask = function(task){
		$http.delete('api/tasks/' + task.id);
		$scope.tasks.splice($scope.tasks.indexOf(task),1);
	}

	$scope.updateTask = function(task){
		$http.put('api/tasks', task).error(function(data){
			alert(data.error);
		});
		$scope.refresh();
	}

});

We use $http service for reading data from our API. If you notice the $http supports all CRUD functions;

  • $http.get : To retrieve records
  • $http.post : To create a new record
  • $http.put : To update a record
  • $http.delete : To delete a record

6 Replies to “Create Todo App with CodeIgniter 3 + AngularJs – Part 2”

Comments are closed.