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.

it may have something to do with $config['csrf_protection'] = TRUE; which you find in codeigniter config file — gianni, Aug 05 '16 at 12:20

score 0 · Answer 1 · answered Aug 05 '16 at 13:53

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.

AngularJS Codeigniter base_url path settings

1 Answers1