Using hallo on AngularJS and RequireJS (troubleshooting)

Requirement:
1. Hallo

npm install hallo

2. Hallo Angular Directive
Get the angular directive here: http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html

3. Hallo requirejs.config paths:

"jQuery": "/lib/hallo/deps/jquery-1.9.0",
"jQueryUI" : "/lib/hallo/deps/jquery-ui-1.10.0.custom",
"rangyCore" : "/lib/hallo/deps/rangy-core-1.2.3",
"halloJS" : "/lib/hallo/examples/hallo",

4. require's prior to Angular app initialization:

define(require => {

    require('jQuery');
    require('jQueryUI');
    require('rangyCore');
    require('halloJS');

    var angie: ng.IAngularStatic = require('angular');
    createHalloDirective(angie); // http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html">http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html

    var mod: ng.IModule = angie.module('niceApp', []);

/lib points to node_modules directory.



If you encountered this error:

TypeError: element.hallo is not a function

You need to use full jQuery instead of Angular's jQLite.


In your requirejs.config shim section, you must specify jQuery as a dependency of Angular, if it's not specified it will load jQLite instead:

"angular" : {
    "exports": "angular",
    deps: ["jQuery"]
}

You'll encounter these errors if you don't define the depedencies between hallo, rangy and jQueryUI:

Uncaught TypeError: $.widget is not a function
  (anonymous function) 
  (anonymous function) 
TypeError: element.hallo is not a function

To fix that, must add these dependencies on your requirejs.config shim section:

"jQueryUI": {
    deps: ["jQuery"]
},

"rangyCore" : {
    deps: ["jQueryUI"]
},

"halloJS" : {
    deps: ["rangyCore"]
}

Hallo directive should load correctly on your Angular app. However when you double click the hallo content, it'll show the following errors:

jQuery.fn.jQuery.init[1]
Uncaught TypeError: rangy.getSelection is not a function
  jQuery.widget.getSelection 

The rangy-core that's bundled via hallo obtained from npm yields that error. To fix that, install rangy directly:

npm install rangy

Then use that instead of the rangy-core that's bundled with hallo.

Point rangyCore to new path on requirejs.config paths:

"jQuery": "/lib/hallo/deps/jquery-1.9.0",
"jQueryUI" : "/lib/hallo/deps/jquery-ui-1.10.0.custom",
// "rangyCore" : "/lib/hallo/deps/rangy-core-1.2.3", // remove this
"rangyCore" : "/lib/rangy/lib/rangy-core", // change to this
"halloJS" : "/lib/hallo/examples/hallo",

There's still an error when you double click the hallo content, it'll show the following:

jQuery.fn.jQuery.init[1]
Uncaught ReferenceError: rangy is not defined
  jQuery.widget.getSelection 

To fix that that, put the rangy's instance on window:

require('jQuery');
require('jQueryUI');

var rangy = require('rangyCore');
window["rangy"] = rangy;
    
require('halloJS'); // hallo looks for rangy in global scope, that is, window

That's it, when you double click the hallo's content, the tools for formatting(Bold, Italic, etc) should pop up now.