Angular noob + Yeoman: 'app' is not defined - angularjs

Question

I built a to do list you can see here: https://github.com/EdmundMai/angular_todolist
In my controller, I can access the toDoListApp globally anywhere I want.
However, now I'm starting a new project with Yeoman and I have the same setup:
app.js:
'use strict';
var app = angular.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.otherwise({
redirectTo: '/'
});
});
posts.js:
'use strict';
app.controller('PostsCtrl', function($scope) {
});
posts.html:
<p>{{hey}}zzzzz</p>
However, jshint is complaining and my view isn't showing.
app/scripts/controllers/posts.js
line 3 col 1 'app' is not defined.
line 3 col 44 '$scope' is defined but never used.
Why is it that I can't use app?
UPDATE
the include tags of my index.html:
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<!-- endbuild -->
What should I do with these?

Answer 1

It's because you have separated your JavaScript in two file. You need to bring it to one file.
You can compile with the --out option to get a single file.
Include all files into script tags (Order is important).
Use a module loader like RequireJS.