Question

我每天都使用CodeIgniter作为前端和后端开发框架，并且很少使用诸如响应表单和Ajax之类的动态前端东西。但是我必须说：我喜欢它，因为它最易于使用，这是良好的前端开发的关键。例如，对于表单，我会采用旧的方式，即发布到新文件，验证并将其推送到数据库或任何地方。我会喜欢在用户输入时进行验证并提供反馈的方法，这就是我的角度。

首先，我喜欢Angular的反应形式。首先，我将仅将其与表单一起使用。

如何将CodeIgniter的文件夹结构与angular的文件夹结构结合在一起，以便我可以使用首个和最重要的CI，但使用angular进行表单处理。

Answer 1

Angular通常会通过AJAX调用提供内容，因此您应该将CodeIgniter用作网络服务API框架。

让我们认为您将实现一个简单的列表：

首先，使用示例数据（例如，通过硬编码值）创建Angular项目。当您使用产品列表时。

HTML

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    "One",
    "Two",
    "Three",
    "Four"
  ];
  
});

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item}}</a>
  </li>
</ul>  
</div>

目前，元素已进行硬编码。但是我们需要使用CodeIgniter提供的数据来使这些元素动态化。

为此，请在服务器的“ www”文件夹中创建一个名为“ api”的文件夹。然后上传所有CodeIgniter源文件。如果操作正确，则访问“ http://yourdomain.com/api”时应该会看到“欢迎”控制器。

为此，我建议使用this CodeIgniter plugin，它可以让您轻松创建Webservice API Rest。主要目的是在Angular要求数据时提供json对象。然后Angular会做剩下的事情。

一个简单的例子：

<?php

header("Content-type: application/json");

class List extends CI_Controller
{
    function __construct()
    {
        // Here you can load stuff like models or libraries if you need
        $this->load->model("list_model"); // For example
    }

    /**
     * This method receives a parameter so it can 
     * filter what list wants the client to get
     */
    public function list1($list_number)
    {
        $list = $this->list_model->getList($list_number);

        // If list not exists
        if ( empty($list) ) {
            $this->output->set_status_header(404);
            echo json_encode(
                "success" => false,
            );
            return;
        } else { // If has returned a list
            // CodeIgniter returns an HTTP 200 OK by default
            echo json_encode(
                "success" => true,
                "list" => $list,
            );
            return;
        }
    }

}

现在我们可以通过AJAX获取信息。上面的相同代码，但是更改为获取远程数据：

var app = angular.module('myApp', []);

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  // Replace link bellow by the API url
  // For this example it would be:
  // http://yourdomain.com/api/list/list1/1
  $http.get("https://codepen.io/anon/pen/VExQdK.js").
  success(function(res) {
    console.log(res);
    if ( res.success == true ) {
      $scope.items = res.items;
    } else {
      $scope.items = [];
    }
  });  
}]);

angular.bootstrap(document, ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MainCtrl">
<ul>
  <li ng-repeat="item in items">
    <a href="">{{item.name}}</a>
  </li>
</ul>  
</div>

通过这种方式，您可以获得与Angular一起使用的功能完备的CodeIgniter API。我喜欢在不同的控制器中组织方法，因此代码被构造为“可读的”。

要修改或删除服务器上的数据，可以使用$ http.post并发送参数来告诉CodeIgniter必须执行哪种操作。记住要使用会话数据来保护修改/删除信息的ajax调用（例如，如果用户尝试更新其他用户的信息）。

这不是确定的方法，但这是我的。希望对您有所帮助。

将Angular添加到现有的CodeIgniter项目

1 个答案: