Thinkster.io Angularjs tutorial Chapter 3 - Problems connecting to Firebase

问题

I'm following this tutorial, building an angularjs app with connection to the firebase database. I'm stuck at chapter 3 where my app is supposed to make it initial connection to the database. I kind of felt that problems were in front of me since my command prompt and jshint tells me:

Running "jshint:all" (jshint) task

app\scripts\controllers\posts.js
  line 0   col 0  Bad option: 'app'.
  line 8   col 1  'app' is not defined.

app\scripts\services\post.js
  line 0   col 0  Bad option: 'app'.
  line 2   col 1  'app' is not defined.

6 problems

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

My console gives me:

>Uncaught ReferenceError: app is not defined                      post.js
>Error: [$injector:unpr] Unknown provider: PostProvider <- Post
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=PostProvider%20%3C-%20Post at http://localhost:9000/bower_components/angular/angular.js:78:12
at http://localhost:9000/bower_components/angular/angular.js:3705:19
at Object.getService [as get] (http://localhost:9000/bower_components/angular/angular.js:3832:39)
at http://localhost:9000/bower_components/angular/angular.js:3710:45
at getService (http://localhost:9000/bower_components/angular/angular.js:3832:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3859:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3880:23)
at http://localhost:9000/bower_components/angular/angular.js:7134:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:913:26)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6579:13) <div ng-view="" class="ng-scope">

Why isn't my global declaration of 'app' seen by my other js-files?

(apps.js)

var app = angular.module('angNewsApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])

(post.js)

'use strict';
app.factory('Post', function ($resource){
return $resource('https://sizzling-fire-1990.firebaseio.com/posts/:id.json');
});

**All files content are copied from the tutorial

回答1:

I had the same problem doing the tutorial, and It's because you didn't do that it step says:

"If you look at your grunt terminal, you can see that there's a task called jshint that is run every time you change a javascript file. This checks your javascript for any syntax errors and gives you hints for fixing them. Ideally we want to have no errors in our application. In .jshintrc, we can add "app": false to tell jshint about app so we can use it in all of our files without any warnings, and / global app:true / at the top of app.js to let jshint know that app is defined in that file."

Like app is not a global variable, you need to add it, So you Jshintrc File looks like:

{

  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "quotmark": "single",
  "regexp": true,
  "undef": true,
  "unused": true,
  "strict": true,
  "trailing": true,
  "smarttabs": true,
  "globals": {
    "angular": false,
    "app":false <---- Add this line
  }
}

And App.Js:

'use strict';
/* global app:true */ <---- Add this line


/**
 * @ngdoc overview
 * @name angNewsApp
 * @description
 * # angNewsApp
 * 
 * Main module of the application.
 * 
 */


var app = angular.module('angNewsApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize'
  ])....

Also Add the <script src="scripts/services/post.js"></script> in the page.

I think you problem is that.

来源：https://stackoverflow.com/questions/24577840/thinkster-io-angularjs-tutorial-chapter-3-problems-connecting-to-firebase

标签

javascript

angularjs

gruntjs

firebase