[英]Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr]
I'm using loopback for backend and postgresql for database. 我正在将回送用于后端,将postgresql用于数据库。 so I tried to use lb-service/js. 所以我尝试使用lb-service / js。
If I tried to inculde lbServices in login.js (angular.module('myApp',['ngRoute' ,'lbServices']) .. etc) means getting the error. 如果我尝试在login.js中灌输lbServices(angular.module('myApp',['ngRoute','lbServices'])..等)意味着得到错误。
error details: 错误详情:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: Error: [$injector:nomod] Module 'ngRoute' is not available! 未捕获的错误:[$ injector:modulerr]由于以下原因未能实例化模块myApp:错误:[$ injector:modulerr]由于以下原因而未能实例化模块ngRoute:错误:[$ injector:nomod]模块'ngRoute'不可用! 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. 如果注册模块,请确保将依赖项指定为第二个参数。
Index.html 的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Myapps</title>
<!-- Bootstrap -->
<link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="vendor/theme_files/js/jquery.min.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/services/lb-services.js"></script>
</head>
<body ng-app="myApp" class="nav-md " style="background:#F7F7F7;">
<div class="container body" ui-view></div>
<script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/loginController.js"></script>
<script src="js/services/login.js"></script>
</body>
</html>
login.html 的login.html
<div id="wrapper">
<div id="login" class="animate form">
<section class="login_content">
<form ng-submit="login()">
<br>
<h1>Login</h1>
<div>
<input type="text" class="form-control" ng-model="loginForm.username" placeholder="Username" required="" />
</div>
<div>
<input type="password" class="form-control" ng-model="loginForm.password" placeholder="Password" required="" />
</div>
<div>
<button type="submit" class="btn btn-default submi" ng-disabled="disabled">
Log in
</button>
<a class="reset_pass" href="#">Lost your password?</a>
</div>
<div ng-show="error" class="alert alert-danger">
{{errorMessage}}
</div>
</form>
</section>
<!-- content -->
</div>
</div>
app.js app.js
angular.module('myApp', ['lbServices', 'ui.router']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('todo', {
url : '',
templateUrl : 'views/login.html',
controller : 'loginController'
}).state('login', {
url : '/login',
templateUrl : 'views/login.html',
controller : 'loginController'
}).state('profile', {
url : '/profile',
templateUrl : 'views/profile.html',
controller : 'loginController'
});
$urlRouterProvider.otherwise('login');
}]);
logincontroller.js logincontroller.js
angular.module('myApp').controller('loginController', ['$scope', '$location', 'AuthService',
function($scope, $location, AuthService) {
$scope.login = function() {
// initial values
$scope.error = false;
$scope.disabled = true;
// call login from service
AuthService.login($scope.loginForm.username, $scope.loginForm.password)
// handle success
.then(function() {
$location.path('/index');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function() {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
};
}]);
service/login.js 服务/ login.js
angular.module('myApp',['ngRoute' ,'lbServices']).factory('AuthService', ['$q', '$timeout', '$http',
function($q, $timeout, $http) {
// create user variable
var user = null;
// return available functions for use in controllers
return ( {
isLoggedIn : isLoggedIn,
getUserStatus : getUserStatus,
login : login,
logout : logout,
register : register
});
function isLoggedIn() {
if (user) {
return true;
} else {
return false;
}
}
function getUserStatus() {
return user;
}
function login(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/api/login', {
username : username,
password : password
})
// handle success
.success(function(data, status) {
if (data.status === 200 && data.status) {
user = true;
deferred.resolve();
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function(data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
编辑login.js到
angular.module('myApp',['ui.router' ,'lbServices'])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.