Javascript AngularJS-登录成功时页面之间的导航（使用不同的html页面和控制器）
Helo，我正在开发AngularJS应用程序。我需要路由方面的帮助。我正在尝试导航到index.html 如果登录成功（login.html）。这方面有很多例子，但我无法让它们发挥作用 我的申请书。最近，我试过了，但还是没有成功 我有2个html页面；index.html和login.html。还有2个单独的控制器文件；controller.js和logincontroller.js 在mylogincontroller.js下方Javascript AngularJS-登录成功时页面之间的导航（使用不同的html页面和控制器）,javascript,angularjs,Javascript,Angularjs,Helo，我正在开发AngularJS应用程序。我需要路由方面的帮助。我正在尝试导航到index.html 如果登录成功（login.html）。这方面有很多例子，但我无法让它们发挥作用 我的申请书。最近，我试过了，但还是没有成功 我有2个html页面；index.html和login.html。还有2个单独的控制器文件；controller.js和logincontroller.js 在mylogincontroller.js下方 var myLogin = angular.module('m
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!");
});
}
});
<!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"> ...
...
...
<!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">
...
如果在单独的文件中，我是否应该更改html文件中的数据ng应用程序等。提前感谢 这里的主要问题是您的模块未连接 当声明
angular.module（'myLogin'，[]）angular.module（'myApp'，['ui.bootstrap.datetimepicker'，'ngclipboard'，'hljs']）angular.module（'myApp'）'myApp''myApp'然后，解决重定向问题。看看你贴的链接。您缺少对模块的
ngRoute$location$location.path（“home”）。以下是示例代码，说明如何链接模块和控制器
app.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!");
});
}
});
这是主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;
};
}]);
})();
<!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>
这里是主html文件
(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;
};
}]);
})();
<!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>
“最近，我尝试了这个，但仍然没有成功。”-JS-bin中的代码正常工作，那么问题出在哪里？是的，它正常工作。例如，由于每个页面都有两个不同的js文件，我应该将路由相关代码（.config（function（$routeProvider）{}…）放在哪里呢？或者我应该创建单独的文件？这是我的问题之一。谢谢！我是Angular的新手。我对是否有两个不同的模块有疑问，现在我明白了。因此，也许我只能使用一个js文件？一个模块和两个控制器，对吗？@csel是的，我认为你应该在开始时尽可能简单。保留我在一个文件中，使所有内容都正常工作，然后，如果您愿意，将其重构为不同的文件。第一步是复制您提供的链接并使其在本地工作，然后一步一步地进行，使其更高级：）