javascript - AngularJS - 登录成功后在页面之间导航(使用不同的 html 页面和 Controller )

标签 javascript angularjs

Helo,我正在开发 AngularJS 应用程序。我需要路由方面的帮助。我正在尝试导航到index.html 如果登录成功(login.html)。有很多关于它的例子,但我无法让它们工作 与我的申请。最近,我尝试了this ,但仍然没有运气。

我有 2 个 html 页面; index.html 和 login.html。还有 2 个独立的 Controller 文件; 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(用于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”放在哪里?在controllerjs或logincontrollerjs或单独的文件中。 如果在单独的文件中,我应该更改 html 文件等中的 data-ng-app 吗?提前致谢!

最佳答案

这里的主要问题是您的模块连接。

声明 angular.module('myLogin', []) 时,您告诉 Angular 为您提供一个没有依赖项的新模块。 当您声明angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])时,您告诉 Angular 创建一个具有一些依赖项的新模块,但不提供“myLogin”模块。 所以现在你有两个彼此不了解的模块。

我建议您使用一个模块并重复使用它。重复使用'myApp'对于两者,只需引用同一个实例,如 angular.module('myApp') ,(如果您不将数组传递给模块,它将获取一个模块而不是创建一个新的)

然后,解决您的重定向问题。查看您发布的链接。您缺少ngRoute对模块的依赖。注入(inject)后,您可以使用 $location服务和执行$location.path("home");在登录成功回调中。

关于javascript - AngularJS - 登录成功后在页面之间导航(使用不同的 html 页面和 Controller ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53258083/

相关文章:

javascript - AWS Cognito 与 Angular 4 : Error: Missing region in config

javascript - Google 协作平台 HTML Iframe(不是小工具)

javascript - 调用传入 Angular 指令的函数返回该函数而不是调用它

javascript - 重构 require.config.js 文件...?

javascript - Angular JS - 如何验证数字输入中的位数

javascript - 尝试避免将重复项插入数组 Angular

javascript - 在 css/js/jquery/html 中应用玫瑰色或更改整个文档的亮度?

javascript - 如何使用nodejs http修复 "'监听器参数必须是一个函数

javascript - Angularjs:单选按钮选择更改时更新模型

javascript - 正则表达式匹配 url 但不匹配超链接中的 url