【问题标题】:AngularJS and Codeigniter - Combination & Data TransferAngularJS 和 Codeigniter - 组合和数据传输
【发布时间】:2014-10-31 07:02:47
【问题描述】:

我最近开始学习 AngularJS,我正在考虑使用 codeigniter 作为后端(作为向 MySQL 数据库插入、更新和删除数据的 API)和 AngularJS 作为前端框架来创建一个应用程序。 所以我的问题是:我将如何做到这一点?我会在两者之间传输数据吗?

我想通过示例了解有关它的一些详细信息,因为我找不到将两者结合起来的好的视频教程。 (找到了一些关于 laravel 和 angular、Ruby on rails 和 angular 的教程,但还没有真正进入这些教程)。 如果有人知道一个很好的视频教程甚至是解释这一点的博客文章,请提供链接。

在 GitHub 上找到了一些组合项目,但没有任何解释是什么以及如何完成的,它们并没有真正的用处。

对此我唯一知道的是我必须以 json 格式返回数据,但我不知道该怎么做。

谢谢!

【问题讨论】:

  • 它们在完全不同的环境中运行,角度并不关心使用什么后端。无论服务器 api 语言或框架如何,传输都是相同的

标签: php angularjs codeigniter


【解决方案1】:

CodeIgniterAngularJS 的组合将帮助您构建新的 HTML5 应用程序

与 JQuery 不同,AngularJS 是一个前端框架,它依赖于来自后端的数据,来自前端的所有通信都是通过 Controller Methods 进行的,还有 get 的操作post 在 Angular 中。

CodeIgniter 将充当 API,它将向 Angular 控制器输出 json 响应。

我相信json_encode(data) 会输出所需的 JSON 字符串,在前端收到该字符串后,Angular 的 数据呈现 层会处理这些事情/或如果你想对数据执行任何操作,Angular 也可以做到。

我没有这个组合的任何链接,因为大多数人已经转向 Ruby on RailsAngularJS 组合,担心 CodeIgniter

很遗憾没有任何令人满意的链接/博客文章。 如果时间允许我制作概念证明,我会很乐意发布链接。

希望这会有所帮助。

编辑

JSON

    [
        {"title": "t1"},
        {"title": "t2"}
        ....
     ]

HTML

 <body ng-app="app">
   <div ng-controller="MsgCtrl">
    <ul>
      <li ng-repeat="m in msg">{{m.title}}</li>
    </ul>
   </div>
 </body>

JS

 var app = angular.module("app", []);

 app.controller("MsgCtrl", function($scope, $http) {
    $http.get('/index.php/ctrlname/methodname').
    success(function(data, status, headers, config) {
     $scope.msg = data;
    }).
    error(function(data, status, headers, config) {
     // log error
    });
 });

更新

使用 CodeIgniterAngularJS

进行插入、删除、更新

CodeIgniter 控制器

class Msg extends CI_Controller {

    public function retrieveall() { .. } // Retrieves all Content from the DB
    public function create(){ .. } // Inserts the given data to DB
    public function retrieve($id){ .. } // Retrieves specific data from the DB
    public function update($id, $title){ .. } // Updates specific data from the DB
    public function delete($id){ .. } // Deletes specific data from the DB

    ...

}

CodeIgniter 路由

$route['m'] = "msg";
$route['m/(:any)'] = "msg/$1";

HTML

<body ng-app="app">
   <div ng-controller="MsgCtrl">
    <ul>
      <li ng-repeat="m in msg">
           {{m.title}}

           <a href="#" ng-click="delete(m.id)">Delete</a>
           <a href="#" ng-click="edit(m.id)">Edit</a>
      </li>
    </ul>

    <input type="text ng-model="create.title">
    <button type="submit" ng-click="formsubmit"> Submit </button>

     <input type="text ng-model="editc.title">
    <button type="submit" ng-click="editsubmit(editc.id)"> Submit </button>
   </div>
 </body>

JS

var app = angular.module("app", []);

 app.controller("MsgCtrl", function($scope, $http) {
    $http.get('/index.php/m/retrieveall').
    success(function(data, status, headers, config) {
     $scope.msg = data;
    }).
    error(function(data, status, headers, config) {
     // log error
    });

    $scope.delete = function($id) {
        $http.get('/index.php/m/delete/' + $id).
        success(function(data, status, headers, config)       {
        $scope.result = data;
    }

    $scope.edit = function($id) {
        $http.get('/index.php/m/retrieve/' + $id).
        success(function(data, status, headers, config)       {
        $scope.editc = data;
    }

    $scope.editsubmit = function($id) {
       $http.get('/index.php/m/update/' + $id +'/' + $scope.editc.title).
        success(function(data, status, headers, config)      {
        $scope.result = data;
    }
    }

    $scope.formsubmit = function($id) {
               $http.post('/index.php/m/create', {data: create}).
                success(function(data, status, headers, config)      {
                $scope.result = data;
         }
     }
 });

我相信这会帮助您理解。这是一个简单的例子

【讨论】:

  • Ruby on Rails 的部分是垃圾,后端无关。使用 Angular 的 node.js 可能比 Ruby 更多
  • 好的,所以在 CI 控制器中,我将返回一个数组,其中将有一个状态和消息,如 $return = array ('status' = 'success', message = 'Yay! 插入是成功的'); (失败消息相同) return json_encode($return);以及我将如何从角度方面达到这一点?
  • 好的很酷,所以如果我想返回任何其他数据而不是成功和失败消息,我应该做与我的示例相同的事情,而是做 $this->db>get(tablename);并将其作为 json_encode() 返回?
  • @Ruffles,很抱歉,如果我让您的思维过程有偏差,您实际上可以修改 json_encode() 以支持这些消息,比如回复可能是 {"message": "success", "content": [ {"title": "t1", ... ]} 和 Angular 方面 成功 if(data.message === "success") { $scope.msg = data.content }.
  • 是的,我明白了。谢谢:)
猜你喜欢
  • 2013-01-18
  • 2023-03-23
  • 2013-07-17
  • 2017-11-18
  • 1970-01-01
  • 2016-12-16
  • 2016-09-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多