AngularJS Codeigniter base_url path settings

Question

I am creating a website with Codeigniter 3 and AngularJs. While delevolping i have faced some issues with base url in codeigniter. Im attaching an image file of my directory struture.

In my mainpage(views/home.php) i put a ng-view for loading different pages. Here i am using angularjs ngRoute for routing.

Here is my code.

 var myApp = angular.module("myApp",["ui.bootstrap","ui.router","ngRoute"]);
 myApp.config(function($routeProvider) {
   $routeProvider
   .when("/", {
    templateUrl : "application/pages/mainpage.php"
    })
   .when("/about", {
    templateUrl : "application/pages/about.html"
    })
   .when("/services", {
    templateUrl : "application/pages/services.html"
    })
   .otherwise("/",{
    templateUrl:  "application/pages/mainpage.php"
   });
 });

Inside that mainpage.php i am listing some profile contents(dummy contents) which is residing inside a json file(datas/data.json). And all the content were listing. And inside this listing i placed a button with ng-click="myName"

Here is the code:

  <div class="container" ng-controller="ListController">

<div class="row">
    <div class="col-lg-12 text-center">
        <h1>Starter Template</h1>
        <p class="lead">Complete with pre-defined file paths that you won't have to change</p>

        <div class="row">
            <div class="col-sm-6 col-md-4 wow zoomIn" data-wow-delay="0.5s" ng-repeat="items in artists">
                <div class="thumbnail">
                    <img ng-src="{{settings.base_url}}/application/assets/images/profile/{{items.shortname}}.jpg" alt="...">

                    <div class="caption">
                        <h3>{{items.name}}</h3>
                        <p>{{items.bio}}</p>
                        <p><a href="javascrip:void(0);" class="btn btn-primary" ng-click="myName()" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>


        </div>
    </div>
  </div>

  <!-- /.row -->
 </div>

All my js code were wriiten in app.js(assets/js/app.js) including Angular Js. In this js file i have setup a base_url variable same as in codeigniter config.php file

$config['base_url'] = 'http://localhost/AngularExPack/Angular_Bootstrap_CI_1/';

inside app.js

var base_url= 'http://localhost/AngularExPack/Angular_Bootstrap_CI_1/'

When i click on my button with ng-click="myName" i want to get a controller(Codeigniter controller) and want to execute a function inside that controller. Here iam using auth.php(controllers/auth.php) and function name as functionOne();

    public function functionOne()
    {
        /*$this->load->view('home1');*/
         echo "hai";
    }

For that iam using $hhtp.post and var base_url for path. But i didnt get that output and it is not passing to that controller.

       myApp.controller('ListController', ['$scope', '$http', 'settings', function($scope, $http) {

                 $http.get('application/datas/data.json').success(function(data) {
                     $scope.artists = data;
                 });

                 $scope.myName = function() {
                     alert("hai1");
                     /**/
                     $http.post(base_url + 'auth/functionOne').success(function(response) {
                         $scope.data = response
                         console.log($scope.data);
                         alert($scope.data);
                     });

                 }

             }]);

ng-click="myName" function works fine. But it is not passing to the function functionOne inside that controller auth.php. I think the issue is probably with the base_url path. If any one knows this plz help me to solve this issue.

Outrush

it may have something to do with $config['csrf_protection'] = TRUE; which you find in codeigniter config file – Sullen

Thanks for ur comment. I tried but not working. – Outrush

Answer 1

Well, I don't know it this will help you, but this is how I am doing it:

I have this function in a service:

 saveFunction: function(obj, user, securityToken){  
            return $http({
            method: 'POST',
            url: 'index.php/controller/saveFUnction',
            data: $.param({
                postID: obj.id  ,
                csrfTokenName: securityToken,
                postName: obj.name,
                .....
                userID: user.id                 
            }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
    }

if your csrfToken is active in codeigniter config, you need to pass it in your form, as hidden type field. Also, you must set the content type in the headers.

Sullen