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.
Related
I am trying to put the first child component into parent one, e.g. test1.html should be inside test.html. Here's the html code:
test.html:
<div ui-view></div>
test1.html:
<h1>First</h1>
<button>Go to second page</button> // This should render test2.html inside test.html
test2.html:
<h2>Second</h2>
test1.controller.js:
.state('app.test', {
url: '^/test',
templateUrl: '/test/test.view.html',
controller: 'TestController',
controllerAs: 'testCtrl'
})
.state('app.test1', {
url: '^/test1',
templateUrl: '/test1/test1.view.html',
controller: 'test1Controller',
controllerAs: 'test1Ctrl'
})
.state('app.test2', {
url: '^/test2',
templateUrl: '/test2.view.html',
controller: 'test2Controller',
controllerAs: 'test1Ctrl'
})
At the moment it is just loading the main test.html page without any test1.html inside.
Try this:
.state('app.test', {
url: '^/test',
templateUrl: '/test/test.view.html',
controller: 'TestController',
controllerAs: 'testCtrl'
})
.state('app.test.test1', {
url: '/test1',
templateUrl: '/test1/test1.view.html',
controller: 'test1Controller',
controllerAs: 'test1Ctrl'
})
.state('app.test.test2', {
url: '/test2',
templateUrl: '/test2.view.html',
controller: 'test2Controller',
controllerAs: 'test1Ctrl'
})
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',
}
}
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
PollRoutes.coffee
$stateProvider.state 'polls.new',
url: '/new'
views:
"":
templateUrl: 'polls/form.html'
controller: 'PollController'
"page_title":
template: "<h1 class='page-header'>Create a new poll</h1>"
resolve:
auth: ["Auth", (Auth)-> Auth.currentUser()]
$stateProvider.state 'polls.edit',
url: '/:id/edit'
views:
"":
templateUrl: 'polls/form.html'
controller: 'PollController'
"page_title":
template: "<h1 class='page-header'>Edit poll \"{{poll.title}}\"</h1>"
resolve:
auth: ["Auth", (Auth)-> Auth.currentUser()]
insert in polls/form.html.slim
div ng-view='page_title'
I tried various view formats: "page_title", "page_title#", "page_title#polls.edit" and none of them work
Application link
Your $state should be like this.
$stateProvider
.state('polls', {
url: '/',
data: {pageTitle: 'Edit poll.'},
resolve: {//here your functions},
views: {
'navbar': {
templateUrl: null, //here your template
controller: null //here your controller
},
'body': {
templateUrl: "polls/form.html",
controller: 'PollController'
}
}});
and your views like this,
<div ng-view='navbar'></div>
<div ng-view='body'></div>
and your tittle can be loaded like this,
<title ng-bind="title">My tittle</title>
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