When you have to use Angular inside of Drupal
Posted: 2014-06-19 16:25:44
The angularjs module for drupal will direct you to setup a menu path for Angular.js to get it's template files.
So the Angular route would look like this
//app.js
behat_reports.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/behat_editor_reports_service_v2/tpl/behat_editor_reports_service_reports_tpl',
controller: 'ReportsAll'
}).
otherwise({
redirectTo: '/'
});
}]);
What I am suggesting is that when bootstraping Angular is to set the path to the "html" template folder. Then your Angular app route can look like this
//app.js
behat_reports.config(['$routeProvider',
function ($routeProvider) {
//Getting the path we set during our drupal modules function
var path = Drupal.settings.behat_reporting_v2.path;
$routeProvider.
when('/', {
templateUrl: '/' + path + '/templates/reports-all.html',
controller: 'ReportsAll'
}).
otherwise({
redirectTo: '/'
});
}]);
It gets the path from a setting I set below, which is the path that renders this drupal url and setups up Angular in your module.
//some drupal module you are making
function behat_reporting_v2_api_reports_ui() {
angularjs_init_application('behat_reports_v2');
$path = drupal_get_path('module', 'behat_reporting_v2');
//Set the drupal path
drupal_add_js(array('behat_reporting_v2' => array('path' => $path)), 'setting');
drupal_add_js($path . '/js/services.js');
drupal_add_js($path . '/js/reportsController.js');
drupal_add_js($path . '/js/app.js');
return theme('behat_reports_v2');
}
You are basically allowing Angular to get the html files it needs without bootstrapping the template system in drupal. Yeah!
