Codeigniter+Angular Js: How to use partials?

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

Do you have any .htaccess that would redirect the partial's request to index.php? (Let's say, if your .htaccess does not ignore .html files for example.) — Maxime Morin
– Maxime Morin, Commented Apr 22, 2014 at 16:43
Right now there is a .htaccess file inside the 'views' folder. I think is a codeigniter default file. The content is: Deny from all. I did not create any other .htaccess and inside the folder partials there is no .htaccess file. — FrancescoMussi
– FrancescoMussi, Commented Apr 22, 2014 at 16:46

Usman Faisal · Accepted Answer · 2014-04-22 16:48:34Z

1

Try this:

$routeProvider.
when('/list', {
    templateUrl: 'list.html',
    controller: 'ListController'
}).
otherwise({
    redirectTo: '/list'
});

answered Apr 22, 2014 at 16:48

Usman Faisal

2572 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FrancescoMussi Over a year ago

I have tried. Copying the file in the 'views' folder, but it seems is not working. Thanks anyway

Usman Faisal Over a year ago

Did you do the console log of $scope.users in browser? See if list.html not dispaly at all or just ng-repeat thing?

FrancescoMussi Over a year ago

Thank you for the tip. I have edited the question including the error message in the console

kcho0 · Accepted Answer · 2015-01-28 04:59:18Z

1

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);
}])

answered Jan 28, 2015 at 4:59

kcho0

1691 gold badge1 silver badge7 bronze badges

1 Comment

andhikaribrahim Over a year ago

does the html5mode working when you refresh the page on your secondhand routes? i mean, not on your 'on-load' routes.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

First of all, make sure the folder path is correct

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'
    });
});

As codeigniter forbidden the direct access of the application directory, you may need to create a .htaccess to allow the angularjs routeProvider to load in the files.

In my case, I created a .htaccess

Order allow,deny
Allow from all

under modules directory

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 19, 2014 at 4:35

Katrin

8911 gold badge12 silver badges23 bronze badges

Comments

spz1 · Accepted Answer · 2017-04-10 22:13:21Z

0

Follow these steps to get AngularJS routing to work through Codeigniter's partial folder:

Go to application > controllers

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'
     });
 }]);

answered Apr 10, 2017 at 22:13

spz1

471 silver badge9 bronze badges

1 Comment

FrancescoMussi Over a year ago

whoa dude! this question is three years old! thanks anyway :) If you are in the mood of answering you can check the latest questions for a selected tag as 'php' or 'angularjs'. People would be much more in need of help!

Collectives™ on Stack Overflow

Codeigniter+Angular Js: How to use partials?

4 Answers 4

3 Comments

1 Comment

First of all, make sure the folder path is correct

As codeigniter forbidden the direct access of the application directory, you may need to create a .htaccess to allow the angularjs routeProvider to load in the files.

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

First of all, make sure the folder path is correct

As codeigniter forbidden the direct access of the application directory, you may need to create a .htaccess to allow the angularjs routeProvider to load in the files.

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related