I am currently working on a Angualar JS project based on angularAMD.
Link: http://marcoslin.github.io/angularAMD/#/home
Here we include only the necessary dependent files in needed by the controllers and not all the files.
eg.
define(['angularAMD', 'common/services/service1', 'module1/services/service2',], function (angularAMD) {
'use strict';
angularAMD.controller('abcController', function ($scope, service1, service2) {
// controller code goes here
}
I have tried Grunt Hashing but
Grunt provides hashing but the location of the hashed files changes.
This does not change the path of the files inside individual controller as a result the application fails to run. i.e service1, service2
Question
I was wondering if there was a way to hash the files when we include a new files?
Is there any other way to solve this problem?
Thanks in Advance
how do u set up your modules. Your main.js may look like this
'use strict';
require.config({
waitSeconds: 0,
urlArgs: "bust=v1.0.0",
paths: {
bootstrap: 'Scripts/bootstrap.min',
jquery: 'Scripts/jquery-1.10.2.min',
angular: 'Scripts/angular.min',
angularRoute: 'Scripts/angular-route.min',
angularAMD: 'Scripts/angularAMD.min',
app: 'ngApp/app',
appConfig: 'ngApp/app.config',
/*register Services - Start*/
service1: 'ngServices/Common/service1',
service2: 'ngServices/module/service2',
/*register Services - End*/
/*register Filters - Start*/
/*register Filters - End*/
/*register Controllers - Start*/
/*register Controllers - End*/
},
// specifying library dependencies
shim: {
'bootstrap':{ deps:['jquery']},
'angular': { deps: ['jquery'], exports: 'angular' },
'angularRoute': { deps: ['angular'] },
'angularAMD': { deps: ['angular'] }
},
// define application bootstrap
deps: ['app']
});
and in your index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-ng-controller="appController as appCtrl" ng-cloak>
<div >
<ng-view></ng-view>
</div>
</div>
<script data-main="main" src="Scripts/require.js"></script>
</body>
</html>
and in your controllers
'use strict';
define(['angularAMD', 'service1', 'service2'],
function (angularAMD) {
angularAMD.controller('abcController', ['service1', 'service2',
function (service1, service1) {
var self = this,
// your code
}]);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With