AngularJS 和 Codeigniter - 组合 &数据传输 [英] AngularJS and Codeigniter - Combination & Data Transfer
问题描述
我最近开始学习 AngularJS，我正在考虑使用 codeigniter 作为后端(作为 API 向 MySQL 数据库插入、更新和删除数据)和 AngularJS 作为前端框架来创建应用程序.所以我的问题是:我将如何做到这一点?我会在两者之间传输数据吗?
我想通过示例了解有关它的一些详细信息，因为我找不到将两者结合的好的视频教程.(找到了一些关于 laravel & angular、Ruby on rails 和 angular 的教程，但还没有真正深入这些教程).如果有人知道一个好的视频教程，甚至是解释这个的博客文章，请提供一个链接.
在 GitHub 上找到了一些组合项目，但没有任何解释是什么以及如何完成，它们并不是很有用.
我唯一知道的是，我必须将数据作为 json 返回，但我不知道该怎么做.
谢谢！
CodeIgniter 和 AngularJS 的组合将帮助您构建新的 HTML5 应用程序范围.
与 JQuery 不同，AngularJS 是一个前端框架，它依赖于来自后端的数据，来自前端的所有通信都通过一个控制器方法发生，有 get 的操作 和 post 在 Angular 中.
CodeIgniter 将充当 API，它将向 Angular 控制器输出 json 响应.
我相信 json_encode(data) 会输出所需的 JSON 字符串，前端收到后，数据表示层Angular 会处理这些事情/或者如果您想对数据执行任何操作，Angular 也可以这样做.
我不持有这个组合的任何链接，因为大多数人已经转向 Ruby on Rails 和 AngularJS 组合，担心 新版本的停止>CodeIgniter
遗憾没有任何令人满意的链接/博客文章.如果时间允许我进行概念证明，我很乐意发布链接.
希望这会有所帮助.
编辑
JSON
<预><代码> [{"title": "t1"},{"title": "t2"}....]HTML
<div ng-controller="MsgCtrl"><ul><li ng-repeat="m in msg">{{m.title}}</li>JS
var app = angular.module("app", []);app.controller("MsgCtrl", function($scope, $http) {$http.get('/index.php/ctrlname/methodname').成功(功能(数据，状态，标题，配置){$scope.msg = 数据；}).错误(功能(数据，状态，标题，配置){//记录错误});});<小时>
更新
使用 CodeIgniter 和 AngularJS
插入、删除、更新CodeIgniter 控制器
class Msg extends CI_Controller {public function retrieveall() { .. }//从数据库中检索所有内容public function create(){ .. }//将给定的数据插入数据库public function retrieve($id){ .. }//从数据库中检索特定数据public function update($id, $title){ .. }//从数据库更新特定数据public function delete($id){ .. }//从数据库中删除特定数据...}CodeIgniter 路由
$route['m'] = "msg";$route['m/(:any)'] = "msg/$1";HTML
<div ng-controller="MsgCtrl"><ul><li ng-repeat="m in msg">{{m.title}}<a href="#" ng-click="delete(m.id)">删除</a><a href="#" ng-click="edit(m.id)">编辑</a><input type="text ng-model="create.title"><button type="submit" ng-click="formsubmit">提交</button><input type="text ng-model="editc.title"><button type="submit" ng-click="editsubmit(editc.id)">提交</button>JS
var app = angular.module("app", []);app.controller("MsgCtrl", function($scope, $http) {$http.get('/index.php/m/retrieveall').成功(功能(数据，状态，标题，配置){$scope.msg = 数据；}).错误(功能(数据，状态，标题，配置){//记录错误});$scope.delete = 函数($id){$http.get('/index.php/m/delete/' + $id).成功(功能(数据，状态，标题，配置){$scope.result = 数据；}$scope.edit = function($id) {$http.get('/index.php/m/retrieve/' + $id).成功(功能(数据，状态，标题，配置){$scope.editc = 数据；}$scope.editsubmit = function($id) {$http.get('/index.php/m/update/' + $id +'/' + $scope.editc.title).成功(功能(数据，状态，标题，配置){$scope.result = 数据；}}$scope.formsubmit = function($id) {$http.post('/index.php/m/create', {data: create}).成功(功能(数据，状态，标题，配置){$scope.result = 数据；}}});我相信这会帮助您理解.这是一个简单的例子
I've recently started learning AngularJS and I was thinking about creating an application using codeigniter as the backend (as an API to insert, update and delete data to a MySQL database) and AngularJS as the frontend framework. So my questions are: How would I accomplish this? I would I transfer the data between the two?
I wanna know a few details about it with examples because I can't find a good video tutorial where they combine the two. (found some tutorial about laravel & angular, Ruby on rails and angular but not really into those yet). If someone knows a good video tutorial or even a blog post explaining this, please provide a link.
Found a few combo projects on GitHub but without any explanation what and how it is done, they are not really useful.
The only thing I know about this is that I have to return the data as json but I am not sure how to do that.
Thanks!
Combination of CodeIgniter and AngularJS would help you to build new range of HTML5 Applications.
Unlike JQuery, AngularJS is a front-end framework, which depends on the data from backend, all communications from the front-end happen through a Controller Methods, there are operations for get and post in Angular.
CodeIgniter will act as an API which will output an json response to the Angular controller.
I believe json_encode(data) will output the required JSON string, which upon receipt by front-end, the data presentation layer of Angular takes care of the things /or if you'd like to perform any operation over the data, Angular can do that also.
I don't hold any links for this combination, because most people have shifted towards Ruby on Rails and AngularJS combination, fearing the stop of new release of CodeIgniter
Regret for not having any satisfactory links/blog post. If time allows me to make a proof of concept, I would be very happy to post the link.
Hope this helps.
EDIT
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
});
});
UPDATE
For Insert, Delete, Update using CodeIgniter and AngularJS
CodeIgniter Controller
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 Routing
$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;
}
}
});
I believe this would help you understand. It's a bare example
这篇关于AngularJS 和 Codeigniter - 组合 &数据传输的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
