javascript - Issues with google closure library and angularjs -
i'm in middle of refactoring ngtrader game following angularjs-google-style have controllers, services, directives, ect... defined classes, functions defined prototypes on classes, registering class angular.
the issue getting these changes work closure-library's goog.provide() , goog.require(). setup below, angular error says
failed instantiate module ngtrader due to: error: [$injector:modulerr] failed instantiate module ngtrader.account due to: error: [ng:areq] argument 'fn' not function, got undefined index.html
<body ng-app="ngtrader"> .... <script src="bower_components/closure-library/closure/goog/base.js"></script> <script src="components/account/accountsrvc.js"></script> <script src="components/account/account.js"></script> <script src="app.js"></script> </body> i've tried various orders of these files, thinking load order affect available , not. figured order shouldn't matter since that's goog provide/require should fix.
- app.js, account.js, accountsrvc.js
- app.js, accountsrvc.js, account.js
- accountsrvc.js, account.js, app.js
app.js
goog.provide('ngtrader'); goog.require('ngtrader.account'); ngtrader = angular.module('ngtrader', [ngtrader.account.name]); account.js
goog.provide('ngtrader.account'); goog.require('ngtrader.account.accountsrvc'); ngtrader.account = angular.module('ngtrader.account', []); ngtrader.account.service('accountsrvc', ngtrader.account.accountsrvc); not sure if need goog.require() call here, google style didn't include snippet. i've tried , without it. i've tried adding goog.require('ngtrader') here, throw errors unless moved app.js first called script in index.html, in turn throw errors ngtrader.account not being defined.
the service registration done here per google style recommendation services example shows put module.service('request', hello.request.request); in module definition.
accountsrvc.js
goog.provide('ngtrader.account.accountsrvc'); ngtrader.account.accountsrvc = function() {....}; ngtrader.account.accountsrvc.prototype.reset = function() {....}; i put breakpoints inside accountsrvc.js , see ngtrader.account object has new accountsrvc property being added it. when inspect breakpoints in account.js, accountsrvc property undefined.
so going wrong this, order of scripts being loaded, how i'm using require/provide, or else?
any appreciated. thanks.
does following help?
<body ng-app="ngtrader"> <script src="bower_components/closure-library/closure/goog/base.js"></script> <script> goog.require("ngtrader"); </script> </body> make sure paths in js/libraries/goog/deps.js set, if not can use calcdeps set them:
python \ "/home/me/software/programming/javascript/closure compiler/closure-library/closure/bin/calcdeps.py" \ --path /var/www/html/hosts/site/public_html/js/libraries \ --input /var/www/html/hosts/site/public_html/js/libraries/app.js \ --output_mode deps \ --output_file /var/www/html/hosts/gsa/public_html/js/libraries/goog/deps.js location , names of files can important calcdeps expect them in location name. can circomvent adding them --input (i think) rather use structured paths. see here example:
[update]
i run uncompiled code, files in:
the google closure library in: public_html/js/libraries/goog
angular in: public_html/js/libraries/angular.1.0.8.js
public_html/js/libraries/app.js
public_html/js/libraries/ngtrader/account.js
public_html/js/libraries/ngtrader/account/accountsrvc.js
public_html/test.html
<body ng-app="ngtrader"> <script src="js/libraries/angular.1.0.8.js"></script> <script src="js/libraries/goog/base.js"></script> <script> goog.require("ngtrader"); </script> </body> had create deps.js following command:
python \ "/path/to/closure-library/closure/bin/calcdeps.py" \ --path /path/to/public_html/js/libraries \ --input /path/to/public_html/js/libraries/app.js \ --output_mode deps \ --output_file /path/to/public_html/js/libraries/goog/deps.js
Comments
Post a Comment