Angular Noob + Yeoman：“ app”未定义

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.

1. You can compile with the --out option to get a single file.
2. Include all files into script tags (Order is important).
3. Use a module loader like RequireJS.