I have the following arrangement:
$stateProvider.state('home', {
url: '/',
template: ''
})
.state('profile', {
url: '/profile/view',
templateUrl: 'static/templates/profile.tpl.html'
})
.state('profile.view', {
url: '',
templateUrl: 'static/templates/profile-view.tpl.html',
controller: 'profileController',
controllerAs: 'pc'
})
.state('profile.edit', {
url: '/edit',
templateUrl: 'static/templates/profile-edit.tpl.html',
controller: 'editProfileController',
controllerAs: 'editCtrl'
})
;
What I intend to do is - I have some common partial content between the profile.view and the profile.edit states.
The common part is supposed inside the profile state. But the current arrangement is failing and /profile/view DOES NOT render any of the partials.
No errors reported to console.
Edit:
Here is profile.tpl.html
<div flex flex-gt-sm="50" flex-offset-gt-sm="25" layout="row" layout-align="center">
<div ui-view>
</div>
</div>
Edit 2:
After adding abstract: true the profile.view state started working fine. But profile.edit state keeps redirecting to /. Sort of following the .otherwise('/') rule
I'll answer my own question:
All I was missing was abstract: true in the profile state
Edit:
following things completely solved it for me:
abstract: true in profile state
url: '/profile' in profile state
url: '/view' in profile.view state
url: '/edit' in profile.edit state
Related
With the following code, I'm trying to create a page with the url /admin, that would lead you to /admin/devices after clicking a button and after clicking another button to /admin/devices/new. The first part works properly and I get redirected to /admin/devices. The second part not quite, since it changes the url to /admin/devices/new but it doesn't change the template.
To change through url's I use $state.go(admin.devices) and $state.go(admin.devices.new)
Any idea?
$stateProvider
.state('admin', {
url: '/users',
abstract: true
})
.state('admin.devices', {
url: '/devices',
template: require('../templates/admin/devices/index.html'),
controller: 'AdminDevicesCtrl',
controllerAs: 'ctrl'
})
.state('admin.devices.new', {
url: '/new',
template: require('../templates/admin/devices/new.html'),
controller: 'AdminDevicesNewCtrl',
controllerAs: 'ctrl'
});
I have states
.state('main', {
url: '/',
template: '<div ui-view=""></div>'
})
.state('main.header', {
url: 'header',
templateUrl: 'modules/core/views/header.html'
})
.state('main.header.sidemenu', {
url: '/sidemenu',
templateUrl: 'modules/admin/views/adminsidemenu.html'
})
.state('main.header.sidemenu.businesslist', {
url: '^/business/businesslist',
templateUrl:'modules/business/views/business.list.view.html',
})
.state('main.header.sidemenu.tabs', {
url: '',
templateUrl:'modules/business/views/tabs.business.view.html',
})
.state('main.header.sidemenu.tabs.profile', {
url: '^/business/profile',
templateUrl:'modules/business/views/tabs.business.view.html',
})
My html code in state->main.header.sidemenu.tabs.profile-> template
<li>
<a href="javascript:void(0)"
ui-sref="main.header.sidemenu.businesslist">XXXXX</a>
</li>
Then it throwing error Could not resolve 'branchUrl' from state ->main.header.sidemenu.tabs when I click anchor
How to solve this issue.
Can you please help me to this?
This error occurs when you have not defined the branchUrl state. Please check inside your state configuration and make sure branchUrl should be there.
This kind of error usually means, that some part of (js) code was not loaded. That the state which is inside of ui-sref is missing . You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: main, you could just change the state to main.header
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main.html");
$stateProvider.state('app', {
abstract: true,
templateUrl: "url"
});
$stateProvider.state('main', {
url: '/main',
templateUrl: "url1"
});
$stateProvider.state('main.header', {
url: '/main/header',
templateUrl: "url2"
});
$stateProvider.state('main.header.sidemenu', {
url: "/main/header/sidemenu",
templateUrl: "url 3"
});
$stateProvider.state('main.header.sidemenu.businesslist', {
url: "/main/header/sidemenu/businesslist",
templateUrl: "url 4"
});
for deep nesting you need to define all the states . hope it will help you
I have a basic Index.html file which following structure:
<body class="{{$state.current.name.replace('.','-')}}">
<div ui-view>
<div ng-include src="'partials/menu.html'"></div>
<!-- <div ng-menu class="ui top blue sidebar menu active"></div> -->
<div class="view-height-100"></div>
</div>
...
</body>
When I am in the login state, it's working very well:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'partials/login-area.html',
controller: 'LoginController',
});
But, when I am routing to the user.management state, nothing gets shown (but Chrome is loading the template, so I can access the scope and the .html file is there):
$stateProvider
.state('user', {
url: '/:buildingName',
controller: 'CurrentBuildingController',
data: {
access: ['user']
}
})
.state('user.management', {
url: '/management',
templateUrl: '/views/management.html',
controller: 'ManagementController'
})
Can someone explain me why?
Parent state simply must have target for its child (unless we use absolute naming to target some super parent, but it is another approach)
.state('user', {
url: '/:buildingName',
template: "<div ui-view></div>",
controller: 'CurrentBuildingController',
data: {
access: ['user']
}
})
see that we now have template: "<div ui-view></div>", which will serve as a view target for any child state 'user.xxx'
Check also:
AngularJS UI-Router : Abstract state + child states not working
EXTEND - let child to target the index.html
We can use absolute naming and child will then be injected directly into index.html. There is a working plunker (by intention parent won't load, it does not have any template)
.state('parent', {
url: "/parent",
//templateUrl: 'tpl.html',
})
.state('parent.child', {
url: "/child",
views: {
'#': {
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
}
}
})
Check this for more info:
Angularjs ui-router not reaching child controller
I have an app which has three views (ui-view using Angular ui-router):
header, sidebar and content.
my index.html looks like this: (I omitted the actual classes for clearness)
<body>
<div ui-view="header" class="..."></div>
<div class="page-container">
<div ui-view="sidebar" class="..."></div>
<div class="page-content">
<div ui-view="content"></div>
</div>
</div>
</div>
</body>
This pattern works well with pages that have the header and sidebar.
But I have some pages that I don't want to display the header and sidebar, for example a login page that should fit on all page.
For this kind of pages I need something like:
ui-view which should look like this:
<body>
<div ui-view="content"></div>
</body>
So it won't be nested and under the other views <div>'s and affected by their classes.
I have some solutions in mind, but none of them gave me a good enough UX.
I tried adding <ng hide> to the header and sidebar depending on the state. It worked but there was annoying flickering (that I couldn't eliminate with ng-cloak for some reason..)
To make things more clear, here is an example of two states , one is "one pager" and the other is full page with header and sidebar:
.state('Login', {
url: '/login',
views: {
'content': {
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('Users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
I also think using nested views, but not sure whether this is the right approach.
Maybe try using nested states, ie:
.state('app', {
url: '/app',
abstract: true,
templateUrl: './../templates/treeViewTemplate.html'
})
.state('login', {
url: '/login',
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
})
.state('app.users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
In your root abstract state you define a template for 3 view-layout. login state will instead take whole display.
I am using ui-router and my states are:
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
abstract: true
}).state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/pages_timeline.html",
title: 'Dashboard',
controller: 'TimelineCtrl'
}).state('app.user.services', {
url: "/user/services",
templateUrl: "assets/views/user_services.html",
title: 'Service Integrations'
})
.state('login', {
url: '/login',
template: '<div ui-view class="fade-in-right-big smooth"></div>',
abstract: true
}).state('login.signin', {
url: '/signin',
templateUrl: "assets/views/login_login.html",
controller: 'AuthenticationCtrl'
}).state('login.forgot', {
url: '/forgot',
templateUrl: "assets/views/login_forgot.html"
}).state('login.registration', {
url: '/registration',
templateUrl: "assets/views/login_registration.html"
})
I am currently in the app.dashboard state, and I have a link:
<a ui-sref="app.user.services">
Service Integrations
</a>
However, when I click it, I get an error: Error: Could not resolve 'app.user.services' from state 'app'
What am I doing wrong?
The dot . notation is used to specify a parent relationship in ui-router, so the parent of state dashboard is state app.
With app.user.services there is no parent state app.user. So you need to define it (you can make it abstract):
.state("app.user", {
abstract: true,
template: "<div ui-view></div>"
})