New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

angularfaces module not found #7

Closed
ratcashdev opened this Issue Sep 19, 2014 · 11 comments

Comments

Projects
None yet
2 participants
@ratcashdev

ratcashdev commented Sep 19, 2014

Trying to use angularfaces, I stumbled on the following:
JConsole:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module angularfaces due to:
Error: [$injector:nomod] Module 'angularfaces' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.22/$injector/nomod?p0=angularfaces

I can see that the components.js is part of angularFaces-core-2.0.0.jar which I included via Maven. But how does this js get into the html page so that angular knows about it?

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 19, 2014

Owner

Difficult to say without seeing your sourcecode :). Here are some hints:

  • Open the developer tools (usually by hitting the F12 key) and check whether components.js has been loaded. It should look like this:
    image
  • The first lines of your main.js should mention the "angularfaces" module. As far as I see, you've got that right, but check it anyways:

var app = angular.module('CarShop', ["angularfaces"]).
controller('CarShopController', function($scope, $filter) {
// This initializes the Angular Model with the values of the JSF bean attributes
initJSFScope($scope);
... // put your code here
})

Does this solve your problem?

Owner

stephanrauh commented Sep 19, 2014

Difficult to say without seeing your sourcecode :). Here are some hints:

  • Open the developer tools (usually by hitting the F12 key) and check whether components.js has been loaded. It should look like this:
    image
  • The first lines of your main.js should mention the "angularfaces" module. As far as I see, you've got that right, but check it anyways:

var app = angular.module('CarShop', ["angularfaces"]).
controller('CarShopController', function($scope, $filter) {
// This initializes the Angular Model with the values of the JSF bean attributes
initJSFScope($scope);
... // put your code here
})

Does this solve your problem?

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 19, 2014

Owner

To answer your question: the script is loaded by PuiModelSync, a JSF component that's added as the last child of the component containing the "ng-controller" attribute. In my examples, that's typically the <h:body> component. In this case you find the scripts at the end of the html page's source code. After formatting it nicely it looks like so:

image

Owner

stephanrauh commented Sep 19, 2014

To answer your question: the script is loaded by PuiModelSync, a JSF component that's added as the last child of the component containing the "ng-controller" attribute. In my examples, that's typically the <h:body> component. In this case you find the scripts at the end of the html page's source code. After formatting it nicely it looks like so:

image

@stephanrauh stephanrauh self-assigned this Sep 19, 2014

@ratcashdev

This comment has been minimized.

Show comment
Hide comment
@ratcashdev

ratcashdev Sep 20, 2014

OK, so components.js does not get loaded. My ng-controller is a div, containing a couple of forms. They contain <label>, <input> and <h:message> elements (some of them are HTML5 pass-through).
I assume, i should load my main.js just outside the element containing ng-app (that is, below), but still, I don't see the prerequisite modules available yet. As a matter of fact, they don't get loaded at all.

PS: i can see from the logs, that AngularFaces jar gets loaded though.

ratcashdev commented Sep 20, 2014

OK, so components.js does not get loaded. My ng-controller is a div, containing a couple of forms. They contain <label>, <input> and <h:message> elements (some of them are HTML5 pass-through).
I assume, i should load my main.js just outside the element containing ng-app (that is, below), but still, I don't see the prerequisite modules available yet. As a matter of fact, they don't get loaded at all.

PS: i can see from the logs, that AngularFaces jar gets loaded though.

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 20, 2014

Owner

Ah, I see. Most likely it's the div. You know, div's aren't treated as JSF components, so AngularFaces doesn't seem them. Replace the div by an <h:panelGroup> - that's rendered as a div or as a span (depending on the "layout" attribute), but it's a JSF component.

If that still fails, please move the ng-app and the ng-controller to the body or the form - just to see whether my jar file is broken or if you're trying something I didn't try myself yet.

Owner

stephanrauh commented Sep 20, 2014

Ah, I see. Most likely it's the div. You know, div's aren't treated as JSF components, so AngularFaces doesn't seem them. Replace the div by an <h:panelGroup> - that's rendered as a div or as a span (depending on the "layout" attribute), but it's a JSF component.

If that still fails, please move the ng-app and the ng-controller to the body or the form - just to see whether my jar file is broken or if you're trying something I didn't try myself yet.

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 20, 2014

Owner

I've added some documentation about the attributes "ng-controller", "ng-app" and "angularJSFile" at http://angularfaces.com/index.html#/step-13.html.

Owner

stephanrauh commented Sep 20, 2014

I've added some documentation about the attributes "ng-controller", "ng-app" and "angularJSFile" at http://angularfaces.com/index.html#/step-13.html.

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 20, 2014

Owner

It seems you've found a nasty bug. Replacing <div> by <h:panelGroup> helps, but it forgets to render the ng-controller attribute. AngularFaces 2.1 will fix this. The AngularJS controller get initialized correctly if you add both the panelGroup and this div:
image
Of course that's an ugly work-around, which will break as soon as I've fixed the bug.

Update: There's no need to provide both tags, JSF 2.2 pass-through attributes should do the trick, too.

Owner

stephanrauh commented Sep 20, 2014

