AngularJS

by Ricardo Aragón on AngularJS

Using AngularJS on CakePHP 3

In this last week I have been working in a new project  using CakePHP 3 , MySQL and other tools when MongoDB and the framework AngularJS. I worked with CakePHP in the version 2 and have found some new nice improvements.

The first sorprise is the new ORM, in this version Cake separe the Tables of the Entities. The tables objects (as the older “Models” objects) allow make CRUD operations with database data, define relations, etc. But the Entities allow define the behavior and functionality of the an instance.

For some integrate AngularJs in CakePHP 3, I used a structure as follow:


webroot/
---------/js
------------/MyApp <-- Name of your app
------------------/controllers //<-- your controllers here
------------------/directives // <-- your directives here
------------------/lang // <-- translate files (ngTranslate)
------------------/modules // <-- your modules here
------------------/services // <-- your services/factories heres
------------------/app.js // <-- define the app AngularJs here
------------------/angular.min.js // <-- Angular file

After you must add in the html tag of your default layout (usually in CakePHP 3: scr/Template/Layout/default.ctp):

<html  data-ng-app="MyApp" id="ng-app">

Create a new folder called “Element” and a file “angular.ctp”:

<?php 
 //echo $this->Html->script('MyApp/lang/translates.en', array('inline' => false));

 //Angularjs Inclusion
 echo $this->Html->script('angular.min.js', array('inline' => false));
 
 //print the modules that are dependencies for our app 
 echo $this->Html->script('MyApp/modules/ngTranslate', array('inline' => false));
// echo $this->Html->script('MyApp/modules/ui-bootstrap-0.11.0.min', array('inline' => false));
 echo $this->Html->script('MyApp/modules/ui-bootstrap-tpls-0.13.0.min', array('inline' => false));
echo $this->Html->script('MyApp', array('inline' => false));
?>

And include this in default.ctp (or in default layout):

<?php echo $this->element('includes/angularjs'); ?>

With this configuration, you are ready for write new controllers, models, directives and services for your application. For example for this project, I writed a functionality for an message system:

<div class="modal-content">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       <h4 class="modal-title" id="actionsModalLabel"><?php echo __('Write a message'); ?></h4>
   </div>
   <div class="modal-body">
      <form class="form-group" role="form">
         <select class="form-control" ng-model="DashboardCtrl.recipient">
            <option ng-repeat="affiliate in DashboardCtrl.affiliates" value="{{affiliate.id}}">{{affiliate.user.name}}</option>
         </select>
      </form>
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
   </div>
</div>

In the main section I added the ngController:

<div class="row" ng-controller="DashboardController as DashboardCtrl">

 

I will continue writing about this project. The next thing to explain is how to integrate MongoDB 🙂

Now… you know… MUSIC!