Posted on by pisyek

Create Todo App with CodeIgniter 3 + AngularJs – Part 2

CodeIgniter Logo

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
Pages: 1 2

You may be interested in:

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

    1. Hi Jeff

      The model can be a simple CRUD like my previous codeigniter blog tutorial.

      Thank you for asking.

  2. Is there a github repository to look/experiment with the complete code?

Comments are closed.