Question

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

我有2个html页面； index.html和login.html。还为他们提供2个单独的控制器文件； 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吗？预先感谢！

Answer 1

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

在声明angular.module('myLogin', [])时，您是在告诉angular给您一个没有依赖性的新模块。然后，声明angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])时，您告诉angular创建一个具有某些依赖项的新模块，但不提供'myLogin'模块。因此，现在您有了两个彼此不认识的模块。

我建议您使用一个模块，然后重新使用它。只需引用'myApp'之类的同一个实例，即可将angular.module('myApp')重用（{em>如果您不将数组传递给模块，它将获取一个模块而不是创建一个新的< / em>）

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

Answer 2

这是示例代码，如何链接模块和控制器。

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>

AngularJS-如果登录成功（使用不同的html页面和控制器），则在页面之间导航

2 个答案: