我正在尝试在角度1.4.8中实现oauth服务。我在控制台中收到错误：
未捕捉错误：
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angularoauthexample…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.8%2Fangular.min.js%3A19%3A463)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4458n @ angular.js:340g @ angular.js:4419eb @ angular.js:4344c @ angular.js:1676yc @ angular.js:1697Zd @ angular.js:1591(anonymous function) @ angular.js:29013j @ jquery.js:3148k.fireWith @ jquery.js:3260m.extend.ready @ jquery.js:3472J @ jquery.js:3503
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--Bootstrap social-->
<link rel="stylesheet" href="css/bootstrap-social.css">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="angularoauthexampleApp">
<div id="wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand em-text" href="#"><i class="fa fa-user-plus fa-1x" style="color:whitesmoke"></i></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<!--<button class="btn btn-primary" ng-click="login()"><i class="fa fa-google" ng-click="login()"></i> Google</button>-->
<a href="#" class="btn btn-google"><i class="fa fa-google" ng-click="login()"></i> Google</a>
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right"><a href="">Forget the password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <a href="#"><b>Join Us</b></a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
角度代码：
App.js：
'use strict';
angular
.module('angularoauthexampleApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/afterlogin', {
templateUrl: 'views/afterlogin.html',
controller: 'AboutCtrl'
})
.when('/access_token=:accessToken', {
template: '',
controller: function ($location,$rootScope) {
var hash = $location.path().substr(1);
var splitted = hash.split('&');
var params = {};
for (var i = 0; i < splitted.length; i++) {
var param = splitted[i].split('=');
var key = param[0];
var value = param[1];
params[key] = value;
$rootScope.accesstoken=params;
}
$location.path("/afterlogin");
}
})
.otherwise({
redirectTo: '/'
});
});
Main.js
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.login=function() {
var client_id="343625411797-hcm0impil8l1mughb8ma2jj966um05bp.apps.googleusercontent.com";
var scope="email";
var redirect_uri="http://localhost:9046/RTH_Sample4/app/";
var response_type="token";
var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
"&response_type="+response_type;
window.location.replace(url);
};
});
About.js
angular.module('angularoauthexampleApp')
.controller('AboutCtrl', function ($scope,$rootScope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.root=$rootScope;
});
我尝试在线搜索修复但到目前为止没有任何效果。
我该如何解决这个问题？
答案 0 :(得分：1)
我认为您在定义控制器时遇到错误。
而不是：
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
// controller content
});
试试这个：
angular.module('angularoauthexampleApp')
.controller('MainCtrl', ['$scope', function ($scope) {
// controller content
}]);