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 -
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 ?
Bind the config to the controller as a property(example):