如何使用angular js和login修复前端注册

我正在开发angularjs web应用程序。我需要路由方面的帮助。如果注册成功，我将尝试导航到index.html（login.html）。有很多关于它的例子，但我无法让它们与我的web应用程序一起工作。我试过了，但仍然有效。
我有2个html页面；index.html和login.html。还有2个单独的控制器文件；config.js和login.js
bellow my config.js

.run( function ($rootScope,$state, $location, $cookies, $http) {
    $rootScope.version = 20200530;  
    $rootScope.globals = $cookies.getObject('globals') || {};
        if ($rootScope.globals.currentUser) {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata;
        }

        $rootScope.$on('$locationChangeStart', function (event, next, current) {
            // redirect to login page if not logged in and trying to access a restricted page
            var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
            var loggedIn = $rootScope.globals.currentUser;
            if (restrictedPage && !loggedIn) {
                $location.path('/login');
            }
        });

}) 

.config(function ($stateProvider,$urlRouterProvider, $locationProvider,$httpProvider,$compileProvider){          

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("/");

    $stateProvider

        .state('home', {
            url: '/',
            templateUrl: 'views/home.html'
        })  
        .state('announcement', {
            url: '/',
            templateUrl: 'views/announcement.html'
        })  
        .state('health_tips', {
            url: '/',
            templateUrl: 'views/health_tips.html'
        })     

        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html'
        })  

        .state('register', {
            url: '/register',
            templateUrl: 'views/register.html'
        }) 
    }
)

我的login.js

contactTracing

.controller('LoginController',['$location', 'AuthenticationService','FlashService',
function($location, AuthenticationService, FlashService){
    var vm = this;

    vm.login = login;

    (function initController() {
        // reset login status
        AuthenticationService.ClearCredentials();
    })();

    function login() {
        vm.dataLoading = true;
        AuthenticationService.Login(vm.username, vm.password, function (response) {
            console.log(response == response.data)
            if (response.success == true) {
                FlashService.Success('login successful', true);  
                $location.path('/',false);
            } else {
                FlashService.Error(response.message);
                vm.dataLoading = false;
                alert(response == false)

            }
        });
    };

}])
index.html

<!DOCTYPE html>
    <html data-ng-app="contactTracing" data-ng-controller="contactTracingCtrl as mactrl">
    <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Tracing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<base href="/">
<link rel="stylesheet" href="css/style.css" />
      </head>
      <body>
<data ui-view></data>
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="vendors/bower_components/angular/angular.min.js"></script> 
<script src="vendors/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="vendors/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="vendors/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script src="https://code.angularjs.org/1.6.0/angular-cookies.min.js"></script>

<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/app-services/authentication.service.js"></script>
<script src="js/app-services/flash.service.js"></script>

 <script src="js/app-services/user.service.js"></script>

<script src="js/controller/user_information.js"></script>
<script src="js/controller/health_tips.js"></script>
<script src="js/controller/announcement.js"></script>
<script src="js/controller/main.js"></script>
<script src="js/controller/home.js"></script>
<script src="js/controller/login.js"></script>
<script src="js/controller/register.js"></script>
</body>
</html>

<div class="col-md-6 col-md-offset-3">
   <h2>Login</h2>
    <form name="form" ng-submit="vm.login()" role="form">
    <div class="form-group" ng-class="{ 'has-error': 
    form.username.$dirty && form.username.$error.required }">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" class="form- 
     control" ng-model="vm.username" required />
        <span ng-show="form.username.$dirty && 
    form.username.$error.required" class="help-block">Username is 
    required</span>
    </div>
    <div class="form-group" ng-class="{ 'has-error': 
     form.password.$dirty && form.password.$error.required }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" 
        class="form-control" ng-model="vm.password" required />
        <span ng-show="form.password.$dirty && 
        form.password.$error.required" class="help-block">Password is 
        required</span>
        </div>
        <div class="form-actions">
        <button type="submit" ng-disabled="form.$invalid || 
        vm.dataLoading" class="btn btn-primary">Login</button>

        <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
        <a href="/register" class="btn btn-link">Register</a>
    </div>
</form>

如何使用angular js和login修复前端注册

暂无答案！

相关问题

热门标签

最新问答