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!