我对 Angular 很陌生，正在尝试找出 Flask Angular 应用程序的身份验证。我认为这个问题与我没有明确定义 services.js 依赖项有关。
我收到AngularJS 错误。您可以看到有关此问题的更多信息。
现在我看到了Error: ng:areq Bad Argument Argument 'loginController' is not a。services.js、app.js、controllers.js 和directives.js 的交互方式有问题。但我无法弄清楚问题是什么。我相信这与config.py. 我认为这与控制器的定义方式有关：
.state('login', {
url: "/login",
templateUrl: "static/views/login.html",
controller: "loginController",
data: { pageTitle: 'Login'},
})
我使用的模板也使用了 ocLazyLoad。我认为类似的问题发生了 https://github.com/ocombe/ocLazyLoad/issues/182。也许这将有助于提供一些见解。
这是我的应用程序结构：
这是我的 services.js 文件：
angular.module('inspinia').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,
login: login,
logout: logout,
register: register
getUserStatus: getUserStatus
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
function login(email, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/api/login', {email: email, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.result){
user = true;
deferred.resolve();
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/api/logout')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function register(email, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.post('/api/register', {email: email, password: password})
// handle success
.success(function (data, status) {
if(status === 200 && data.result){
deferred.resolve();
} else {
deferred.reject();
}
})
// handle error
.error(function (data) {
deferred.reject();
});
// return promise object
return deferred.promise;
}
function getUserStatus() {
return $http.get('/api/status')
// handle success
.success(function (data) {
if(data.status){
user = true;
} else {
user = false;
}
})
// handle error
.error(function (data) {
user = false;
});
}
}]);
这里是 app.js：
(function () {
angular.module('inspinia', [
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap' // Ui Bootstrap
])
})();
配置.js
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
$urlRouterProvider.otherwise("/login");
$ocLazyLoadProvider.config({
// Set to true if you want to see what and when is dynamically loaded
debug: true
});
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "static/views/common/content.html",
})
.state('index.main', {
url: "/main",
templateUrl: "static/views/main.html",
data: { pageTitle: 'Example view' },
})
.state('index.minor', {
url: "/minor",
templateUrl: "static/views/minor.html",
data: { pageTitle: 'Example view' },
})
.state('login', {
url: "/login",
templateUrl: "static/views/login.html",
controller: 'loginController',
data: { pageTitle: 'Login'},
})
}
angular
.module('inspinia')
.config(config)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
控制器.py
angular.module('inspinia').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.email, $scope.loginForm.password)
// handle success
.then(function () {
$location.path('/index/main');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
指令.js：
function pageTitle($rootScope, $timeout) {
return {
link: function(scope, element) {
var listener = function(event, toState, toParams, fromState, fromParams) {
// Default title - load on Dashboard 1
var title = 'Transparencities';
// Create your own title pattern
if (toState.data && toState.data.pageTitle) title = 'Transparencities | ' + toState.data.pageTitle;
$timeout(function() {
element.text(title);
});
};
$rootScope.$on('$stateChangeStart', listener);
}
}
}
/**
* sideNavigation - Directive for run metsiMenu on sidebar navigation
*/
function sideNavigation($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
// Call the metsiMenu plugin and plug it to sidebar navigation
$timeout(function(){
element.metisMenu();
});
}
};
}
/**
* iboxTools - Directive for iBox tools elements in right corner of ibox
*/
function iboxTools($timeout) {
return {
restrict: 'A',
scope: true,
templateUrl: 'views/common/ibox_tools.html',
controller: function ($scope, $element) {
// Function for collapse ibox
$scope.showhide = function () {
var ibox = $element.closest('div.ibox');
var icon = $element.find('i:first');
var content = ibox.find('div.ibox-content');
content.slideToggle(200);
// Toggle icon from up to down
icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
$timeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
},
// Function for close ibox
$scope.closebox = function () {
var ibox = $element.closest('div.ibox');
ibox.remove();
}
}
};
}
/**
* iboxTools with full screen - Directive for iBox tools elements in right corner of ibox with full screen option
*/
function iboxToolsFullScreen($timeout) {
return {
restrict: 'A',
scope: true,
templateUrl: 'views/common/ibox_tools_full_screen.html',
controller: function ($scope, $element) {
// Function for collapse ibox
$scope.showhide = function () {
var ibox = $element.closest('div.ibox');
var icon = $element.find('i:first');
var content = ibox.find('div.ibox-content');
content.slideToggle(200);
// Toggle icon from up to down
icon.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
$timeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
};
// Function for close ibox
$scope.closebox = function () {
var ibox = $element.closest('div.ibox');
ibox.remove();
};
// Function for full screen
$scope.fullscreen = function () {
var ibox = $element.closest('div.ibox');
var button = $element.find('i.fa-expand');
$('body').toggleClass('fullscreen-ibox-mode');
button.toggleClass('fa-expand').toggleClass('fa-compress');
ibox.toggleClass('fullscreen');
setTimeout(function() {
$(window).trigger('resize');
}, 100);
}
}
};
}
/**
* minimalizaSidebar - Directive for minimalize sidebar
*/
function minimalizaSidebar($timeout) {
return {
restrict: 'A',
template: '<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>',
controller: function ($scope, $element) {
$scope.minimalize = function () {
$("body").toggleClass("mini-navbar");
if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
// Hide menu in order to smoothly turn on when maximize menu
$('#side-menu').hide();
// For smoothly turn on menu
setTimeout(
function () {
$('#side-menu').fadeIn(400);
}, 200);
} else if ($('body').hasClass('fixed-sidebar')){
$('#side-menu').hide();
setTimeout(
function () {
$('#side-menu').fadeIn(400);
}, 100);
} else {
// Remove all inline style from jquery fadeIn function to reset menu state
$('#side-menu').removeAttr('style');
}
}
}
};
}
/**
*
* Pass all functions into module
*/
angular
.module('inspinia')
.directive('pageTitle', pageTitle)
.directive('sideNavigation', sideNavigation)
.directive('iboxTools', iboxTools)
.directive('minimalizaSidebar', minimalizaSidebar)
.directive('iboxToolsFullScreen', iboxToolsFullScreen);