AngularJS Codeigniter base_url path settings - angularjs

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>Button Button</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.

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.