AngularJS - переход между страницами, если вход выполнен успешно (с разными html-страницами и контроллерами) - PullRequest
Новая
       1

AngularJS - переход между страницами, если вход выполнен успешно (с разными html-страницами и контроллерами)

0 голосов
/ 12 ноября 2018

Привет, я работаю над приложением AngularJS. Мне нужна помощь с маршрутизацией. Я пытаюсь перейти к index.html Если вход выполнен успешно (login.html). Есть много примеров об этом, но я не мог заставить их работать с моим заявлением. Недавно я попробовал это , но все равно не повезло.

У меня есть 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!");
        });
    }
});

my 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">

Я запутался во многих вещах; один из них, это то, где я должен поставить «конфиг»? в controllerjs или logincontrollerjs или в отдельном файле. Если в отдельном файле я должен изменить data-ng-app в html-файлах и т. Д. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Вот пример кода, как связать модуль и контроллеры.

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>
0 голосов
/ 12 ноября 2018

Основная проблема заключается в том, что ваши модули не подключены.

Когда вы объявляете angular.module('myLogin', []), вы указываете угол, чтобы дать вам новый модуль, который не имеет зависимостей. Затем, когда вы объявляете angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), вы указываете angular создать новый модуль с некоторыми зависимостями, но не предоставляете модуль 'myLogin'. Итак, теперь у вас есть два модуля, которые не знают друг о друге.

Я рекомендую вам использовать один модуль и использовать его взамен. Повторно используйте 'myApp' для обоих, просто ссылаясь на один и тот же экземпляр, например angular.module('myApp'), (, если вы не передадите массив модулю, он получит модуль вместо создания нового )

Затем, чтобы решить вашу проблему перенаправления. Посмотрите на ссылку, которую вы разместили. Вам не хватает зависимости ngRoute от модуля. Когда это внедрено, вы можете использовать сервис $location и выполнить $location.path("home"); в обратном вызове при успешном входе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...