This is my issue. I want to lazy load directives using angularjs- requirejs. Below given is a sample in the plunker http://plnkr.co/edit/HdQMxW5MbvmY49AMz4Le
If you see, there are 3 js files. main, app and dir Even though all the files are loaded. dir which contains the directive does not get executed.
Main.js
require.config({
paths: {
'angular': 'http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js'
},
shim: {
'angular': {
'exports': 'angular'
}
}
});
require(['angular', 'app'], function (angular, app) {
console.log("Control Reaches Here. Step-1- main.js ");
require(['dir']);
console.log("Control Reaches Here. Step-2- main.js ");
angular.element().ready(function () {
angular.bootstrap(document, ['v2r']);
console.log("Control Reaches here. Step-3- main.js");
});
});
App.js
define('app', ['require', 'angular'], function (require, angular) {
console.log('This gets loaded - app.js');
return angular.module('v2r', []);
});
Dir.js
define('dir', ['require', 'angular', 'app'], function (require, angular, app) {
console.log('This gets loaded - dir.js');
app.directive('dir', function () {
console.log("Directive fired.");
return {
restrict: 'E',
replace: true,
template: '<h1>Hello World </h1>',
link: function (scope) {
console.log('directive Loaded');
}
};
});
return app;
});
My index.html is as shown below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lazy Loading</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js" data-main="main" type="text/javascript"></script>
</head>
<body>
<dir />
</body>
</html>
Below given is the log
-------LOGS-----------------------
--This gets loaded - app.js
--Control Reaches Here. Step-1- main.js
--Control Reaches Here. Step-2- main.js
--Control Reaches here. Step-3- main.js
--This gets loaded - dir.js
If you see above , the dir just gets loaded, its not executed. Could some one please tell me what I am doing wrong here?
