Two separate modules are defined in first.js and second.js respectively:
first.js
var app = angular.module('first',['ngGrid']);
app.controller('firstTest',function($scope))
{
...
});
second.js
var app = angular.module('second',['ngGrid']);
app.controller('secondTest',function($scope))
{
...
});
The intention is to reuse these modules in a navigation view structure using tabs.js as shown below:
tabs.js
var app = angular.module('myTabs',['first','second']);
$scope.tabs = [
{title: "first", content:first.firstTest},
{title: "second", content:second.secondTest},
];
$scope.navType='pills';
});
An error message is encountered during this process:
unknown provider firstProvider <- first
This raises two important questions:
1) Is this the best approach for implementing tabbed navigation?
2) How should the injection of the 'first' and 'second' modules be handled correctly?