I'm having problems when trying to use multiple modules in Angular JS. I cannot use more than 1 module, it seems like Angular doesn't recognize the code. I'm willing to use a tree view + flex grid on an application but the tree doesn't shows up, just the flex grid. I'm pretty sure I'm missing something on moduling but I don't know what... Here is the code:
index.htm
<html ng-app="app">
<script src="js/angular/angular.js"></script>
<script src="js/main.js"></script>
<!-- Flex Grid !-->
<script src="js/flexygrid/controllers/FlexControllers.js"></script>
<script src="js/flexygrid/directives/FlexDirectives.js"></script>
<script src="js/flexygrid/misc/FlexBlock.js"></script>
<!-- Tree !-->
<script src="js/tree/controllers/TreeControllers.js"></script>
<script src="js/tree/directives/TreeDirectives.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
main.js
var app = angular.module('app',['flexyLayout.directives','tree.controller']);
FlexControllers.js
function (angular) {
"use strict";
angular.module('flexyLayout.mediator', ['flexyLayout.block']).
controller('mediatorCtrl', ['$scope', '$element', '$attrs', 'Block', function (scope, element, attrs, Block) {
...
}
FlexDirectives.js
function (angular) {
"use strict";
angular.module('flexyLayout.directives', ['flexyLayout.mediator'])
.directive('flexyLayout', function () {
...
})(angular);
FlexBlock.js
(function (angular) {
"use strict";
angular.module('flexyLayout.block', [])
.provider('Block', function () {
...
}
})(angular);
TreeControllers.js
(function(){
angular.module('tree.controller',['angularTreeview']).controller('TreeCtrl', function($scope){
...
}
})();
TreeDirectives.js
(function(){
angular.module('angularTreeview',[]).directive('treeModel',function($compile){
...
}
})();
