How to debug angular routes?

Question

I'm trying to build a simple app.

My index.html file

<!DOCTYPE html>
<html>
    <head>
        <script src="/bower_components/angular/angular.js"></script>
        <script src="/bower_components/angular-route/angular-route.js"></script>
        <script src="/js/main.js"></script>
        <script src="/js/controllers/account.js"></script>
    </head>
    <body ng-app="elara">
    wuuuu
    <div ng-view></div>

    </body>
</html>

main.js file

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

app.config(['$routeProvider',
    function($routeProvider) {
        debugger;
        $routeProvider.
            when('/', {
                templateUrl: '/html/template/home-page.html',
                controller: 'accountController'
            }).
            otherwise({
                redirectTo: '/phones'
            });
    }]);

and my controller:

var app = angular.module('elara', []);
app.controller('accountController', ['$scope', '$http', function(){
    $scope.username = "";
    $scope.password = "";

    $scope.register = function(){
        $http.post(config.apiAddress + "account/login/", {username: $scope.username, password: $scope.password}).then(
            function(data){
                console.log(data);
            }, function(response){
                console.log(response);
            });
    };
}]);

please noitice the debugger in main.js file, but degugger is not stoping at that point. It's not looking like executing what's inside my app.config function. And when navigate to / route, my home-page.html is not loaded into ng-view

Btw, you forgot the arguments `$scope` and `$http` to the controller. — Michel, Sep 27 '15 at 18:44

score 0 · Answer 1 · answered Sep 27 '15 at 18:24

0

You can use $routeChangeError event which will provide a rejection object among other arguments.

app.run(function ($rootScope) {
    $rootScope.$on('$routeChangeError', function (evt, current, previous, rejection) {
        console.log('Route error', rejection);
    });    
});

Reference: $route docs

answered Sep 27 '15 at 18:24

charlietfl

170,828
13
121
150

added this code block to bottom of the main.js file but nothing logged to console :) – Sefa Sep 27 '15 at 18:34
ok seems I misinterpreted it. I never use `ngRoute` always use `ui-router` and it's equivalent error method does fire this way. Seems in `ngRoute` is only for resolves – charlietfl Sep 27 '15 at 18:44

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

You can listen to multiple events emitted by the $route service. These events are:

$routeChangeStart
$routeChangeSuccess
$routeChangeError
$routeUpdate

You can find more info in this thread - https://stackoverflow.com/a/28016993/698127

edited May 23 '17 at 11:46

Community

1
1

answered May 02 '17 at 04:04

Aamol

1,149
1
15
23

How to debug angular routes?

2 Answers2