Embarking on my journey of app development with angularJS was a thrilling experience. However, after investing weeks into the project, I had an epiphany - why didn't I start using require JS from the get-go to load my modules? A rookie mistake, yes, but we live and learn. Now, I'm in the process of adapting my code to align with requireJS.
Below is my revamped main.js file:
requirejs.config({
baseUrl: "js",
paths: {
jquery:'jquery-1.7.min',
angular: 'angular',
angularRoute:'angular-route',
mainApp:'AngularApp/app'
},
priority:['angular'],
shim:{
angularRoute:{
deps:["angular"]
},
mainApp:{
deps:['angularRoute']
}
}});
require(['angular','angularRoute', 'mainApp'],
function(angular, angularRoute, app)
{
angular.bootstrap(document, ['ServiceContractModule']);
});
Take a look at my app.js:
define(['angular',
'angularRoute',
'AngularApp/services',
'AngularApp/directives',
'AngularApp/controllers'],
function(angular, angularRoute, services, directives, controllers)
{
console.log("sup");
var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
serviceContractModule.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/contractNumber/:contractNumbers', {
controller : 'ContractController',
templateUrl : './contractSearchResult',
reloadOnSearch : true
}).when('/serialNumber/:serialNumbers', {
controller : 'SerialController',
templateUrl : './serialSearchResult'
}).when('/QuoteManager',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerView'
}).when('/QuoteManagerHome',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerHome'
});
});
return serviceContractModule;
});
Included in this setup is directives.js:
define(['angular',
'AngularApp/Directives/tableOperations',
'AngularApp/Directives/line',
'AngularApp/Directives/listOfValues'],
function(
angular,
tableOperations,
line,
listOfValues)
{
var directiveModule = angular.module('ServiceContractModule.directives');
directiveModule.directive('tableoperations', tableOperations);
directiveModule.directive('line', line);
directiveModule.directive('listOfValues', listOfValues);
return directiveModule;
}Finally, let's not forget services.js:
define(['angular',
'AngularApp/Services/quoteManagerSearch'],
function(angular, quoteManagerSearch)
{
var serviceModule = angular.module('ServiceContractModule.services');
serviceModule.factory('searchRequestHandler', quoteManagerSearch);
return serviceModule;
}During testing, I encountered errors:
Error: Unable to execute module property 'module' directives.js:14
Error: Unable to execute module property 'module' services.js:5
This issue surfaces around:
var directiveModule = angular.module('ServiceContractModule.directives');
Seems like the angular file isn't being loaded properly. Although, all scripts are loading correctly on Chrome.
Your insights would be invaluable! Swift assistance needed. Thanks!