Try this:
$routeProvider.
when('/list', {
templateUrl: 'list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
Question
This is the situation:
I am building an app with Codeigniter + Angular Js.
Right now it is a simple app that grab some data from a database and display it in a table. To build the app further i need to put the list inside a partial folder, but i am not able to load the file that need to be included.
This is the question:
How can i use partials in a Codeigniter + Angular Js project?
Where i need to put the partials folder?
This is the code:
The file index.html:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/angular-route.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/controllers.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Codeigniter + Angular Js App</h1>
<div class="main col-md-12" ng-view></div>
</body>
</html>
The partial file list.html:
<section>
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="user in users">
<td><a href="#/user/{{user.user_id}}">{{user.name}}</a></td>
<td>{{user.year}}</td>
</tr>
</table>
</section>
This is the file app.js:
var myApp = angular.module('myApp', [
'ngRoute',
'userControllers',
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
The file controllers.js:
var userControllers = angular.module('userControllers',[]);
userControllers.controller('ListController',['$scope','$http', function ($scope,$http)
{
// Initialising the user array.
$scope.users = [];
// Getting the list of users through ajax call.
$http({
url: 'http://127.0.0.1/Angular/4-SampleApp2/main/json_get_users',
method: "POST",
}).success(function (data) {
$scope.users= data;
});
}]);
Right now the 'partials' folder is inside the 'views' folder, and inside there is one file: list.html
The table with the list of users is not loaded anymore. Someone knows how can i load partials into a Codeigniter+Angular project? Thank you very much!
EDIT:
This is the error message in the console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1/Angular/4-SampleApp2/partials/list.html
Solution
Try this:
$routeProvider.
when('/list', {
templateUrl: 'list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
OTHER TIPS
In my case, I have all site inside a subfolder /ci22, so this is what I did (works like a charm):
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/adminpanel_controller', {
templateUrl: 'ci22/adminpanel_view.php',
controller: 'DashboardController'
})
.when('/ci22/categorias_controller', {
templateUrl: '/ci22/categorias_controller',
controller: 'Categoriasv2Controller'
})
.when('/ci22/idiomas_controller', {
templateUrl: '/ci22/idiomas_controller',
controller: 'IdiomasController'
});
$locationProvider.html5Mode(true);
}])
for my project, as I used codeigniter-modular-extensions-hmvc my partials are under my modules' views folder
i.e /project/application/modules/mymodule/views/list.html
Then I can use
myApp.config(function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: '<?=base_url()."mapplication/modules/".$this->router->fetch_module();?>/views/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
});
In my case, I created a .htaccess
Order allow,deny
Allow from all
under modules directory
Follow these steps to get AngularJS routing to work through Codeigniter's partial folder:
Inside the controllers folder, create a Partials.php file with the following code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Partials extends CI_Controller {
public function view($view)
{
$this->load->view('partials/'.$view);
}
}
Go to applications > config > routes.php and add this code at the bottom
$route['partials/(:any)'] = "partials/view/$1";
Finally, setup your route.js file assuming you have your app.js file setup with the var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).otherwise({
redirectTo: '/list'
});
}]);