Question

情况如此：

我正在使用Codeigniter + Angular Js构建应用程序。

现在它是一个简单的应用程序，它从数据库中获取一些数据并将其显示在表格中。要进一步构建应用程序，我需要将列表放在部分文件夹中，但我无法加载需要包含的文件。

这就是问题：

如何在Codeigniter + Angular Js项目中使用partials？
我需要把partials文件夹放在哪里？

这是代码：

文件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>

部分文件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>

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

}]）;

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

现在'partials'文件夹位于'views'文件夹内，里面有一个文件：list.html

不再加载包含用户列表的表。有人知道如何将部分加载到Codeigniter + Angular项目中？非常感谢你！

修改

这是控制台中的错误消息：

无法加载资源：服务器响应状态为404（未找到）http://127.0.0.1/Angular/4-SampleApp2/partials/list.html

Answer 1

试试这个：

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

Answer 2

在我的情况下，我将所有网站都放在子文件夹 / ci22 中，所以这就是我所做的（像魅力一样）：

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

Answer 3

首先，确保文件夹路径正确

对于我的项目，因为我使用了codeigniter-modular-extensions-hmvc 我的部分内容属于我的模块＆＃39;观察文件夹

即 /project/application/modules/mymodule/views/list.html

然后我可以使用

myApp.config(function($routeProvider) {
  $routeProvider.
    when('/list', {
      templateUrl: '<?=base_url()."mapplication/modules/".$this->router->fetch_module();?>/views/list.html',
      controller: 'ListController'
    }).
    otherwise({
      redirectTo: '/list'
    });
});

由于codeigniter禁止直接访问应用程序目录，您可能需要创建.htaccess以允许angularjs routeProvider加载到文件中。

就我而言，我创建了一个.htaccess

Order allow,deny
Allow from all

模块目录下的

Answer 4

按照以下步骤操作以使AngularJS路由通过Codeigniter的部分文件夹：

转到应用程序＆gt;控制器

在controllers文件夹中，使用以下代码创建Partials.php文件：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Partials extends CI_Controller {

  public function view($view)
  {
      $this->load->view('partials/'.$view);
  }
}

转到应用程序＆gt; config＆gt; routes.php并在底部添加此代码
```
$route['partials/(:any)'] = "partials/view/$1";
```

最后，设置你的route.js文件，假设你的app.js文件设置为var myApp = angular.module（＆＃39; myApp＆＃39;，[＆＃39; ngRoute＆＃39; ]）;

 myApp.config(['$routeProvider', function($routeProvider) {
     $routeProvider.
         when('/list', {
         templateUrl: 'partials/list.html', 
         controller: 'ListController'
     }).otherwise({
         redirectTo: '/list'
     });
 }]);

Codeigniter + Angular Js：如何使用partials？

4 个答案:

首先，确保文件夹路径正确

由于codeigniter禁止直接访问应用程序目录，您可能需要创建.htaccess以允许angularjs routeProvider加载到文件中。