Angular JS - Loading modules from different files - angularjs

Question

I'm using a few modules from http://mgcrea.github.io/angular-strap/ and a tree view: http://ngmodules.org/modules/angular.treeview and I'm having problems when loading them. For example, I've splitted treeview.js in 2 files: 1 containing the controller and another containing the directive (as I saw on some posts that it's a good practice for Angular):
app.js -> loading flexylaout, modal and a grid
var app = angular.module('app',['flexyLayout','ui.bootstrap','ngGrid']);
treeController.js
(function(){
app.controller('TreeCtrl', function($scope){
$scope.roleList1 = [
{ "roleName" : "Escapamentos e Catalisadores", "roleId" : "role1", "children" : [
{ "roleName" : "Silencioso Intermediario", "roleId" : "role12", "children" : [
{ "roleName" : "Composicao", "roleId" : "role121", "children" : [
{ "roleName" : "Material 1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Arquivo 1", "roleId" : "role2", "children" : [] },
{ "roleName" : "Arquivo 2", "roleId" : "role3", "children" : [] }
];
//test tree model 2
$scope.roleList2 = [
{ "roleName" : "Tubos", "roleId" : "role1", "children" : [
{ "roleName" : "Galvanizados", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "Conducao", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "Material 1", "roleId" : "role121", "children" : [
{ "roleName" : "Material 2", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 3", "roleId" : "role1212", "children" : [] }
]}
]}
]}
];
});
})();
directive.js
(function(){
app.directive('treeModel',function($compile){
return{
restrict:"A",
link:function(a,g,c){
var e=c.treeModel,
h=c.nodeLabel||"label",
d=c.nodeChildren||"children",
k='<ul><li data-ng-repeat="node in '
+e+'"><i class="collapsed" data-ng-show="node.'
+d+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'
+d+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'
+d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'
+h+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'
+d+'" data-node-id='
+(c.nodeId||"id")+" data-node-label="
+h+" data-node-children="
+d+"></div></li></ul>";
e&&e.length&&(c.app?(a.$watch(e,function(m,b){
g.empty().html($compile(k)(a))
},
!1),
a.selectNodeHead=a.selectNodeHead||function(a,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.collapsed=!a.collapsed
},
a.selectNodeLabel=a.selectNodeLabel||function(c,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.currentNode&&a.currentNode.selected&&(a.currentNode.selected=void 0);
c.selected="selected";
a.currentNode=c
}):g.html($compile(k)(a)))
}
}
});
})();
What I'm willing to do is: when the page loads, a tree with that data should appear but it doesn't. Before I splitted treeview.js, the code was:
(function(){
//angular module
var myApp = angular.module('myApp', ['angularTreeview']);
//test controller
myApp.controller('myController', function($scope){
//test tree model 1
$scope.roleList1 = [
{ "roleName" : "Escapamentos e Catalisadores", "roleId" : "role1", "children" : [
{ "roleName" : "Silencioso Intermediario", "roleId" : "role12", "children" : [
{ "roleName" : "Composicao", "roleId" : "role121", "children" : [
{ "roleName" : "Material 1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Arquivo 1", "roleId" : "role2", "children" : [] },
{ "roleName" : "Arquivo 2", "roleId" : "role3", "children" : [] }
];
//test tree model 2
$scope.roleList2 = [
{ "roleName" : "Tubos", "roleId" : "role1", "children" : [
{ "roleName" : "Galvanizados", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "Conducao", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "Material 1", "roleId" : "role121", "children" : [
{ "roleName" : "Material 2", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 3", "roleId" : "role1212", "children" : [] }
]}
]}
]}
];
//roleList1 to treeview
$scope.roleList = $scope.roleList;
});
})();
(function(l){l.module("angularTreeview",[]).directive("treeModel",function($compile)
{return{restrict:"A",link:function(a,g,c)
{var e=c.treeModel,h=c.nodeLabel||"label",d=c.nodeChildren||"children",
k='<ul><li data-ng-repeat="node in '+e+'">
<i class="collapsed" data-ng-show="node.'+d+'.
length && node.collapsed" data-ng-click="selectNodeHead(node, $event)">
</i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed"
data-ng-click="selectNodeHead(node, $event)"></i>
<i class="normal" data-ng-hide="node.'+d+'.length"></i>
<span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">
{{node.'+h+'}}</span>
<div data-ng-hide="node.collapsed" data-tree-model="node.'+d+'
" data-node-id='+(c.nodeId||"id")+" data-node-label="+h+" data-node-children="+d+">
</div></li></ul>";
e&&e.length&&(c.angularTreeview?(a.$watch(e,function(m,b){
g.empty().html($compile(k)(a))},!1),
a.selectNodeHead=a.selectNodeHead||function(a,b){b.stopPropagation&&
b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=
!0;b.returnValue=!1;
a.collapsed=!a.collapsed},b.selectNodeLabel=a.selectNodeLabel||function(c,b){ b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();b.cancelBubble=!0;b.returnValue=!1;
a.currentNode&&a.currentNode.selected&& (a.currentNode.selected=void0;
c.selected="selected";a.currentNode=c}):g.html($compile(k)(a)))}}})})(angular);
everything was working fine before I spllited that file (but I was testing with 1 only module, in other words, no flexy layout, grid, etc. only tree view)
I appreciate any tips/suggestions..
Lucas.

Answer 1

There should only be one module declared to manage the whole page and that module will have same name as ng-app. All the modules you inject should load in page before you try to inject them...can't inject what doesn't exist yet
You inject all other dependent modules in dependency array for the main ng-app page module.
Once you have initialized your 'ng-app` module, use the variable you assign it to to create controllers/directives/services etc.
You have one module you create as app and another as myApp. To use both you need to inject the one that doesn't match ng-app into the one that does