AngularJS -如果登录成功，页面之间的导航(使用不同的html页面和控制器)
Helo，我正在开发一个AngularJS应用程序。我需要路由方面的帮助。如果登录成功，我将尝试导航到index.html (login.html)。有很多关于它的例子，但我无法让它们在我的应用程序中工作。最近，我尝试了这，但仍然没有运气。
我有两个html页面；index.html和login.html。另外还有两个独立的控制器文件: controller.js和logincontroller.js。
低于我的logincontroller.js
var myLogin = angular.module('myLogin', [])
myLogin.controller('MyLoginController', function($scope, $http)
{
$scope.Login = function(){
$http(
{...
})
.then(
function successCallback(response) {
$scope.loginresponse = response.data;
if($scope.loginresponse=="OK"){
// here go to index page
}
},
function errorCallback(response) {
alert("Failed to login!");
});
}
});我的controller.js(for index.html)
var myApp = angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])
myApp.controller("MyController", function TimeCtrl($scope, $timeout, $filter, $http, $window) {
});以防万一：login.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myLogin">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/logincontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyLoginController"> ...index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyController">我对很多事情感到困惑，其中之一就是我应该把"config“放在哪里？在控制器in或logincontrollerjs中或在单独的文件中。如果在单独的文件中，我应该更改html文件中的数据ng-app等等。谢谢！
回答 2
Stack Overflow用户
发布于 2018-11-12 08:43:42
这里的主要问题是您的模块是而不是连接的。
在声明angular.module('myLogin', [])时，您要告诉angular给您一个没有依赖项的新模块。然后，当您声明angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])时，您告诉angular创建一个新模块，其中包含一些依赖项，但不要提供'myLogin‘模块。现在你有了两个模块，它们彼此不知道。
我建议您使用一个模块并重新使用它。两种方法都重用'myApp'，只需引用相同的实例(如果不将数组传递给模块，它将获取一个模块而不是创建一个新的)。
然后，解决你的重定向问题。看看你发布的链接。您缺少了模块的ngRoute依赖项。注入后，您可以在登录成功回调中使用$location服务并执行$location.path("home");。
Stack Overflow用户
发布于 2018-11-12 08:56:57
这里是示例代码，如何链接模块和控制器。
app.js
它是主app.js文件。您需要在这里配置和收集所有所需的信息。
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();这里是登录控制器文件在这个控制器文件中，有服务是包含apiService的。
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();这里是服务文件以及模块文件
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();这里是主html文件
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>https://stackoverflow.com/questions/53258083
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号