【问题标题】:Adding Angular to an existing CodeIgniter project将 Angular 添加到现有的 CodeIgniter 项目
【发布时间】:2018-10-18 09:28:07
【问题描述】:

我每天都在使用 CodeIgniter 作为前端和后端开发框架,而且我很少使用动态前端的东西,例如响应表单和 Ajax。但我需要说:我喜欢它,因为它对用户最友好,这是良好前端开发的关键。 以表格为例,我将通过发布到新文件、验证并将其推送到数据库或任何地方来采用良好的旧方式。 我会喜欢在用户打字时验证它并提供反馈的方式,这就是我来到 Angular 的地方。

首先,我喜欢 Angular 来响应表单。一开始我只会将它与表单一起使用。

如何将 CodeIgniter 的文件夹结构与 angular 的文件夹结构结合起来,以便我可以首先使用 CI 但 angular 来处理表单。

【问题讨论】:

  • 前端在 Angular 和后端在 codeignitor 这就是你想要的?
  • 并非如此。在我的脑海中,有一个包含所有 Angular 内容的文件夹,当 CI 视图(在前端或后端)中有一个表单时,我会输入我的 <angular-form>,其余的来自 Angular。该表单周围的所有内容都来自 CI 环境。
  • 是的,我问的是,您需要以角度创建所有表单,其余数据来自使用 api 调用的 CI。
  • 现在回到我的问题:如何将我的 Angular 应用程序文件夹结构与所有这些组件与我的 CI 结合起来?
  • 在 Angular 中创建一个项目,然后在该项目中创建一个文件夹名称,无论您想要什么我喜欢 api,然后将 codeignitor 的整个代码放在该文件夹中。现在在您发出http请求的角度服务中,传递路径http://localhost/project_name/folder_name/action_you_want_to_call

标签: javascript php angularjs angular codeigniter


【解决方案1】:

Angular 通常通过 AJAX 调用提供内容,因此您应该使用 CodeIgniter 作为 Web 服务 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 调用(例如,如果用户尝试更新其他用户的信息)。

这不是一个确定的方法,但它是我的。希望对你有所帮助。

【讨论】:

  • 哇,这是一个非常详细的答案,它有很大帮助!谢谢!
  • 一个问题仍然悬而未决(我认为这就是为什么我通常有这个问题)。当我使用ng new app-name 创建一个新的角度项目时,我得到了一个包含所有这些文件的文件夹结构。您的解决方案是直接在我需要的代码中创建模块和组件(我喜欢什么)。我对 Angular 很陌生,我不知道这种方法,而且您的代码看起来与我的 app-name 项目的应用程序文件夹中的文件不同。你能告诉我在哪里可以更详细地研究以获取我当前的角度知识(基于ng new 环境)与你的代码一起工作吗?
  • 我试图解释的是你必须保持你的文件夹结构相同。唯一改变的是信息源以及您的应用程序与数据库的交互方式。所有读取和写入连接都通过 AJAX,使用 CodeIgniter 的 API 运行。这能回答你的问题吗?
  • 抱歉,没有。也许我的问题太基本了。您的代码 sn-ps 在没有完整的 ng new app-name 环境的情况下运行。没有app.module.tsapp.components.ts。这一切都在代码中实现。我的环境看起来像this。比如我怎么import { ReactiveFormsModule } from '@angular/forms';
  • 啊!我认为您正在使用 Angular 4,而不是 AngularJS。 Angular 4 是 Angular 的更新版本(虽然它更好)。我可以为你提供代码,我也有一些在 Angular 4 中使用 CodeIgniter 实现的项目。 (CodeIgniter 部分是相同的)。等等,今天我会更新我的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-09-16
  • 1970-01-01
  • 2017-11-29
  • 2019-12-19
  • 2020-11-04
  • 2023-03-15
  • 1970-01-01
相关资源
最近更新 更多