【发布时间】：2015-12-31 10:12:30
【问题描述】：
我正在尝试开发一个以 Firebase 作为后端的 Angularjs 应用程序。 我按照这个 [Example][1] 中的步骤操作，但我不断收到 这个错误：
instantiate module tipntripApp due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument.
它似乎无法找到 Firebase 服务。 这里是 html 和 js 文件： index.html , app.js
// create our angular app and inject ngAnimate and ui-router
// =============================================================================
'use strict';
angular.module('tipntripApp', ['ui.router', 'checklist-model', 'firebase'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic find (/find)
.state('app', {
url: '/app',
controller: 'findController',
views: {
'header': {
templateUrl: 'views/header.html',
},
'content': {
templateUrl: 'views/find.html',
controller: 'SearchController'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
// nested states
// each of these sections will have their own view
// url will be nested (/find/step1)
.state('app.step1', {
url: '/step1',
templateUrl: 'views/find_step1.html'
})
// url will be /find/step2
.state('app.step2', {
url: '/step2',
templateUrl: 'views/find_step2.html'
})
// url will be /find/step3
.state('app.step3', {
url: '/step3',
templateUrl: 'views/find_step3.html'
})
.state('app.step4', {
url: '/step4',
templateUrl: 'views/find_step4.html'
})
.state('app.summary', {
url: '/summary',
templateUrl: 'views/find_summary.html'
})
.state('app.results', {
url: '/results',
templateUrl: 'views/find_results.html'
})
.state('login', {
url: '/login',
views: {
'header': {
templateUrl: 'views/header.html',
},
'content': {
templateUrl: 'views/login.html',
controller: 'LoginController'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
})
.state('signin', {
url: '/signin',
views: {
'header': {
templateUrl: 'views/header.html',
},
'content': {
templateUrl: 'views/sigin.html',
controller: 'LoginController'
},
'footer': {
templateUrl: 'views/footer.html',
}
}
});
// catch all route
// send users to the find page
$urlRouterProvider.otherwise('/app/step1');
}
]);<!DOCTYPE html>
<html lang="en" ng-app="tipntripApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* the<!--se tags -->
<title>Tip&Trip</title>
<!-- Bootstrap -->
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../node_modules/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="../node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../node_modules/checklist-model/checklist-model.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/geoservices.js"></script>
<script src="scripts/interestsServices.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<!-- Firebase simple login -->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<!-- endbuild -->
</body>
</html>谢谢。
【问题讨论】：
-
使用 angular.js 而不是 angular.min.js 以获得更好的错误。此外，您遇到的错误与依赖注入有关，您可以将
ng-strict-di添加到您的<html>标记中，以使角度自动检查依赖问题。先试试这两个步骤。 -
我更改为 angular.js 并使用新错误编辑了问题。他找不到 firebase 模块。
-
您的脚本需要在尝试访问它们的脚本之前加载。尝试将
angularFire的<script>标签移动到app.js之前。
标签： javascript angularjs firebase angularfire