Codeigniter+Angular Js：如何使用局部？答案

【问题标题】：Codeigniter+Angular Js: How to use partials?Codeigniter+Angular Js：如何使用局部？
【发布时间】：2014-06-07 03:54:50
【问题描述】：

情况是这样的：

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

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

这是问题：

如何在 Codeigniter + Angular Js 项目中使用局部变量？
我需要把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

【问题讨论】：

您是否有任何 .htaccess 可以将部分请求重定向到 index.php？（假设您的 .htaccess 不忽略 .html 文件。）
现在“views”文件夹中有一个 .htaccess 文件。我认为是一个codeigniter默认文件。内容是：拒绝一切。我没有创建任何其他 .htaccess 并且在文件夹部分中没有 .htaccess 文件。
你已经解决了吗？

标签： javascript php angularjs codeigniter partials

【解决方案1】：

试试这个：

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

【讨论】：

我试过了。将文件复制到“views”文件夹中，但似乎不起作用。还是谢谢
你在浏览器中做了 $scope.users 的控制台日志吗？看看 list.html 是完全不显示还是只是 ng-repeat 的东西？
感谢您的提示。我已经编辑了问题，包括控制台中的错误消息

【解决方案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);
}])

【讨论】：

刷新二手路线上的页面时，html5mode 是否正常工作？我的意思是，不在您的“负载”路线上。

【解决方案3】：

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

对于我的项目，因为我使用了 codeigniter-modular-extensions-hmvc 我的部分在我的模块的视图文件夹下

即 /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

模块目录下

【讨论】：

【解决方案4】：

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

转到应用程序 > 控制器

在控制器文件夹中，使用以下代码创建一个 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);
  }
}

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

最后，设置您的 route.js 文件，假设您已使用 var myApp = angular.module('myApp', ['ngRoute']); 设置了 app.js 文件；

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

【讨论】：

哇老兄！这个问题已经三年了！无论如何，谢谢 :) 如果您有心情回答，您可以检查所选标签的最新问题，如“php”或“angularjs”。人们会更需要帮助！