Angular js app not defined warning - angularjs

Question

This is my first attempt to create a sample angular application.
In app.js I defined the following -
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
I have created corresponding sample.js for controller, sample.html for template and sampleModel.js for model.
In grunt console, it throws app is not defined in controller and model file
Here is the controller file -
'use strict';
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
All the files are included in index.html and the resources are loading correctly which I checked by chrome developer tool but I can't find the reason why it says app not defined. Is there anything I am missing?

Answer 1

As they are separate files and grunt/jshint will not know that the variable is available in other files. Instead of that it would be a best practice to use it in this way:
Instead use this:
angular.module('myTestApp')
.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
Another general pattern you might have noticed in most the other's code, wrapping the code inside an IIFE.
(function() {
"use strict";
var app = angular.module('myTestApp')
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
})();
In this app will not pollute the global namespace and it's local to that function.
Here if you've noticed, I've not used [] while using angular.module(), it means that we're just getting that module.
So in your app.'s alone, it will be with [] and in other files without []
(function() {
"use strict";
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
$routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
})();

Answer 2

If everything else is fine, this line is causing the issue in your code -
app.config(function ($routeProvider) {
routeProvider
you should instead use -
app.config(function ($routeProvider) {
$routeProvider
And yes, if var app is not working, try using
angular.module('myTestApp')
.controller('SampleCtrl',...