showing next tab bootstrap angular js

Question

i have a problem,if i click report tab or another tab. it will be back to login page. i want that if i click another tab, it's not go back to login page. is there any solution? this is my plunk

https://plnkr.co/edit/snDNgPEToZsIbXaHSWib?p=preview

here is my js file, thank you and sorry for bad english

var app = angular.module('coba', ['ngRoute']);

app.filter('coba', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});
app.filter('report', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});

app.config(['$routeProvider',
  function($routeProvider) { 
        $routeProvider.when('/', {
          templateUrl: 'login.html',
          controller: 'logincont'
        })
        .when('/main', {
          templateUrl: 'mainmenu2.html'
        })
        .otherwise({redirectTo: '/'});
}]);

app.run(function($rootScope,$route,$location){
       var unauthRoutes= [];
       console.log(unauthRoutes);
    angular.forEach($route.routes, function(route, path) {
        // push route onto unauthRoutes if it has a truthy allowUnauth value
        route.allowUnauth && (unauthRoutes.push(path));
    });

    $rootScope.$on('$routeChangeStart', function(event, nextLoc, currentLoc) 
    {
        var atuhRoute= (-1 === unauthRoutes.indexOf($location.path()));

        if(atuhRoute && !$rootScope.loggedIn) {
            $location.path('/');
        }
    });
})

app.controller("logincont", ['$scope','$http','$window','$location','$rootScope',function($scope,$http,$window,$location,$rootScope){
$scope.login = function () {
      if ($scope.userid == 'rock' && $scope.pass == 'rock')
        {
          alert('Login Incorrect'); 
        }
        else
        {
          $rootScope.loggedIn = true;
          $location.path('/main');
          console.log('success');
        }
      };  

      }]);

app.controller("moncont", ['$scope','$http','$filter','$window','$location',function($scope,$http,$filter,$window,$location){
  $scope.logout = function(){
    $location.path('/logout');
  }
      }]);

app.controller("repcont", ['$scope','$http',function($scope,$http){
  $scope.logout = function(){
    $location.path('/logout');
      };

      }]);

gitfudge · Accepted Answer · 2017-11-30 11:28:35Z

2

Here's the working code - https://plnkr.co/edit/lYvMFO96IxpwfizjrUjy?p=preview

You should add code in script to handle routing to every route you have in your application. Example, if you wanna visit /report you should have the following -

.when('/main', {
  templateUrl: 'mainmenu2.html'
})

Similarly, update your links from href="#report" to href="#!report"

Hope this helps.

answered Nov 30, 2017 at 11:28

gitfudge

5304 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Twisted reality Over a year ago

i've try, but if i click again to monitor again. it will be return to login page, thanks for helping

Aleksey Solovey · Accepted Answer · 2017-11-30 11:24:02Z

You have your links pointing to non-existing pages so they are calling $routeProvider.otherwise({redirectTo: '/'});, which re-directs you back to the login screen because of when('/', { templateUrl: 'login.html', ...

Your links also need a proper hash-bang:

<li><a data-toggle="tab" href="#!/home">Log Out</a></li>

Updated from #home to #!/home

Now they can point to the right pages, as long those exist, so you need to modify your config:

app.config(['$routeProvider',
  function($routeProvider) { 
     $routeProvider.when('/', {
        templateUrl: 'login.html',
        controller: 'logincont'
     })
     .when('/main', {
        templateUrl: 'mainmenu2.html'
      })
     .when('/menu1', {
        templateUrl: 'menu1.html'
      })
     .when('/home', {
        templateUrl: 'home.html'
      })
     .when('/report', {
        templateUrl: 'report.html'
      })
      .otherwise({redirectTo: '/'});
}]);

Sravan · Accepted Answer · 2017-11-30 11:25:14Z

0

First Thing is, in your code, in the routes file, you donot have all the routse mentioned in your pluker

There is one route for main

.when('/main', {
          templateUrl: 'mainmenu2.html'
  })

Change, #main to #!main to make it work.

<ul class="nav nav-tabs navbar-ke-kanan" >
    <li><a data-toggle="tab" href="#!login">Log Out</a></li>
    <li><a data-toggle="tab" href="#!main">Menu 2</a></li>
    <li><a data-toggle="tab" href="#!main">Report</a></li>
    <li class="active"><a data-toggle="tab" href="#!main">Monitoring</a></li>
  </ul>

Here is AN UPDATED PLUNKER

answered Nov 30, 2017 at 11:25

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

showing next tab bootstrap angular js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related