angularjs ui router configuring states

angularjs ui router stateprovider
$stateprovider example
state provider example in angularjs
stateprovider state example
ui router ui-sref
ui-router ui-sref example

In this video we will discuss configuring states in an angular application. According to angular documentation, a state corresponds to a "place" in the application.

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.

To configure a state use state() method of $stateProvider service
state() method has 2 parameters
i) name - A unique state name, e.g. "home", "courses", "students"
ii) stateConfig - State configuration object

State configuration object has several properties. Some of them are listed below.
template
templateUrl
controller
controllerAs
resolve
url

Let us now configure states for the sample application that we have been working with. We will configure home, courses and students states. Here are the steps

var app = angular
.config(function ($stateProvider) {

$stateProvider
.state("home", {
url: "/home",
controller: "homeController",
controllerAs: "homeCtrl"
})
.state("courses", {
url:"/courses",
controller: "coursesController",
controllerAs: "coursesCtrl"
})

.state("students", {
url:"/students",
controller: "studentsController",
controllerAs: "studentsCtrl",
resolve: {
studentslist: function ($http, $location) {
.then(function (response) {
})
}
}
})
})

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

else
}

}

})

[a ui-sref="home"]Home[/a]
[a ui-sref="courses"]Courses[/a]
[a ui-sref="students"]Students[/a]

At this point, home, courses and students links shoud work as expected. The other links are broken. We will discuss fixing these in our upcoming videos.

Link for all dot net and sql server video tutorial playlists

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

[Hariharan]

Awesome explanation .. please upload some tutorials on ng-animate : )

[shawnradke]

thank you so much!
Really good explanation
I used the ng-route last year and need to use the ui-route but didnt know how to go about using it
Thanks a million!

[persistencej]

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

[akilonkrishnan]

Very helpful video. Thank you so much for explaining!!

[edosirait]

hello, i hv question.
how to set cache when filtering in hompage. So, I want to go back to the filter page, how does the filter not reset, or there is still a cache that hasn't been reset yet ?

[sowmiyaselvam]

Sir, in my HTML file, I need to use href instead of ui-sref. How to make changes accordingly in js file?

[alturusatish]

Venkat, please provide examples using $resource directive with WebAPI

[caoxinghua]

Could you please tell me how many videos left for AngularJS?

[rajashekhar]

Nice ..Please Upload Angularjs 2 VIDEOS

[rajsharma-rfje]

hi, nice explanation. after changing to $stateProvider I able to see Hashtag(#) in URL please let me know how to remove that. I have also tried with $locationProvider is not working. need help!

[Baraaabdelsalam]

thank you so much for your great tutorials but I have a question I wish if you could answer
what if I want to link to be like this /student/studentname rather than student/studentid

[surinder]

hello sir i watch this video several times but not getting the actual result that i want im using ionic frame work for building mobile app, when i go from one state to another the state was changed with URL but there r no effect on page happen without reloading the page please help me how to resolve it .

[vinaysanthosh]

There is some error in part43 video i am not getting the example what you have done sir plz once do check it and provide complete code for script.js and index.html and if possible html code present in templates like courses.html, students.html and home.html and ur videos are awesome

[malls]

AngularJS routing in Apache can not work properly

[coolNotCold]

i thought whole angularjs but unfortunately not, also near to 40% lecture based on database and asp.net, . so after 30, your lecture is bassed on sql. asp.net and angular, it not just angular, ., confusing