AngularJS ui router custom data
pass angular state custom data to controller
pass angular state custom data to view
ui router data property example
ui router custom data example
ui router read custom data from controller
In this video we will discuss how to add custom data to a state in angular.
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.
/ @aarvikitchen5572
To add custom data to a state use data property. In the example below, we have added a data a property to the "home" state. The value for this property is a Javascript object that contains our custom data. Along the same lines we have added custom data to the "courses" state.
$stateProvider
.state("home", {
url: "/home",
templateUrl: "Templates/home.html",
controller: "homeController",
controllerAs: "homeCtrl",
data: {
customData1: "Home State Custom Data 1",
customData2: "Home State Custom Data 2"
}
})
.state("courses", {
url: "/courses",
templateUrl: "Templates/courses.html",
controller: "coursesController",
controllerAs: "coursesCtrl",
data: {
customData1: "Courses State Custom Data 1",
customData2: "Courses State Custom Data 2"
}
})
The custom data is now available in all the controllers. To access state custom data from it's controller (i.e to access home state data from home controller) use $state.current.data.customPropertyName. To access state custom data from a different controller (i.e to access courses state data from home controller) use $state.get("statename").data.customPropertyName.
.controller("homeController", function ($state) {
this.message = "Home Page";
this.homeCustomData1 = $state.current.data.customData1;
this.homeCustomData2 = $state.current.data.customData1;
this.coursesCustomData1 = $state.get("courses").data.customData1;
this.coursesCustomData2 = $state.get("courses").data.customData2;
})
Modify home.html as shown below, if you want to display the custom data on the home view
[fieldset]
[legend]Home[/legend]
Custom Data 1 : {{homeCtrl.homeCustomData1}}
[br /]
Custom Data 2 : {{homeCtrl.homeCustomData2}}
[/fieldset]
[fieldset]
[legend]Courses[/legend]
Custom Data 1 : {{homeCtrl.coursesCustomData1}}
[br /]
Custom Data 2 : {{homeCtrl.coursesCustomData2}}
[/fieldset]
With all the above changes, the custom data will be displayed on the home view.
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
На этой странице сайта вы можете посмотреть видео онлайн AngularJS ui router custom data длительностью online в хорошем качестве, которое загрузил пользователь kudvenkat 13 Апрель 2016, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 49,551 раз и оно понравилось 122 зрителям. Приятного просмотра!
