AngularJS project structure and defintions - angularjs

Question

In app.js file I defined the following:
var app = angular.module("app", ["ngRoute"]);
In testController.js I defined the following:
app.controller('testController', ['$scope'], function($scope) {
$scope.temp1 = "";
$scope.temp2 = -1;
});
In testService.js I defined the following:
app.factory('testService', function ($http, $scope) {
'use strict';
return {
list: function (callback) {
$http.get('url?param=' + $scope.temp1).success(callback);
}
};
});
In testController.js and testService.js lint tells me that app is undefined. How can I tell both of the files that app is the app from app.js?
How can I tell testService.js that $scope.temp1 is actually taken from testController.js?
Thanks

Answer 1

First, all of your code should be wrapped in an immediately invoked function expression.
https://github.com/johnpapa/angular-styleguide#iife
(function(){
real code goes here
})();
This keeps the global variable space clean
To access app from the other code, you don't.. you retrieve it again. So your controller would look like this:
(function(){
angular.module("app").controller("testController", ....
})();
And finally, the controller part of your code has misplaced brackets. The closing ] should be after the function.
(function(){
angular.module("app").controller("testController", ['$scope',function($scope){
// function code here
}]
})();
And your service is a singleton (there is only one for the whole app. So, you would not pass scope to the constructor as you have, but you would pass it to the function that needed access to it.
But passing scope down to a service like that will probably tightly couple your controller to your service which is something you shouldn't be doing. You should be retrieving from the service and passing specific elements in that it needs rather than the scope that could change.