Adding Angular to an existing CodeIgniter project

Angular usually serves the content from AJAX calls, so you should use CodeIgniter as the webservice API framework.

Let's think you're going to implement a simple list:

First, create your Angular project using sample data (by hardcoding values, for example). When you have your product list working.

HTML

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    "One",
    "Two",
    "Three",
    "Four"
  ];
  
});

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item}}</a>
  </li>
</ul>  
</div>

For now, elements are hardcoded. But we need this elements to be dynamic, with CodeIgniter served data.

For that, create a folder named 'api' at the 'www' folder of your server. Then upload all the CodeIgniter source files. If you have done it correctly, you should see the 'Welcome' controller when you access 'http://yourdomain.com/api'.

For this, I recommend to use this CodeIgniter plugin that allows you to easily create a Webservice API Rest. The main objective is to serve a json object when the Angular asks for data. Then Angular will do the rest.

A brief example:

<?php

header("Content-type: application/json");

class List extends CI_Controller
{
    function __construct()
    {
        // Here you can load stuff like models or libraries if you need
        $this->load->model("list_model"); // For example
    }

    /**
     * This method receives a parameter so it can 
     * filter what list wants the client to get
     */
    public function list1($list_number)
    {
        $list = $this->list_model->getList($list_number);

        // If list not exists
        if ( empty($list) ) {
            $this->output->set_status_header(404);
            echo json_encode(
                "success" => false,
            );
            return;
        } else { // If has returned a list
            // CodeIgniter returns an HTTP 200 OK by default
            echo json_encode(
                "success" => true,
                "list" => $list,
            );
            return;
        }
    }

}

Now we can take the info by AJAX. The same code above but changed to get the remote data:

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

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  // Replace link bellow by the API url
  // For this example it would be:
  // http://yourdomain.com/api/list/list1/1
  $http.get("https://codepen.io/anon/pen/VExQdK.js").
  success(function(res) {
    console.log(res);
    if ( res.success == true ) {
      $scope.items = res.items;
    } else {
      $scope.items = [];
    }
  });  
}]);

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item.name}}</a>
  </li>
</ul>  
</div>

This way you can get a completely functional CodeIgniter API working with Angular. I like to organize methods in different controllers so code is structured to be "readable".

To modify or delete data on the server, you can use $http.post and send parameters to tell CodeIgniter which kind of operation has to do. Remember to use session data to protect the ajax calls of modifying/deleting information (for example if a user tries to update other user's info).

This is not a definitive way, but it's mine. I hope it helped you.