angularjs new router not working on first time of page load

Question

I'm a newbie in angularjs world & working on a angular js app with angularjs version 1.4 with the new router.

Till now all are working fine with 1 small issue. That is, When i go to any particular link it's not working. But, just after that if i refresh the page or click on ENTER key once again on that link it's start working.

Ex: I've following 2 links in my page.

When I go to first link http://localhost/angular/#/ it's don't work & got following error in console but if i click again on the link or refresh that link console error cleared out & it's start working. Same happen for 2nd link also.

Chrome Console error - enter image description here

Following are files code -

index.html

<html lang="en" ng-app="TeamTalk">
    <head>
        <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
        <meta name="viewport" content="initial-scale=1" />

        <link rel="stylesheet" type="text/css" href="assets/css/style.css">        
    </head>

    <body layout="column" ng-controller="AppCtrl">    

        <div ng-if="location.path() == '/home'">        
            <md-toolbar layout="row">
                <div class="md-toolbar-tools">
                    <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                        <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                    </md-button>

                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>
                </div>
            </md-toolbar>
        </div>

        <div ng-if="location.path() == '/home'" layout="row" flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
                <div ng-outlet="sidebar">
                </div>  
            </md-sidenav>

            <div layout="column" flex id="content">
                <md-content layout="column" flex class="md-padding">
                    <div ng-outlet="main">
                    </div>
                </md-content>
            </div>
        </div>


        <div ng-if="location.path() == '/'" style="background:#3F51B5" ng-outlet="landing" id="landing">
        </div>


        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script src="bower_components/angular-aria/angular-aria.min.js"></script>

        <script src="bower_components/angular-material/angular-material.min.js"></script>
        <script type="text/javascript" src="assets/js/router.es5.js"></script>
        <script type="text/javascript" src="assets/js/app.js"></script>
    </body>
</html>

app.js

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', function($scope, $mdSidenav, $router, $location){
    $scope.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    $scope.location = $location;

    // Configure router, pass array of mappings
    $router.config([
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ]);


    var locPath = false;

    locPath = $location.path();
    console.log('Current route name: ' + locPath);  

}]);


app.controller('NavigationController', function(){

});

app.controller('SidebarController', function(){

});

app.controller('MainController', function(){

});

app.controller('LandingController', function(){

});

Any clue why it's behaving like this ?

What do you mean by "it's not working"? Do you get an error? — dotnetom, Jun 23 '15 at 07:38
@Tom Why you are feeling keeping javascript in bottom creating this issue ? Any way, i tried that also it's & it's not working. — Suresh, Jun 23 '15 at 07:53
@mi6crazyheart Well I just said the most obvious thing that I saw on the page. I didnt really think much about the question nor read the code. If you make a fiddle, it will be much easier to help you — Tomas, Jun 23 '15 at 07:58

Raulucco · Answer 1 · 2015-06-23T13:16:43.253

Bind the config to the controller as a property(example):

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', AppCtrl]);


function AppCtrl ($scope, $mdSidenav, $router, $location){
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };

        $scope.location = $location;

        // Configure router, pass array of mappings



        var locPath = false;

        locPath = $location.path();
        console.log('Current route name: ' + locPath);  

    }
AppCtrl.$routeConfig = [
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ];

    <link rel="stylesheet" type="text/css" href="assets/css/style.css">        
</head>

<body layout="column" ng-controller="AppCtrl">    
    <div ng-viewport></div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>

    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="assets/js/router.es5.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="components-path/main/main.js"></script>
<script type="text/javascript" src="components-path/navigation/navigation.js"></script>
<script type="text/javascript" src="components-path/sidebar/sidebar.js"></script>
<script type="text/javascript" src="components-path/landing/landing.js"></script>
</body>

// components-path/landing/landing.js
app.controller('LandingController', function(){

});

// components-path/landing/landing.html
        <div style="background:#3F51B5" ng-outlet="landing" id="landing">


// components-path/navigation/navigation.js
app.controller('NavigationController', function(){

});
// components-path/navigation/navigation.html
                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>


// components-path/sidebar/sidebar.js
app.controller('SidebarController', function(){

});
// components-path/sidebar/sidebar.html
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <div ng-outlet="sidebar">
            </div>  
        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div ng-outlet="main">
                </div>
            </md-content>
        </div>
    </div>



// components-path/main/main.js
app.controller('MainController', function(){

});
// components-path/main/main.html
 <div>        
                <md-toolbar layout="row">
                    <div class="md-toolbar-tools">
                        <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                            <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                        </md-button>
                </div>
            </md-toolbar>
        </div>

After using above code now I'm getting following error - Error: [$injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route%20%3C-%20AppCtrl at Error (native) — Suresh, Jun 23 '15 at 08:54
yep, instead of `$route` is `$router`. Anyway I am not very sure if it is require to past it into the controller if you are not going to use it. I updated the code — Raulucco, Jun 23 '15 at 08:58
above error cleared out but again it's behaving the same way as earlier code was behaving. After page get load i need to click on browser's refresh button or click on ENTER button to get 'route name' which I'm printing through console.log(). This is i'm using to check, whether i'm getting proper route value in each link or not. Also with that, now my COMPONENTS are also not loading inside ng-outlet. — Suresh, Jun 23 '15 at 09:14

angularjs new router not working on first time of page load

1 Answers1