https://github.com/webpolis/angularjs-cakephp
AngularJs <-> CakePHP Adapter/Helper
https://github.com/webpolis/angularjs-cakephp
Last synced: about 1 year ago
JSON representation
AngularJs <-> CakePHP Adapter/Helper
- Host: GitHub
- URL: https://github.com/webpolis/angularjs-cakephp
- Owner: webpolis
- Created: 2012-11-22T05:07:31.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-05-02T04:25:09.000Z (about 6 years ago)
- Last Synced: 2025-03-26T05:33:10.259Z (about 1 year ago)
- Language: PHP
- Size: 9.77 KB
- Stars: 39
- Watchers: 7
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
angularjs-cakephp
=================
by Nicolas Iglesias
AngularJs <-> CakePHP Adapter/Helper
------------------------------------
This Helper will do basically a few things:
* Load AngularJS (from Google CDN by default) and all required libs (resource, controller, bootstrap, etc)
* Generate a DIV tag which AngularJS scope is set to the controller you specify
in $options['controller']. The tag / scope is closed by using the "end" method
(so beware not to leave it open).
* Inject CakePHP formatted data ($options['data']) into AngularJS controller's scope.
The data is stored into $scope._data so you can easily make:
```
```
... and use all the magic from AngularJs over that data.
*Example*:
In our view we do:
```
AngularJs->begin(
array(
'bootstrap' => 'angular/bootstrap',
'controller' => 'angular/mymodel',
)
);
?>
```
We initialized AngularJS (by taking required files from Google CDN).
We set a 'bootstrap' file, which is located in app/webroot/js/angular/bootstrap.js.
We have placed our AngularJs controller in the same folder, but we avoid the '.js' extension
and '_controller' suffix (for sake of simplicity, is the only filename change request i do).
We then insert some AngularJs compatible markup code:
```
{{model.Mymodel.id}}
```
And we stop the Helper from helping us:
```
AngularJs->end();?>
```
In this example, i choose to save all records at once, so in my 'mymodel_controller.js'
i have:
```
function MymodelController($scope, $resource){
$scope.res_mymodel = $resource('/Mymodels/:action.json',{
'action' : '@action'
});
$scope.list = function(){
$scope.res_mymodel.query({
action: 'list'
}, function(mymodels){
$scope._data = mymodels;
});
}
$scope.saveAll = function(){
var t = new $scope.res_mymodel(0);
t.mymodels = $scope._data;
t.action = 'saveAll';
t.$save(function(r){
if(r.success){
console.log('ok');
}else{
console.log('error');
}
});
}
}
MymodelController.$inject = ['$scope', '$resource'];
```
You can do it however you want it; i choose to use the AngularJs 'resource' component to
transfer data but you can do your own AngularJs controller's logic.
For this example, we use REST capabilities from CakePHP, so we enable parsing of extensions from URLs;
go to your Cake's routes.php and add (if you don't have it :)
Router::parseExtensions();
So we can end by having the following "short" methods in our CakePHP controller without requiring any view:
```
public function list()
{
$mymodels = $this->Mymodel->find('all');
$this->set(compact('mymodels'));
$this->set('_serialize', 'mymodels');
}
public function saveAll()
{
$success = $this->Setting->saveAll($this->request->data['mymodels']);
$this->set(compact('success'));
$this->set('_serialize', array('success'));
}
```
Simple, right? That's why i wanted to share this small contribution with the people.
Installation
============
Place 'AngularJsHelper' in your Cake's 'app/View/Helper/' folder and load the helper by adding 'AngularJs' to
the $helpers array in your controller.