Not able to scuffle between states and sharing data using ui-router - angular-ui-router

Question

I'm using like this
$stateProvider
.state('/', {
url: '/Home',
templateUrl: 'Home.html',
controller: 'ctrl'
})
.state('category', {
url: '/category',
templateUrl: 'category.html',
controller: 'ctrl'
})
.state('Item', {
url: '/Item',
templateUrl: 'Item.html',
controller: 'itm'
})
Currently i'm using $rootScope.category=[]; to display category.is there any other way to do this.
i'm trying to load category with ng-init in Home state and on category click i want to load items with category id.How could i do this.

Answer 1

Plunkr https://plnkr.co/edit/A8JXIWa6Jc4RxsGvucFa?p=preview
Best way to go about doing this sort of nested view is with child states and resolve blocks.
.state('app', {
url: '',
template: '<div ui-view></div>',
controller: 'AppCtrl',
abstract: true
})
The main state in my example, 'app' is an abstract state. Abstract states can have child states but cannot be accessed directly. If we prefix all of the states in our application with 'app.' they will be a child of the app state and will inherit the scope of the app state. Notice how I use $scope.goHome() in the category controller even though it is defined in the app controller.
.state('app.home', {
url: '/home/',
templateUrl: 'app.home.html',
controller: 'HomeCtrl',
resolve: {
Categories: function (CategoryService) {
return CategoryService.getAll();
}
}
})
.state('app.category', {
url: 'category/:categoryId/',
templateUrl: 'app.category.html',
controller: 'CategoryCtrl',
resolve: {
Category: function ($stateParams, CategoryService) {
return CategoryService.getById(+$stateParams.categoryId);
},
Items: function ($stateParams, ItemService) {
return ItemService.getByCategoryId(+$stateParams.categoryId);
}
}
});
These next two states in the example, 'app.home' and 'app.category' are the ones most relevant to your question. Notice how I have resolved the data we need to populate the view before entering the state. This functionality happens in the resolve block, and all variables that we resolve in the state can be accessed directly in the state controller (as well as all childrens' controllers) or in consecutive resolve statements.
For the sake of abstracting out reusable functionality I created an ItemService and CategoryService that I use in the resolve block. They are relatively simple and can be seen in the plunkr. The two important functions are CategoryService.getById and ItemService.getByCategoryId. These both take the same param categoryId for which I retrieve from the state's $stateParams which are passed in to the $state.go function as the second parameter as seen in the HomeCtrl controller. These parameters are be included in the url in the state.
.controller('AppCtrl', function ($scope, $state) {
$scope.goHome = function () {
$state.go('app.home');
}
})
.controller('HomeCtrl', function ($scope, $state, Categories) {
$scope.Categories = Categories;
$scope.goCategory = function (category) {
$state.go('app.category', {categoryId: category.id});
};
})
.controller('CategoryCtrl', function ($scope, Category, Items) {
$scope.Category = Category;
$scope.Items = Items;
});
The controllers here are also relatively simple. The resolved variables are injected into the controllers (and must be named the same). They are then assigned to the scope so that they can be accessed in your templates.
I went ahead and created models for both categories and items as an unnecessary, but useful abstraction. They are unnecessary in regards to state management.
Hopefully this example is enough to get you started with nested states in ui-router.