Angular js 1.4.8注入模块错误 [英] Angular js 1.4.8 Injection module error
本文介绍了Angular js 1.4.8注入模块错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在角度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)(匿名函数)@ angular.js:38(匿名函数)@ angular.js:4458n@angular.js:340g@angular.js:4419eb@angular.js:4344c@angular.js:1676yc @angular.js:1697Zd @ angular.js:1591(匿名函数)@ angular.js:29013j @ jquery.js:3148k.fireWith @ jquery.js:3260m.extend.ready @ jquery.js:3472J @ jquery.js:3503 HTML:
<！DOCTYPE html>< html lang ="zh-CN">< head>< meta charset ="utf-8">< meta http-equiv ="X-UA-Compatible" content ="IE = edge">< meta name ="viewport" content ="width = device-width，initial-scale = 1"><！-以上3个元标记*必须*排在首位；其他任何头部内容都必须在这些标签之后*<元名称=说明" content ="><元名称=作者" content =">< title>用于Bootstrap的入门模板</title>< ;!-Bootstrap核心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"><！-此模板的自定义样式->< 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折叠" data-toggle ="collapse" data-target =#navbar" aria-expanded ="false" aria-controls ="navbar">< span class ="sr-only">切换导航</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">关于</a></li>< li>< a href =#contact"> Contact</a></li></ul>< ul class ="nav navbar-nav navbar-right">< li>< p class ="navbar-text">已经有一个帐户了?</p></li>< li class ="dropdown">< a href =#" class ="dropdown-toggle" data-toggle ="dropdown">< b>登录</b>< span class ="caret"></span></a>< ul id ="login-dp" class ="dropdown-menu">< li>< div class ="row">< div class ="col-md-12">通过登录< 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>或者< 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">电子邮件地址</label><输入type ="email" class ="form-control" id ="exampleInputEmail2"占位符=电子邮件地址"必填></div>< div class ="form-group">< label class ="sr-only" for ="exampleInputPassword2">密码</label><输入类型=密码" class ="form-control" id ="exampleInputPassword2"占位符=密码">< div class ="help-block text-right">< a href =">忘记密码?</a></div></div>< div class ="form-group">< button type ="submit" class ="btn btn-primary btn-block">登录</button></div>< div class ="checkbox"><标签>< input type ="checkbox">保持登录状态</label></div></form></div>< div class ="bottom text-center">新来的 ?< a href =#">< b>加入我们</b></a></div></div></li></ul></li></ul></div><！-/.nav-collapse-></div></nav>< ;!-Bootstrap核心JavaScript + Angular Js==================================================-><！-放置在文档的末尾，因此页面加载速度更快->< 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';角度的.module('angularoauthexampleApp'，['ngAnimate'，'ngCookies'，'ngResource'，'ngRoute'，'ngSanitize'，'ngTouch']).config(function($ routeProvider){$ routeProvider.什么时候('/'， {templateUrl:"views/main.html"，控制器:"MainCtrl"}).when('/afterlogin'，{templateUrl:"views/afterlogin.html"，控制器:"AboutCtrl"}).when('/access_token =:accessToken'，{模板: ''，控制器:功能($ 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 =参数;}$ location.path("/afterlogin");}}).否则({redirectTo:'/'});}); Main.js
angular.module('angularoauthexampleApp').controller('MainCtrl'，function($ scope){$ scope.awesomeThings = ["HTML5样板"，'AngularJS'，'业力'];$ 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样板"，'AngularJS'，'业力'];$ scope.root = $ rootScope;}); 我尝试在线搜索修复程序，但到目前为止没有任何效果.
我该如何解决?
解决方案
我认为您在定义控制器时出错.
代替此:
angular.module('angularoauthexampleApp').controller('MainCtrl'，function($ scope){//控制器内容}); 尝试以下方法:
angular.module('angularoauthexampleApp').controller('MainCtrl'，['$ scope'，function($ scope){//控制器内容}]); 请参阅文档: https://docs.angularjs.org/guide/controller
I am trying to implement oauth service in angular 1.4.8. I am getting an error in console like this:
Uncaught Error:
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>
Angular code:
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;
});
I tried searching online for a fix but nothing worked so far.
How do I fix this?
解决方案
I think you have an error defining your controllers.
Instead of this:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
// controller content
});
try this instead:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', ['$scope', function ($scope) {
// controller content
}]);
See documentation: https://docs.angularjs.org/guide/controller
这篇关于Angular js 1.4.8注入模块错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
