Ruf*_*les 7 php codeigniter angularjs
我最近开始学习AngularJS,我正在考虑创建一个应用程序,使用codeigniter作为后端(作为插入,更新和删除数据到MySQL数据库的API)和AngularJS作为前端框架.所以我的问题是:我将如何做到这一点？我会在两者之间传输数据吗？
我想通过示例了解一些有关它的细节,因为我找不到一个很好的视频教程,他们将两者结合起来.(找到一些关于laravel和angular的教程,Ruby on rails和angular但尚未真正进入那些).如果有人知道一个好的视频教程甚至是一篇解释这个的博客文章,请提供一个链接.
在GitHub上找到了一些组合项目但没有任何解释是什么以及如何完成,它们并没有真正有用.
我唯一知道的是我必须以json的形式返回数据,但我不知道该怎么做.
谢谢!
cs1*_*193 21
CodeIgniter和AngularJS的组合将帮助您构建新的HTML5应用程序.
与JQuery不同,AngularJS是一个前端框架,它依赖于来自后端的数据,来自前端的所有通信都是通过Controller方法发生的,在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>
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
对于使用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>
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;
}
}
});
我相信这会帮助你理解.这是一个很好的例子
| 归档时间： |
|
| 查看次数： |
14936 次 |
| 最近记录： |