我已使用 bower install ng-dialog 在我的项目中安装了ngDialog模块。我可以通过检查我的bower.json文件来验证是否已安装。
{
"name": "larissaApp",
"description": "Municipality of Larissa",
"main": "index.html",
"keywords": [
"larissa",
"Greece",
"History"
],
"authors": [
"Theo Tziomakas"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"ng-dialog": "^1.3.0"
}
}
但是，当我运行我的项目时，我收到此错误
Unknown provider: ngDialogProvider <- ngDialog <- HeaderController
我不明白，因为我在index.html文件中包含了所有文件。
<!DOCTYPE html>
<html lang="en" ng-app="larissaApp">
<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 -->
<title>Municipality of Larissa</title>
<!-- 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="bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="bower_components/ng-dialog/css/ngDialog-theme-default.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/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"
></script>
<script src="bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
为什么会这样？所有ng文件都在我的bower_components文件夹中。
我的控制器如下所示。
'use strict';
angular.module('larissaApp')
.controller('HeaderController', ['$scope', '$state', '$rootScope', 'ngDialog', 'AuthFactory', function ($scope, $state, $rootScope, ngDialog, AuthFactory) {
$scope.loggedIn = false;
$scope.username = '';
if(AuthFactory.isAuthenticated()) {
$scope.loggedIn = true;
$scope.username = AuthFactory.getUsername();
}
$scope.openLogin = function () {
ngDialog.open({ template: 'views/login.html', scope: $scope, className: 'ngdialog-theme-default', controller:"LoginController" });
};
$scope.logOut = function() {
AuthFactory.logout();
$scope.loggedIn = false;
$scope.username = '';
};
$rootScope.$on('login:Successful', function () {
$scope.loggedIn = AuthFactory.isAuthenticated();
$scope.username = AuthFactory.getUsername();
});
$rootScope.$on('registration:Successful', function () {
$scope.loggedIn = AuthFactory.isAuthenticated();
$scope.username = AuthFactory.getUsername();
});
$scope.stateis = function(curstate) {
return $state.is(curstate);
};
}])
.controller('LoginController', ['$scope', 'ngDialog', '$localStorage', 'AuthFactory', function ($scope, ngDialog, $localStorage, AuthFactory) {
$scope.loginData = $localStorage.getObject('userinfo','{}');
$scope.doLogin = function() {
if($scope.rememberMe)
$localStorage.storeObject('userinfo',$scope.loginData);
AuthFactory.login($scope.loginData);
ngDialog.close();
};
$scope.openRegister = function () {
ngDialog.open({ template: 'views/register.html', scope: $scope, className: 'ngdialog-theme-default', controller:"RegisterController" });
};
}])
.controller('RegisterController', ['$scope', 'ngDialog', '$localStorage', 'AuthFactory', function ($scope, ngDialog, $localStorage, AuthFactory) {
$scope.register={};
$scope.loginData={};
$scope.doRegister = function() {
console.log('Doing registration', $scope.registration);
AuthFactory.register($scope.registration);
ngDialog.close();
};
}])
;
和我的services.js
'use strict';
angular.module('larissaApp')
.constant('baseURL', 'http://localhost:3000/')
.factory('AuthFactory', ['$resource', '$http', '$localStorage', '$rootScope', '$window', 'baseURL', 'ngDialog', function($resource, $http, $localStorage, $rootScope, $window, baseURL, ngDialog){
var authFac = {};
var TOKEN_KEY = 'Token';
var isAuthenticated = false;
var username = '';
var authToken = undefined;
function loadUserCredentials() {
var credentials = $localStorage.getObject(TOKEN_KEY,'{}');
if (credentials.username != undefined) {
useCredentials(credentials);
}
}
function storeUserCredentials(credentials) {
$localStorage.storeObject(TOKEN_KEY, credentials);
useCredentials(credentials);
}
function useCredentials(credentials) {
isAuthenticated = true;
username = credentials.username;
authToken = credentials.token;
// Set the token as header for your requests!
$http.defaults.headers.common['x-access-token'] = authToken;
}
function destroyUserCredentials() {
authToken = undefined;
username = '';
isAuthenticated = false;
$http.defaults.headers.common['x-access-token'] = authToken;
$localStorage.remove(TOKEN_KEY);
}
authFac.login = function(loginData) {
$resource(baseURL + "users/login")
.save(loginData,
function(response) {
storeUserCredentials({username:loginData.username, token: response.token});
$rootScope.$broadcast('login:Successful');
},
function(response){
isAuthenticated = false;
var message = '\
<div class="ngdialog-message">\
<div><h3>Login Unsuccessful</h3></div>' +
'<div><p>' + response.data.err.message + '</p><p>' +
response.data.err.name + '</p></div>' +
'<div class="ngdialog-buttons">\
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click=confirm("OK")>OK</button>\
</div>'
ngDialog.openConfirm({ template: message, plain: 'true'});
}
);
};
authFac.logout = function() {
$resource(baseURL + "users/logout").get(function(response){
});
destroyUserCredentials();
};
authFac.register = function(registerData) {
$resource(baseURL + "users/register")
.save(registerData,
function(response) {
authFac.login({username:registerData.username, password:registerData.password});
if (registerData.rememberMe) {
$localStorage.storeObject('userinfo',
{username:registerData.username, password:registerData.password});
}
$rootScope.$broadcast('registration:Successful');
},
function(response){
var message = '\
<div class="ngdialog-message">\
<div><h3>Registration Unsuccessful</h3></div>' +
'<div><p>' + response.data.err.message +
'</p><p>' + response.data.err.name + '</p></div>';
ngDialog.openConfirm({ template: message, plain: 'true'});
}
);
};
authFac.isAuthenticated = function() {
return isAuthenticated;
};
authFac.getUsername = function() {
return username;
};
loadUserCredentials();
return authFac;
}]);
这是我的app.js.我添加了ng-dialog模块。
'use strict';
angular.module('larissaApp', ['ui.router','ngResource','ngDialog'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html',
controller : 'HeaderController'
},
'content': {
templateUrl : 'views/home.html',
controller : 'HomeController'
},
'footer': {
templateUrl : 'views/footer.html',
}
}
})
// route for the contactus page
.state('app.city', {
url:'city',
views: {
'content@': {
templateUrl : 'views/city.html',
controller : 'CityController'
}
}
})
.state('app.administration', {
url:'administration',
views: {
'content@': {
templateUrl : 'views/administration.html',
controller : 'ΑdministrationController'
}
}
})
// route for the contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content@': {
templateUrl : 'views/contactus.html',
controller : 'ContactController'
}
}
})
// route for the contactus page
.state('app.alcazar-park', {
url:'alcazar-park',
views: {
'content@': {
templateUrl : 'views/alcazar-park.html',
controller : 'ΑlcazarParκController'
}
}
})
.state('app.first_ancient_theatre', {
url:'first_ancient_theatre',
views: {
'content@': {
templateUrl : 'views/first_ancient_theatre.html',
controller : 'FirstAncientTheatreController'
}
}
})
.state('app.second_ancient_theatre', {
url:'second_ancient_theatre',
views: {
'content@': {
templateUrl : 'views/second_ancient_theatre.html',
controller : 'SecondAncientTheatreController'
}
}
})
.state('app.bezesteni', {
url:'bezesteni',
views: {
'content@': {
templateUrl : 'views/bezesteni.html',
controller : 'BezesteniController'
}
}
})
.state('app.basilica', {
url:'basilica',
views: {
'content@': {
templateUrl : 'views/basilica.html',
controller : 'BasilicaController'
}
}
})
.state('app.mill_of_pappas', {
url:'mill_of_pappas',
views: {
'content@': {
templateUrl : 'views/mill_of_pappas.html',
controller : 'MillController'
}
}
})
.state('app.church', {
url:'church',
views: {
'content@': {
templateUrl : 'views/church.html',
controller : 'ChurchController'
}
}
})
// route for the newsdetails page
.state('app.newsdetails', {
url: 'newsdetails/:id',
views: {
'content@': {
templateUrl : 'views/newsdetails.html',
controller : 'NewsDetailsController'
}
}
});;
$urlRouterProvider.otherwise('/');
})
;
但现在我收到了这个错误。
Failed to instantiate module larissaApp due to:
Error: [$injector:modulerr]
http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=n...)
at
http://127.0.0.1:56710/larissaApp/public/bower_components/angular
/angular.min.js:6:425
at http://127.0.0.1:56710/larissaApp/public/bower_components/angular
/angular.min.js:42:407
谢谢，
西奥。