routing not working properly in AngularJS

Question

I am trying out routing in AngularJS.When i click on 'li' 2,i want to display contents of secondScreen.html.Following is my code.I dont know what is going wrong in it.Can anyone tell me what i am missing?

AngularJS file : app.js

var sampleApp = angular.module("sampleApp",['ngRoute','ngResource']);

sampleApp.config(function($routeProvider){

    $routeProvider.when('/',{
        templateUrl : '/templates/firstScreen.html', 
        controller : 'mainController'
    })
    .when('/secondScreen',{         
        templateUrl : '/templates/secondScreen.html', 
        controller : 'mainController'
    })
    .when('/thirdScreen',{          
        templateUrl : '/templates/thirdScreen.html', 
        controller : 'mainController'
    })
    .otherwise({redirectTo : '/'});
});

sampleApp.controller("mainController",["$scope","$log","$resource","$location",function($scope,$log,$resource,$location){

$scope.tabValue = 1;    
$scope.statesAndCapitals = [{state:'Maharashtra',capital:'Mumbai'},{state:'Goa',capital:'Panji'}]

$scope.contacts = [{name:"Steve Jose",mobile : "9872314642",address : "Nasik"}];

$scope.submit = function(tab){
    $scope.tabValue = tab;
    if(tab==1){
        $location.path = '/';
        $log.log("changed path to 1");
    }
    else if(tab==2){
        $location.path = '#/secondScreen';
        $log.log("changed path to 2");
    }
    else if(tab==3){
        $location.path = '#/thirdScreen';
        $log.log("changed path to 3");
    }
}   

$scope.saveContact = function(){

};

}]);

HTML contents :

<body>
    <div ng-controller="mainController">
        <ul>
            <li ng-click="submit(1)" ng-class="{'btn btn-primary' : tabValue==1,'btn btn-default' : tabValue!=1}">Find Capitals</li>
            <li ng-click="submit(2)" ng-class="{'btn btn-primary' : tabValue==2,'btn btn-default' : tabValue!=2}">Add Contact</li>
            <li ng-click="submit(3)" ng-class="{'btn btn-primary' : tabValue==3,'btn btn-default' : tabValue!=3}">Show Contacts</li>            
        </ul>
    </div>
    <div ng-view></div>
</body>

I am getting the logs after changing $location.path.But its not getting displayed.

This is my secondScreen.html :

<div class="container-fluid">   
<form ng-submit="saveContact()">
    Name : <input type="text"><br/><br/>
    Age : <input type="number" min=1 max=150><br/><br/>
    Gender : 
    <input type="radio" ng-model="gender" ng-value="Male">Male<br/>

    <input type="radio" ng-model="gender" value="Female">Female<br/>
    <input type="submit" value="Submit"/>
</form>

you dont need to use click function to change the path <li ng-class="{'btn btn-primary' : tabValue==2,'btn btn-default' : tabValue!=2}"><a href="#/second" > Add Contact </a></li> like this — Rana Ahmer Yasin
– Rana Ahmer Yasin, Commented Jul 31, 2015 at 5:21
When using location service, i don't think you need to prefix #. Set the path without hash and see. — Chandermani
– Chandermani, Commented Jul 31, 2015 at 5:22
@Chandermani I tried out without # as well but it didnt work — Vallabh Lakade
– Vallabh Lakade, Commented Jul 31, 2015 at 5:24

user1608841 · Accepted Answer · 2015-07-31 05:28:42Z

1

use $location.path('/');

instead of

$location.path="/"

see Docs

answered Jul 31, 2015 at 5:28

user1608841

2,4751 gold badge29 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

routing not working properly in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related