Following upon this, I have failed to get the suggested approach to cleaning up a script tags-based AngularJS implementation to one that uses AMD modules working. I am still struggling with it. I am attempting to now instead use a comparable implemenation that a coworker has used in another project. The other implemenation gets me farther, yet I still hit a brick wall (so far). The HTML bootstrapping everything in a one page application starts out like so:
<!DOCTYPE html>
<html lang="en" ng-app="assetDashboardApp">
...and has this farther downstream:
<script src="js/lib/common/require.js" data-main="js/main.js"></script>
...begging the question: What is in main.js?
(function() {
"use strict";
require.config({
baseUrl: "js",
paths: {
"underscore": "lib/common/underscore",
"moment": "lib/common/moment",
"angular": "lib/angular/angular",
"jquery": "lib/jquery/jquery-1.10.2",
"ngBootstrap": "js/lib/common/bootstrap",
"jquery.bootstrap-growl": "lib/jquery/jquery.bootstrap-growl",
"angular-resource": "lib/angular/angular-resource",
"ui.router": "lib/angular/angular-ui-router",
"http-auth-interceptor": "lib/http-auth-interceptor",
"LocalStorageModule": "lib/angular/angular-local-storage",
"ui.bootstrap": "lib/ui-bootstrap-tpls-0.7.0",
"services": "services",
"util": "util",
"assetLogTypeFilter": "filters/assetLogTypeFilter",
"dictionaryLookUpFilter": "filters/dictionaryLookUpFilter",
"controllers": "controllers",
"login-auth": "directives/login-auth",
"daterangepicker": "lib/daterangepicker",
"ng-bs-daterangepicker": "lib/ng-bs-daterangepicker"
},
shim: {
"angular": { deps: ['jquery'], exports: 'angular' },
"underscore": { exports: '_' }
}
});
function tryHoldReady() {
if (!tryHoldReady.executed && window.jQuery) {
window.jQuery.holdReady(true);
tryHoldReady.executed = true;
}
}
tryHoldReady();
require.onResourceLoad = tryHoldReady;
require([
"jquery", "angular", "app"
], function($) {
$.holdReady(false);
});
})();
So far, I have gotten out of main.js only to find errors in app.js. I got past the first hurdle by wrapping the contents of app.js inside an AMD module signature which pulled in both require and Angular. I then fall down here:
angular.module('LocalStorageModule').value('prefix', 'assetDashboard');
A look at the code inside angular-local-storage.js makes it obvious that there is an expectation for an object called "angular" to already exist. The immediate challenge is that need to shim this AMD-unfriendly thing as an AMD module... perhaps by using the shimming section in main.js above? I don't know yet. I'm still experimenting. It is worth nothing above that there are some hijinks going on in main.js to make jQuery play nicely with Angular. Guy in grey sweater wisely suggests after all: "if you don't load jQuery via AMD then modules that need it are going to fail."
No comments:
Post a Comment