AngularJS和Codeigniter-组合和数据传输

龙华翰

2023-03-14

问题内容：

我最近开始学习AngularJS，并且正在考虑使用codeigniter作为后端（作为将数据插入，更新和删除MySQL数据库的API）和AngularJS作为前端框架来创建应用程序。所以我的问题是：我将如何实现？我要在两者之间传输数据吗？

我想通过示例了解一些细节，因为我找不到结合了两者的优秀视频教程。（找到了有关laravel和angular的一些教程，Ruby在rails和angular上，但还不是真的）。如果有人知道好的视频教程，甚至是博客博客对此进行了解释，请提供一个链接。

在GitHub上找到了几个组合项目，但是没有任何说明如何完成以及如何做，它们并没有真正的用处。

我对此唯一了解的就是我必须将数据作为json返回，但是我不确定如何做到这一点。

谢谢！

问题答案：

CodeIgniter 和 AngularJS的 结合将帮助您构建新的 HTML5应用程序范围 。

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

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

我相信json_encode(data)会输出所需的 JSON 字符串，当前端接收该字符串时，Angular 的 数据表示
层会处理//或者如果您想对数据执行任何操作，Angular也可以这样做。

我没有这个组合的任何链接，因为大多数人已经转向 Ruby on Rails* 和 AngularJS 组合，因为担心新版本
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>

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

更新

使用 CodeIgniter* 和 AngularJS 进行插入，删除，更新 *

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>

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

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

AngularJS和Codeigniter-组合和数据传输

相关阅读

相关文章

相关问答

相关工具

相关文档