Im transitioning from one state to another using $state.go() like below:
$state.go('menuItem.list');
This causes following error.
Could not resolve 'menuItem.list' from state 'branches.view'
Below are the state providers for menuItem and branch modules.
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
})
.state('branches.view', {
url: '/:branchId',
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
})
This way you can all modules in new module file
angular.module('branches.modules', [
'branches', 'branches.list', 'branches.view', 'menuItems','menuItems.list'
]);
and add that in your main app.js or app.module.js
angular.module('app', ['ui.router', 'branches.modules']);
yo can use code below :
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
views: {
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
}
})
.state('branches.view', {
url: '/:branchId',
views: {
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
}
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
views:{
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
}
})
you must use views in state
Good Luck
Related
I have the following code:
$stateProvider.state('dm', {
template: '<div ui-view></div>'
}).state('dm.start', {
url: '/',
templateUrl: 'test.html'
}).state('dm.view', {
url: '/view',
template: '<div ui-view></div>',
controller: 'ViewCtrl',
controllerAs: "$ctrl"
}).state('dm.view.deposit', {
url: '/deposit',
templateUrl: 'components/view/view_deposit.html'
}).state('dm.view.lot', {
url: '/lot',
templateUrl: 'components/view/view_lot.html'
}).state('dm.add', {
url: '/add',
template: '<div ui-view></div>',
controller: 'AddCtrl',
controllerAs: "$ctrl"
}).state('dm.add.deposit', {
url: '/deposit',
templateUrl: 'components/add/add_deposit.html'
}).state('dm.add.lot', {
url: '/lot',
templateUrl: 'components/add/add_lot.html'
}).state('dm.add.lot.main', {
url: '/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
When I try to navigate to add/lot/1234, though, it shows that in the URL box but I get the page components/add/add_lot.html. How do I go to components/add/add_lot_main.html?
All the settings seem to be ok. Assure, that template 'components/add/add_lot.html' really contains a target for its child
<div ui-view=""></div>
Try changing to url for lot/:id
JS
.state('dm.add.lot.main', {
url: '/lot/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
This will resolve it.
Trying to get the following url structure to work:
/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2
Ive tried the follow but it doesn't render the article view at all. The page view renders fine:
<section ui-view></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
})
.state('page.article', {
url: '/article/',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html'
});
I then tried everything under the sun, and managed to get the second view to render with the following, however the Controller doesnt run on the article view:
<section ui-view="app"></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
views: {
'app': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
}
}
})
.state('page.article', {
url: '/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
});
How can i get the child view to render and use the/a controller? Haven't even gotten down to the third level.
It should be this.
.state('page.article', {
url: '/page/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
This is part of my state provider:
$stateProvider.state('root', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
views: {
'container': {
templateUrl: viewsRoot + "container.html",
},
'sidebar': {
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
}
}
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.container', {
abstract: true,
templateUrl: viewsRoot + "container.html",
// controller: 'ObjectDetailsController'
})
.state('root.object-details', {
url:'object-details/:objectId',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController',
Some content on sidebar should change depending on objectId. I can access $stateParams.objectId in ObjectDetailsController but I would like to access them in sidebar controller. Maybe pass them to parent, and then parent should pass value to sidebar.
Did you try to pass the data via the params options in $stateProvider?
The API can be found here.
So your code can look like this:
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController',
params: {id: 'value'}
})
You can pass the param inside the view:
<a ui-sref="layout.sidebar({id: 'object.Id'})></a>
on an Ionic-angular application, I'm calling:
$state.go("main.crudlist");
and having the following exception in response:
Error: Could not resolve 'entry' from state 'main'
at Object.transitionTo (angular-ui-router.min.js:3074)
at Object.go (angular-ui-router.min.js:3007)
at angular-ui-router.min.js:4057
at angular.min.js:138
at e (angular.min.js:40)
at angular.min.js:44
What's that entry supposed to mean?
Here's the state declaration:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'Content/Mobile/templates/login.html',
controller: 'LoginController'
})
.state('settings', {
url: '/settings',
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
})
// setup an abstract state for the tabs directive
.state('main', {
url: "/main",
templateUrl: "Content/Mobile/templates/main.html",
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/home.html',
controller: 'HomeController'
}
}
})
.state('main.settings', {
url: '/settings',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
}
}
})
.state('main.crudlist', {
url: "/crudlist",
views: {
'main': {
templateUrl: "Content/Mobile/templates/crudlist.html",
controller: 'CrudListController'
}
}
})
In the end,it had nothing to do to angular,but to the ionic html declaration itself.
I had:
<a ui-sref="entry" class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Switching it to:
<a class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Did the trick.
Sorry I didn't provide enough info
I have states defined as below in my angularjs app using angular ui router state provider. And, I would like to define multiple states with the same configuration ie. with the same template and controller.
$stateProvider
.state('parent', {
templateUrl: 'parent.html',
abstract: true,
parent: 'apm'
})
.state('parent.list', {
abstract: true,
url: '/list',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('parent.list.closed', {
url: '/q',
templateUrl: 'closed.html'
})
.state('parent.list.details', { // would like to have same template, controller on different state parent.details without list
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
.state('parent.list.details.data', { // would like to have same template, controller on different state parent.details.data without list
url: '/details',
views : {
'view1' : {
templateUrl : 'view1.html'
},
'view2' : {
templateUrl : 'view2.html',
controller : 'View2Ctrl'
},
'view3' : {
templateUrl : 'view3.html'
},
'view4' : {
templateUrl : 'view4.html'
}
}
})
Is it possible to do something like
.state(['parent.list.details', 'parent.details'], {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
Any help or suggestions?
Each state needs to be defined in it's own .state() method. You will run into multiple problems trying to do it the way you listed above. Most importantly would be the url.
You can simply do this:
.state('parent.list', {
url: '/list',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
.state('parent.list.details', {
url: '/:id/:name',
abstract: true,
templateUrl: 'details.html',
controller: 'DetailsCtrl',
resolve: {
.....
.....
}
})
While the code is not condensed or efficient in the sense you have to declare the controller and partial used on each state, it is necessary because each state needs its own .state() method
I wanted the same and made it like this:
//add a new Function to the object $stateProvider
$stateProvider.states = (statesArr, obj) => {
for (var i in statesArr) {
var state = statesArr[i];
$stateProvider.state(state, obj);
}
return $stateProvider;
};
//use the new function
$stateProvider
.states(["main", "main.test"], {
url: '/main',
templateUrl: 'modules/ViewContainer.html',
controllerAs: 'currentCtrl',
controller: 'MainCtrl'
})