AngularJS和Codeigniter - 组合&数据传输 [英] AngularJS and Codeigniter - Combination & Data Transfer
问题描述
我最近开始学习AngularJS，我正在考虑创建一个应用程序使用codeigniter作为后端（作为一个API插入，更新和删除数据到MySQL数据库）和AngularJS作为前端框架。
所以我的问题是：我将如何完成这个？我会在两者之间传输数据吗？
我想知道一些关于它的例子的细节，因为我找不到一个很好的视频教程，他们结合两个。 （发现一些教程关于laravel& angular，Ruby on rails和angular，但不是真的进入那些）。
如果有人知道一个很好的视频教程，甚至一个博客文章解释这一点，请提供一个链接。
在GitHub上找到几个组合项目，
我知道的唯一的事情是，我必须返回数据作为json，但我不确定如何做。
谢谢！
strong> CodeIgniter 和 AngularJS 可帮助您构建新范围的 HTML5应用程序。
JQuery，AngularJS是一个前端框架，它依赖于来自后端的数据，所有来自前端的通信都通过控制器方法发生，有 get
CodeIgniter将作为 API ，输出 json
我认为 json_encode（data）会输出所需的 JSON 字符串，当前端收到时，Angular的数据表示层会处理这些事情，或者如果你想对数据执行任何操作，Angular可以做
我没有这个组合的任何链接，因为大多数人都转向 Ruby on Rails 和 AngularJS
遗憾的是没有任何令人满意的链接/博客帖子。
如果时间允许我做一个概念证明，我会非常乐意发布该链接。
希望这有助于。
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'）。
成功（函数（数据，状态，头，配置）{
$ scope.msg = data;
}）
错误$ b // log error
}）;
}）;
UPDATE p>
使用 CodeIgniter 和 AngularJS 插入，删除，更新
CodeIgniter Controller
class Msg extends CI_Controller {
public function retrieveall（）{..} //从DB中获取所有内容
public function create（）{..} //将给定的数据插入DB
public function retrieve（$ id）{.. } //从DB中检索特定数据
public function update（$ id，$ title）{..} //从DB更新特定数据
public function delete（$ id）{..} //从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）>删除< / a>
< a href =＃ng-click =edit（m.id）>编辑< / a>
< / li>
< / ul>
< input type =text ng-model =create.title>
< button type =submitng-click =formsubmit> / button>
< input type =text ng-model =editc.title>
< button type =submitng-click =editsubmit（editc.id）>提交< / button>
< / div>
< / body> ;,
JS
var app = angular.module（app，[]）;
app.controller（MsgCtrl，function（$ scope，$ http）{
$ http.get（'/ index.php / m / retrieveall'）。
成功（函数（数据，状态，头，配置）{
$ scope.msg = data;
}）
错误$ b // log error
}）;
$ scope.delete = function（$ id）{
$ http.get（'/ index.php / m / delete /'+ $ id）。
success（function（data，status，headers，config）{
$ scope.result = data;
}
.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'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屋！
