Trigger AngularJS routing from javascript

Question

I'm trying to write a simple app that incorporates authentication.

var chatApp = angular.module('chat-app', ['ngRoute']);

chatApp.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/chat', {
          templateUrl : 'static/html/partial/chat.html',
          controller: 'chatCtrl'
        });
    }
]);

window.onload = function() {
  checkAuth();
};

function checkAuth() {
  var userId = localStorage.getItem('chat-id');
  var userProfile = localStorage.getItem('chat-profile');

  if(!userId) {
    // Show login dialog and handle authentication
    // This is done for me by an external service (auth0)
    userId, userProfile = authenticate();  // Abstracting away for simplicity
    localStorage.setItem('chat-id', userId);
    localStorage.setItem('chat-profile', JSON.stringify(userProfile));
  }
  else {
    userProfile = JSON.parse(userProfile);
  }
  angular.element($('html')).scope().nickname = userProfile.nickname;
  // Now redirect to /chat
  window.location.href = '#/chat';
}

When I run the above code, I can see that authentication is happening correctly and it executes window.location.href = '#/chat';. However, this does not trigger Angular's routing rules and therefore, it does not load the template that I have defined.

I think once I get hold of the Angular $location object, I can set the URL and hope Angular does the rest. What is the right way to trigger Angular routing from plain javascript?

Community · Accepted Answer · 2017-05-23 11:45:07Z

3

var e = document.getElementById('chat-app');
var $injector = angular.element(e).injector();

var $location = $injector.get('$location');
$location.path("/chat");

Credit @joakimbl angularjs redirect from outside angular

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 24, 2016 at 12:04

Rogerio Soares

1,61316 silver badges14 bronze badges

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

1 Comment

Guru Prasad Over a year ago

redirect. That's the keyword I should've been looking for!

VictR · Accepted Answer · 2016-03-24 12:10:07Z

0

I tried this and its working. I hope this resolves your issue.

<HTML>
    <HEAD>
        <script language="javascript">
            function GotoPage(){
                alert('I am in');
                document.location.href = 'index.html#/login';
            }
        </script>
    </HEAD>
    <BODY>
        <input type="button" value="Route" onclick="javascript:GotoPage()">Go To Angular Page</input>
    </BODY>
</HTML>

Check the URL of Angular application

answered Mar 24, 2016 at 12:10

VictR

111 bronze badge

Collectives™ on Stack Overflow

Trigger AngularJS routing from javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related