As I attempt to navigate to a partial template upon form submission in Angular using ng-view, I encounter an issue with passing parameters through the URL. Specifically, I am trying to pass a parameter ?username=Joe and retrieve it in the new partial using $routeParams.
The routing functions properly when no parameters are passed: $location.path('/submit');
However, if I try to include parameters, the form button does not function as expected:
$location.path('/submit?userName=joe');Here is my Angular code:
index.html:
<body>
<div ng-view></div>
</body>
loginPartial.html:
<form ng-submit="submit()">
<button type="submit">Submit</button>
</form>
messagePartial.html:
<p>Hello {{userName}}</p>
Angular code:
angular.module('app',['ngRoute'])
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'loginPartial.html',
controller:'LoginController'
})
.when('/submit',{
templateUrl:'messagePartial.html',
controller:'MessageController'
})
.otherwise({
redirectTo:'/'
});
}])
.controller('LoginController',['$scope','$location',
function($scope,$location){
$scope.submit=function(){
$location.path('/submit');//routing works with no parameters passed
//$location.path('/submit?userName=joe');//routing fails if parameters passed
};
}])
.controller('MessageController',['$scope','$routeParams',
function($scope,$routeParams){
$scope.userName=$routeParams.userName;
}]);