Недавно я начал изучать AngularJS, и я думал о создании приложения с использованием codeigniter в качестве бэкэнд (как API для вставки, обновления и удаления данных в базу данных MySQL) и AngularJS в качестве среды интерфейса. Итак, мои вопросы: как мне это сделать? Я бы передал данные между ними?
Я хочу узнать несколько подробностей об этом с примерами, потому что я не могу найти хороший видеоурок, где они объединяют два. (нашел некоторый учебник о laravel & angular, Ruby на рельсах и угловатых, но не совсем в них). Если кто-то знает хороший видеоурок или даже сообщение в блоге, объясняющее это, укажите ссылку.
Нашли несколько комбо-проектов на GitHub, но без каких-либо объяснений, что и как это делается, они не очень полезны.
Единственное, что я знаю об этом, это то, что я должен вернуть данные как json, но я не уверен, как это сделать.
Благодаря!
Комбинация CodeIgniter и AngularJS поможет вам создать новый диапазон приложений HTML5 .
В отличие от JQuery, AngularJS является интерфейсной структурой, которая зависит от данных из бэкэнд, все коммуникации с интерфейсом происходят через методы контроллера , есть операции для получения и публикации в Angular.
CodeIgniter будет действовать как API, который выведет 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 }); });
ОБНОВИТЬ
Для вставки, удаления, обновления с помощью 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; } } });
Я считаю, что это поможет вам понять. Это голый пример