AngularJS ui router optional parameters

angularjs ui router optional params
ui router url optional parameters
ui router optional url params
angular ui router optional url parameter
ui-router optional state parameters
angular activate state programmatically
angular state go params

In this video we will discuss
1. How to use optional URL parameters with ui router
2. Programmatically activating a state using $state service go method

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

With ngRoute module to make a parameter optional we include a question mark (?) at the end of the parameter name. With ui-router the parameters are optional by default, so there is nothing special that we have to do. Let us understand ui-router optional parameters with an example. Here is what we want to do.

On the list of students page, we want to search employees by name. For example if we type "Ma" and click search button, on the subsequent page we want to display all the student names that start with "Ma".

The name parameter value "ma" should be passed in the URL as shown below

On the other hand, if we do not enter any name in the search text box and click search button, on the subsequent page we want to display all the student names. In this case the name parameter value should not be passed in the URL. The URL should be as shown below.

So in summary, the name parameter should be optional. Here are the steps.

Step 1 : Define studentsSearch state. Notice in the url property we have included name parameter. Notice, we have not done anything special to make it optional. By default UI router parameters are optional.

.state("studentsSearch", {
url: "/studentsSearch/:name",
controller: "studentsSearchController",
controllerAs: "studentsSearchCtrl"
})

Step 2 : The studentSearch() function that gets called when the search button is clicked is in studentsController function. Notice we are using $state service go() method to activate studentsSearch state. We are also passing a value for the name parameter. If there is something typed in the search text box, the value is passed in the URL to the state, otherwise nothing is passed. So name URL parameter is effectively optional.

.controller("studentsController", function (studentslist, $state, $location) {
var vm = this;

}

}

})

Step 3 : Modify studentsSearchController function to retrieve name URL parameter value. Notice we are using $stateParams service to retrieve name URL parameter value.

.controller("studentsSearchController", function ($http, $stateParams) {
var vm = this;

$http({
method: "get",
}).then(function (response) {
})
}
else {
.then(function (response) {
})
}
})

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[vasanthidurai]

Hello Venkat..., thank u so much for your lecture. it was very

[Dawa]

Thanks Kudvenkat! You are really a lifesaver! almost liked and watched all your Angular videos! You are a fantastic teacher. God bless

[miltonedwin]

if any of you just learning Angular (like me a total beginner) watching this video, and you are using angular version "Angular ver.1.7.5", make sure you include a

"params: { name: null }"

on the

" .config(function ($stateProvider)"

under the

" .state("studentsSearch", {...

controllerAs: "studentsSearchCtrl",
params: { name: null }
"

don't know why mine did not work unless I include it. It is maybe something to do with the Angular version I'm using. Can anyone explain?

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot Venkat!

[folorunso]

Leo Venkat!! The roaring geek :) thanks for all the efforts

[raqibul]

Please give like and thanks if U like the video.

[lifewithsuryanvi]

Hello Venkat...Pl tell, how to remove # from URL while using state

[abhinandanbadanikai]

Some one plz tell me how to run a programs in visual studio 2015, i am

[ederpaulreyescastro]

please I need the index.html, I'm a novice in this, thanks