404 Not Found configure view in backbone router - backbone.js

Here is the structure of my project
Then I configured in router :
define([
'jquery',
'backbone',
'router',
'views/Service/Service'
], function($,
Backbone,
Router,
Service
This is main.js :
requirejs.config({
enforceDefine: true,
paths: {
"webconfig" : "libs/scripts/WebConfig",
"jquery": "libs/jquery/jquery-min",
"underscore": "libs/underscore/underscore-min",
"backbone": "libs/backbone/backbone-min",
"localStorage" : "libs/backbone/backbone.localStorage-min",
"reveal":"libs/jquery/jquery.reveal",
"jquery.pnotify" : "libs/jquery/jquery.pnotify.min",
"text" : "text",
"ice" : "libs/scripts/ice",
"cart" : "libs/scripts/Cart",
"wishlist" : "libs/scripts/WishList",
"user" : "libs/scripts/Customer",
"content" : "libs/scripts/Content",
"item" : "libs/scripts/Item",
"service" : "libs/scripts/Service",
"rewardcart" : "libs/scripts/RewardCart",
"recentlyviewed" : "libs/scripts/RecentlyView",
"msgbox" : "libs/scripts/msgbox",
"navigator" : "libs/scripts/Navigator",
"quotation" : "libs/scripts/Quotation",
"websitetracking" : "libs/scripts/WebsiteTracking",
"select2" : "libs/jquery/select2",
"jquery-menu-aim" : "libs/jquery/jquery.menu-aim",
"bootstrap" : "libs/jquery/bootstrap.min",
"jssor" : "libs/jquery/jssor.slider.min"
},
shim: {
"webconfig" : {
exports : "forMainRequireJS"
},
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"reveal": {
deps: ["jquery"],
exports: "jQuery.fn.reveal"
},
'jquery.pnotify': ["jquery"],
"ice" : {
//deps: ["jquery"],
exports: "getItemIndexById"
},
"cart" : {
exports : "Cart"
},
"wishlist" : {
exports : "WishList"
},
"user" : {
exports : "Customer"
},
"item" : {
exports : "Item"
},
"content" : {
exports : "Content"
},
"service" : {
exports : "Service"
},
"rewardcart" : {
exports : "RewardCart"
},
"recentlyviewed" : {
exports : "RecentlyView"
},
"msgbox" : {
exports : "messageBox"
},
"navigator" : {
exports : "Navigator"
},
"quotation" : {
exports : "Quotation"
},
"websitetracking" : {
exports : "WebsiteTracking"
},
"select2" : {
exports : "Select2"
},
"jquery-menu-aim" : {
deps: ["jquery"] ,
exports: "jQuery.fn.menuAim"
},
"bootstrap": {
deps: ["jquery"],
exports: "jQuery.fn.popover"
},
"jssor" : {
exports : "$JssorSlider$"
}
}
});
define(["app"] , function(App){
App.initialize();
});
I got NetworkError: 404 Not Found - http://localhost/source/webcore/Service.js" error.
What did I wrong here?
Thanks for your answer.

Related

Mongo DB goes slow with increase in number of records

We Used mongo and its working fine on testing server(i think due to less number of records) but when we move to production it goes slow. even simple queries taking around 10s time.
I had checked indexes too there are proper indexes already defined.
Query
db.products.aggregate([{
"$match": {
"tenant_id": 1031
}
}, {
"$sort": {
"id": -1
}
}, {
"$skip": 0
}, {
"$limit": 20
}]
)
Explain Result
// collection: products
{
"waitedMS" : NumberLong("0"),
"stages" : [
{
"$cursor" : {
"query" : {
"tenant_id" : 1031
},
"sort" : {
"id" : NumberInt("-1")
},
"limit" : NumberLong("20"),
"queryPlanner" : {
"plannerVersion" : NumberInt("1"),
"namespace" : "dbname.products",
"indexFilterSet" : false,
"parsedQuery" : {
"tenant_id" : {
"$eq" : 1031
}
},
"winningPlan" : {
"stage" : "FETCH",
"filter" : {
"tenant_id" : {
"$eq" : 1031
}
},
"inputStage" : {
"stage" : "IXSCAN",
"keyPattern" : {
"id" : NumberInt("-1")
},
"indexName" : "id",
"isMultiKey" : false,
"isUnique" : false,
"isSparse" : false,
"isPartial" : false,
"indexVersion" : NumberInt("1"),
"direction" : "forward",
"indexBounds" : {
"id" : [
"[MaxKey, MinKey]"
]
}
}
},
"rejectedPlans" : [ ]
}
}
}
],
"ok" : 1
}
Please let me know what i can do make it fast
To properly support this query, you need a compound index on {tenant_id: 1, id: -1}. The first part helps filtering, the second one - enables fast sorting of the filtered results.
Some documentation: https://docs.mongodb.com/manual/core/index-compound/#sort-order

Suppressing Camel specific attributes from Camel generated swagger definition

I am using camel-swagger to generate the API definition of my service. Please find below the generated swagger definition -
{
"swagger" : "2.0",
"info" : {
"description" : "api.description",
"version" : "1.0",
"title" : "api.title",
"termsOfService" : "api.termsOfService",
"contact" : {
"name" : "api.contact.name",
"url" : "http://api.contact.url",
"email" : "api#demo.com"
},
"license" : {
"name" : "api.license.name",
"url" : "http://api.license.url"
}
},
"host" : "0.0.0.0:13000",
"basePath" : "/airportinfo-service/1.0",
"tags" : [ {
"name" : "airports"
} ],
"schemes" : [ "http" ],
"paths" : {
"/airports" : {
"get" : {
"tags" : [ "airports" ],
"parameters" : [ ],
"responses" : {
"200" : {
"description" : "Output type",
"schema" : {
"$ref" : "#/definitions/Airports"
}
}
},
"x-camelContextId" : "airportinfo-service",
"x-routeId" : "getAirports"
}
},
"/airports/{id}" : {
"get" : {
"tags" : [ "airports" ],
"parameters" : [ {
"name" : "id",
"in" : "path",
"description" : "",
"required" : true,
"type" : "string"
} ],
"responses" : {
"200" : {
"description" : "Output type",
"schema" : {
"$ref" : "#/definitions/Airport"
}
}
},
"x-camelContextId" : "airportinfo-service",
"x-routeId" : "getAirport"
}
},
"/airports/health" : {
"get" : {
"tags" : [ "airports" ],
"parameters" : [ ],
"responses" : {
"200" : {
"description" : "Output type",
"schema" : {
"type" : "string",
"format" : "java.lang.String"
}
}
},
"x-camelContextId" : "airportinfo-service",
"x-routeId" : "health"
}
}
},
"definitions" : {
"Airport" : {
"type" : "object",
"properties" : {
"id" : {
"type" : "integer",
"format" : "int64"
},
"airportIataCode" : {
"type" : "string"
},
"airportName" : {
"type" : "string"
},
"airportStatus" : {
"type" : "string"
},
"airportLatitude" : {
"type" : "number",
"format" : "double"
},
"airportLongitude" : {
"type" : "number",
"format" : "double"
},
"airportUrl" : {
"type" : "string"
},
"cityId" : {
"type" : "integer",
"format" : "int64"
},
"cityIataCode" : {
"type" : "string"
},
"cityName" : {
"type" : "string"
},
"cityLatitude" : {
"type" : "number",
"format" : "double"
},
"cityLongitude" : {
"type" : "number",
"format" : "double"
},
"cityStatus" : {
"type" : "string"
},
"cityCategory" : {
"type" : "string"
},
"countryId" : {
"type" : "integer",
"format" : "int64"
},
"countryIataCode" : {
"type" : "string"
},
"countryName" : {
"type" : "string"
},
"region" : {
"type" : "string"
}
},
"x-className" : {
"type" : "string",
"format" : "demo.service.composite.airportinfo.datatypes.Airport"
}
},
"Airports" : {
"type" : "object",
"properties" : {
"size" : {
"type" : "integer",
"format" : "int32"
},
"airports" : {
"type" : "array",
"items" : {
"$ref" : "#/definitions/Airport"
}
}
},
"x-className" : {
"type" : "string",
"format" : "demo.service.composite.airportinfo.datatypes.Airports"
}
}
}
}
The code that generates the aforementioned API definition is -
restConfiguration()
.component("{{server.component}}")
.host("{{server.host}}")
.port("{{server.port}}")
.bindingMode(RestBindingMode.json)
.dataFormatProperty("prettyPrint", "true")
.contextPath("/{{service.name}}/{{service.version}}")
.apiContextPath( "/" )
.apiProperty("api.title", "{{api.title}}")
.apiProperty("api.version", "{{service.version}}")
.apiProperty("api.description", "{{api.description}}")
.apiProperty("api.termsOfService", "{{api.termsOfService}}")
.apiProperty("api.contact.name", "{{api.contact.name}}")
.apiProperty("api.contact.email", "{{api.contact.email}}")
.apiProperty("api.contact.url", "{{api.contact.url}}")
.apiProperty("api.license.name", "{{api.license.name}}")
.apiProperty("api.license.url", "{{api.license.url}}")
.apiProperty("apiContextIdListing", "{{apiContextIdListing}}")
.apiProperty("apiContextIdPattern", "{{apiContextIdPattern}}");
rest("/airports")
.get()
.id("getAirports")
.outType(Airports.class)
.to("direct:getAirports")
.get("/{id}")
.id("getAirport")
.outType(Airport.class)
.to("direct:getAirport")
.get("/health")
.id("health")
.outType(String.class)
.to("direct:health");
Now, I want to import this definition in AWS API Gateway. But, the same is not getting accepted because of the following portions in the API definition given above -
Need to remove
"x-className" : {
"type" : "string",
"format" : "demo.service.composite.airportinfo.datatypes.Airport"
}
Need to remove
"x-className" : {
"type" : "string",
"format" : "demo.service.composite.airportinfo.datatypes.Airports"
}
Need to replace
"schema" : {
"type" : "string",
"format" : "java.lang.String"
}
with
"schema" : {
"format" : "String"
}
Making these changes, I am able to import the definition in AWS API Gateway easily.
Is there a way to suppress Camel specific attributes in the swagger definition generated using camel-swagger?
Thanks.
No this is not possible, they are always included.
These types are extensions, eg they start with x- as documented in the spec: https://swagger.io/specification/#specificationExtensions
I logged a ticket to add support for this in the next release: https://issues.apache.org/jira/browse/CAMEL-11957
And we also fixed the primitive types in the responses to not use the format: https://issues.apache.org/jira/browse/CAMEL-11960

angularjs and elasticsearch js api, how to force GET instead of POST

I use elasticsearch javascript api with angularjs. This is working very good but i need to query the elasticsearch service through a middleware to filter dangerous request ( delete , update ). the middleware work with 'GET' but the API use by default 'POST' query.
According to the doc i can specify a parameter 'method' to use 'GET' query by the API :
API Conventions
It work with 'POST' but failed with 'GET',"GET' and i have an error :
Error: elasticQuery.search(...) is undefined
How can i do ? 'Get' can work with long and complexe query like this example bellow ?
this is how i try it :
return elasticQuery.search({
method : 'GET',
index: 'indexbotanic',
from: 0
size: 10,
body: {
"fields" : ["C_COLLECTIONCODE", "T_SCIENTIFICNAME", "T_SCIENTIFICNAMEAUTHORSHIP", "T_SPECIFICEPITHET", "T_KINGDOM", "T_PHYLUM", "T_CLASS_", "T_ORDER_", "T_FAMILY", "T_GENUS", "T_SUBGENUS", "T_VERNACULARNAME", "O_CATALOGNUMBER", "O_RECORDNUMBER", "O_CREATED", "O_SEX", "I_INSTITUTIONCODE", "D_DETERMINATIONID", "D_IDENTIFIEDBY", "M_IDENTIFIER", "E_RECORDNUMBER", "E_RECORDEDBY", "L_CONTINENT", "L_COUNTRY", "L_COUNTRYCODE", "L_COUNTY", "L_LOCALITY"],
"query" : {
"filtered" : {
"filter" : {
"and" : [{
"or" : [{
"term" : {
"L_CONTINENT" : "europe"
}
}
]
}, {
"or" : [{
"term" : {
"T_FAMILY" : "lamiaceae"
}
}
]
}, {
"or" : [{
"term" : {
"E_RECORDEDBY" : "balay, r."
}
}, {
"term" : {
"E_RECORDEDBY" : "boissier, p.e."
}
}
]
}, {
"or" : [{
"term" : {
"T_SCIENTIFICNAME" : "lamium amplexicaule"
}
}
]
}, {
"or" : [{
"term" : {
"T_GENUS" : "lamium"
}
}, {
"term" : {
"T_GENUS" : "betonica"
}
}
]
}
]
}
}
},
"highlight" : {
"pre_tags" : ["<strong>"],
"post_tags" : ["</strong>"],
"fields" : {
"C_COLLECTIONCODE" : {},
"O_CATALOGNUMBER" : {},
"O_RECORDNUMBER" : {},
"O_CREATED" : {},
"O_SEX" : {},
"D_DETERMINATIONID" : {},
"D_IDENTIFIEDBY" : {},
"E_EVENTID" : {},
"E_RECORDNUMBER" : {},
"E_RECORDEDBY" : {},
"L_CONTINENT" : {},
"L_COUNTRY" : {},
"L_COUNTRYCODE" : {},
"L_COUNTY" : {},
"L_LOCALITY" : {},
"T_SCIENTIFICNAME" : {},
"T_SCIENTIFICNAMEAUTHORSHIP" : {},
"T_SPECIFICEPITHET" : {},
"T_KINGDOM" : {},
"T_PHYLUM" : {},
"T_CLASS_" : {},
"T_ORDER_" : {},
"T_FAMILY" : {},
"T_GENUS" : {},
"T_SUBGENUS" : {},
"T_VERNACULARNAME" : {}
}
},
"aggs" : {
"L_CONTINENT_MISSING" : {
"missing" : {
"field" : "L_CONTINENT"
}
},
"O_SEX_MISSING" : {
"missing" : {
"field" : "O_SEX"
}
},
"I_INSTITUTIONCODE_MISSING" : {
"missing" : {
"field" : "I_INSTITUTIONCODE"
}
},
"T_TAXONRANK_MISSING" : {
"missing" : {
"field" : "T_TAXONRANK"
}
},
"D_TYPESTATUS_MISSING" : {
"missing" : {
"field" : "D_TYPESTATUS"
}
},
"O_HASMEDIA_MISSING" : {
"missing" : {
"field" : "O_HASMEDIA"
}
},
"T_SCIENTIFICNAME_MISSING" : {
"missing" : {
"field" : "T_SCIENTIFICNAME"
}
},
"T_FAMILY_MISSING" : {
"missing" : {
"field" : "T_FAMILY"
}
},
"T_GENUS_MISSING" : {
"missing" : {
"field" : "T_GENUS"
}
},
"E_RECORDEDBY_MISSING" : {
"missing" : {
"field" : "E_RECORDEDBY"
}
},
"L_CONTINENT" : {
"terms" : {
"field" : "L_CONTINENT",
"size" : 20
}
},
"O_SEX" : {
"terms" : {
"field" : "O_SEX",
"size" : 20
}
},
"I_INSTITUTIONCODE" : {
"terms" : {
"field" : "I_INSTITUTIONCODE",
"size" : 20
}
},
"T_TAXONRANK" : {
"terms" : {
"field" : "T_TAXONRANK",
"size" : 20
}
},
"D_TYPESTATUS" : {
"terms" : {
"field" : "D_TYPESTATUS",
"size" : 20
}
},
"O_HASMEDIA" : {
"terms" : {
"field" : "O_HASMEDIA",
"size" : 20
}
},
"T_SCIENTIFICNAME" : {
"terms" : {
"field" : "T_SCIENTIFICNAME",
"size" : 20
}
},
"T_FAMILY" : {
"terms" : {
"field" : "T_FAMILY",
"size" : 20
}
},
"T_GENUS" : {
"terms" : {
"field" : "T_GENUS",
"size" : 20
}
},
"E_RECORDEDBY" : {
"terms" : {
"field" : "E_RECORDEDBY",
"size" : 20
}
}
},
"sort" : "_score"
}
}).then(function (response) {
...
}
for example this work with GET :
curl -XGET 'http://localhost:9200/index/tablename/_search?pretty' -d '{
"query": {
"query_string": {
"query":"*keysearch*",
"fields": ["field1","field2","field3"]
}
}
}'
So how to force the api to send get with "-d '{ .... }' " ?
thanks a lot
Try to use this client: https://github.com/YousefED/elasticsearch.angular.simple and change POST into GET. I'm not sure which browsers support GET requests with a body though, you might be running into a limitation there.

$.fn.dataTable.Editor is not a constructor - RequireJS with DataTables

Library versions:
jQuery : 2.1.1
DataTables : 1.10.1-dev
dataTablesTableTools : 2.2.1
dataTables.dataTables.editor.min.js : 1.2.3
I'm trying to implement CRUD operation using datatableseditor using Backbone, RequireJS and Datatables.But I'm getting the error message:
$.fn.dataTable.Editor is not a constructor"
What could be the reason?
Here is my configuration:
require.config({
baseUrl: 'js',
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatablesTableTools: 'vendor/dataTables.tableTools.min',
datatablesEditor: 'vendor/dataTables.editor.min'
},
shim: {
jquery : {
exports : '$'
},
datatables: {
deps: [
'jquery',
]
},
datatablesTableTools: { deps: ['datatables'] },
datatablesEditor: { deps: ['datatables'] }
}
});
Using it as follows:
require(["jquery", "datatables"], function () {
var editor = new $.fn.dataTable.Editor( {
"ajax": "table.line.php"
} );
$('#myGrid').dataTable( {
"aaData": [
['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version" },
{ "sTitle": "Grade" }
],
"tableTools": {
"sRowSelect": "os",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
});
I think you have made a mistake in your table of dependencies. In your second code, it should be like this :
require(["jquery", "datatablesEditor"], function () {
[...]
instead of
require(["jquery", "datatables"], function () {
[...]
I've checked and it's more vicious. When you look the source code of the plugin datatables-fixedcolumns for example, its name is specified so you need to use it instead of your own alias/name.
The source code dataTables.fixedColumns.js :
[...]
// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
define( 'datatables-fixedcolumns', ['jquery', 'datatables'], factory );
}
else if ( jQuery && !jQuery.fn.dataTable.FixedColumns ) {
// Otherwise simply initialise as normal, stopping multiple evaluation
factory( jQuery, jQuery.fn.dataTable );
}
[...]
So in your requirejs.config, you need to write this :
[...]
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatables-fixedcolumns: 'vendor/dataTables.fixedColumns'
[...]
instead of
[...]
paths: {
jquery: 'vendor/jquery.min',
datatables: 'vendor/jquery.dataTables.min',
datatablesFixedColumns: 'vendor/dataTables.fixedColumns'
[...]

Angular JS - Loading modules from different files

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.
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

Resources