It seems you've found a nasty bug. Replacing <div> by <h:panelGroup> helps, but it forgets to render the ng-controller attribute. AngularFaces 2.1 will fix this. The AngularJS controller get initialized correctly if you add both the panelGroup and this div:
image
Of course that's an ugly work-around, which will break as soon as I've fixed the bug.

Update: There's no need to provide both tags, JSF 2.2 pass-through attributes should do the trick, too.

@stephanrauh stephanrauh added the bug label Sep 20, 2014

@ratcashdev

This comment has been minimized.

Show comment
Hide comment
@ratcashdev

ratcashdev Sep 20, 2014

Thanks, got it working. Would not have figured this out on my own.
Now to figure out how to combine angular's ngTable with JSF to have a working CRUD. The only reason I am thinking about this, because dataTable rendering of JSF is quite slow, to be honest. Not sure if the angular solution would be faster, or work at all, for that matter.

ratcashdev commented Sep 20, 2014

Thanks, got it working. Would not have figured this out on my own.
Now to figure out how to combine angular's ngTable with JSF to have a working CRUD. The only reason I am thinking about this, because dataTable rendering of JSF is quite slow, to be honest. Not sure if the angular solution would be faster, or work at all, for that matter.

@ratcashdev

This comment has been minimized.

Show comment
Hide comment
@ratcashdev

ratcashdev Sep 20, 2014

One more thing though: angularJSFile attribute tries to load my .js file from the /ui/ folder. As it happes, /ui is the ServletMapping for JSF and there's no such folder in my project. Fortunately, the servlet is forgiving enough, so if I specify agularJSFile="/resources/assets/js/myScript.js" it gets loaded anyway.

ratcashdev commented Sep 20, 2014

One more thing though: angularJSFile attribute tries to load my .js file from the /ui/ folder. As it happes, /ui is the ServletMapping for JSF and there's no such folder in my project. Fortunately, the servlet is forgiving enough, so if I specify agularJSFile="/resources/assets/js/myScript.js" it gets loaded anyway.

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 20, 2014

Owner

Great news! BTW: I often hear people saying JSF tables are slow. Would you mind to drop a few words what exactly is slow (initial rendering, paging, sorting) and what "slow" means (1 second, 5, 10,...)? Granted, it's none of my business, I'm just curious. Are you using h:dataTable, prime:dataTable or another one?

As for ng-table: I suppose you've already found https://github.com/stephanrauh/AngularFaces/tree/master/AngularFaces_2.0/AngularFaces-2.0-examples/src/main/webapp/manual/2_ngtable?

The ui folder: good hint. I'm not sure I can do anything about it, but you're right, it's not nice. I'll keep it in mind.

Owner

stephanrauh commented Sep 20, 2014

Great news! BTW: I often hear people saying JSF tables are slow. Would you mind to drop a few words what exactly is slow (initial rendering, paging, sorting) and what "slow" means (1 second, 5, 10,...)? Granted, it's none of my business, I'm just curious. Are you using h:dataTable, prime:dataTable or another one?

As for ng-table: I suppose you've already found https://github.com/stephanrauh/AngularFaces/tree/master/AngularFaces_2.0/AngularFaces-2.0-examples/src/main/webapp/manual/2_ngtable?

The ui folder: good hint. I'm not sure I can do anything about it, but you're right, it's not nice. I'll keep it in mind.

@stephanrauh stephanrauh added this to the AngularFaces 2.1 milestone Sep 20, 2014

@ratcashdev

This comment has been minimized.

Show comment
Hide comment
@ratcashdev

ratcashdev Sep 20, 2014

Yes, I've found the carshop example. I am aware that it's a work in progress, but it does not seem like it will become a CRUD tutorial with Angular and JSF.

I am using the standard Mojarra 2.2.7 h:datatable (Glassfish 4.1). Slow means a page with a table with 3 records (and 5 columns) takes ~200ms to render (localhost, reading from Java DB, Core i7). Can't quote the source right now, but I've read articles dealing with h:datatable optimizations, how to avoid writing EL expressions inside table rows just to speed rendering up (.e.g don't use 'rendered' directive for a cell).

As of this moment, the same JSF page with a 12 row ngTable loads and renders in ~100-120ms.

ratcashdev commented Sep 20, 2014

Yes, I've found the carshop example. I am aware that it's a work in progress, but it does not seem like it will become a CRUD tutorial with Angular and JSF.

I am using the standard Mojarra 2.2.7 h:datatable (Glassfish 4.1). Slow means a page with a table with 3 records (and 5 columns) takes ~200ms to render (localhost, reading from Java DB, Core i7). Can't quote the source right now, but I've read articles dealing with h:datatable optimizations, how to avoid writing EL expressions inside table rows just to speed rendering up (.e.g don't use 'rendered' directive for a cell).

As of this moment, the same JSF page with a 12 row ngTable loads and renders in ~100-120ms.

@stephanrauh

This comment has been minimized.

Show comment
Hide comment
@stephanrauh

stephanrauh Sep 20, 2014

Owner

The developer version of AngularFaces 2.1.0-SNAPSHOT now allows you to use <div> and >span> to define AngularJS controllers and apps.

Owner

stephanrauh commented Sep 20, 2014

The developer version of AngularFaces 2.1.0-SNAPSHOT now allows you to use <div> and >span> to define AngularJS controllers and apps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment