I'm new to ui-router and I'm trying to add a class to my navigational items if it's the active page.
Here's my stateProvider:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
})
.state('matches', {
url: '/matches',
templateUrl: 'templates/matches.html',
})
.state('matches.add', {
url: '/add',
templateUrl: 'templates/add-match.html',
})
.state('statistics', {
url: '/statistics',
templateUrl: 'templates/statistics.html',
});
Which should translate into the following structure:
/home
/matches
/add
/statistics
I'm generating my navigation using a controller:
app.controller('mainNavController', ['$scope', function($scope) {
$scope.items = [
{
title: 'Home',
sref: 'home',
href: './home',
},
{
title: 'Matches',
sref: 'matches',
href: './matches',
},
{
title: 'Statistieken',
sref: 'statistics',
href: './statistics',
},
];
}]);
Which generates the ul.main-nav like this:
<ul class="main-nav" ng-controller="mainNavController">
<li ng-repeat="item in items" ui-sref-active="is-active">{{item.title}}</li>
</ul>
The normal (root level) elements get the correct active class, but when going to /matches/add it doesn't add the active class to the Matches element in my navigation.
How would I go about doing this? I checked out this commit but I'm not seeing how I could implement this into my project.
Your code will work, if you place ui-sref for second-level items under first-level items
Cite from official angular-ui-router docs:
ui-sref-active can live on the same element as ui-sref or on a parent
element. The first ui-sref-active found at the same level or above the
ui-sref will be used.
Seems like if you update your ui-router to the latest version this is taken care of
Related
I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).
My module is:
var app = angular.module("app", [
"ui.router",
"pascalprecht.translate"
]);
My routes are;
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("login", {
url: "/login",
templateUrl: "views/accessControl/login.html",
controller: "loginCtrl"
});
$stateProvider
.state("recoverLogin", {
url: "/recoverLogin",
templateUrl: "views/accessControl/recoverLogin.html",
controller: "recoverLoginCtrl"
});
$stateProvider
.state("template", {
url: "/template",
templateUrl: "views/templates/template.html",
controller: "templateCtrl"
})
.state("template.dashboard", {
url: "/dashboard",
templateUrl: "views/dashboard/dashboard.html",
controller: "dashboardCtrl"
})
$urlRouterProvider.otherwise("login");
})
I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?
Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview
There is updated plunker and working plunker.
The template of the mainTemplate state is now lookin like this:
place for main:
<div ui-view="main"></div>
place for other:
<div ui-view="other"></div>
so it has two (could be more) places for more stuff. And this is the state redefined:
.state("mainTemplate.dashboard", {
name: "main",
url: "/dashboard",
views: {
'main' : {
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
},
'other' : {
template: "<h2>other view</h2>",
}
}
});
What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
play or observe the changes here
I am not able set up and maintain an route param. When I set the param. It goes to the correct place. However, if I change the route the content does not change. I tried to make one view object, but home.name state does not render with this approach. I can only get templates to show using two absolute paths.
Could not resolve '#/home/Adam Harvey' from state 'home'
I found a great link https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
To start: I created a simple list with ng-repeat. Here is a shortened example
$scope.iterants =
[
{
name: 'Adam Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
},
{
name: 'Jana Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
}
];
In my html template I want to place a ui-sref on top of each person's name as a link to view them on another template.
<td><a ui-sref="itinerary.name{{name:person.details}}">{{person.name}}</a></td>
In my config I set up like so with the controller getting passed the $stateParams
.config(function config( $stateProvider ) {
$stateProvider.state( 'home.name', {
url: '/home/:name',
views: {
"main": {
controller: 'AboutCtrl',
templateUrl: 'src/app/about/about.tpl.html'
}
},
data: {pageTitle:'About'}
});
})
.controller( 'AboutCtrl', function AboutCtrl( $scope, $stateParams ) {
$stateParams.name;
});
In the home controller. I have set up my config and controller like so...
.config(function config( $stateProvider ) {
$stateProvider.state( 'home', {
url: '/home',
views: {
"main#": {
controller: 'HomeCtrl',
templateUrl: 'src/app/home/home.tpl.html'
},
resolve: [{
name: ['$stateParams', function($stateParams){
return $stateParams.name;
}]
}]
},
data:{ pageTitle: 'Home' }
});
})
Updates
The issue is your usage of the ui-sref directive. You have to pass the state name and then parameters as an object, like so:
<td><a ui-sref="home.name({ name: person.name })">{{person.name}}</a></td>
I use ui-router and have two nested views.
I’d like to hide some html-content in the parent view when the user goes to child state and show it again when the user backs to parent one.
Could anybody give an advice how to achieve that?
It’s easy to do that using root scope and state change events but it looks like a dirty way, doesn’t it?
app.js
'use strict';
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('ParentCtrl', function ($scope) {
$scope.hideIt = false;
});
myApp.controller('ChildCtrl', function ( $scope) {
$scope.$parent.hideIt = true;
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('parent', {
url: '/parent',
templateUrl: 'parent.html',
controller: 'ParentCtrl'
})
.state('parent.child', {
url: '/child',
template: '<h2>Child view</h2>',
controller: 'ChildCtrl'
});
});
parent.html
<h2>Parent view</h2>
<div ng-hide="hideIt">
<p>This text should be hidden when the user goes to the nested state.</p>
</div>
<a ui-sref="parent.child">Go to the nested view</a>
<div ui-view></div>
One simple solution is to fill ui-view tag in the parent template with the content that you want gone when child state is loaded.
<ui-view>
<h2>Parent view</h2>
<div ng-hide="hideIt">
<p>This text should be hidden when the user goes to the nested state.</p>
<a ui-sref="parent.child">Go to the nested view</a>
</ui-view>
You should check out named views for this. That would probably be the best way to go. https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Also, there's another thread that answered this question over here: https://stackoverflow.com/a/19050828/1078450
Here's the working code for nested named views, taken from that thread:
angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
$stateProvider
.state('test', {
abstract: true,
url: '/test',
views: {
'main': {
template: '<h1>Hello!!!</h1>' +
'<div ui-view="view1"></div>' +
'<div ui-view="view2"></div>'
}
}
})
.state('test.subs', {
url: '',
views: {
'view1#test': {
template: "Im View1"
},
'view2#test': {
template: "Im View2"
}
}
});
}
])
.run(['$state', function($state) {
$state.transitionTo('test.subs');
}]);
http://jsfiddle.net/thardy/eD3MU/
Edit:
Adding some thoughts re the angular-breadcrumbs comment. I haven't used it myself, but at first glance it seems like subroutes shouldn't break the breadcrumbs. I'm just looking at the source code of their demo, around line 62. I'd have to spin it all up to really go about testing it, but it looks like they're doing almost the same thing with specifying views, and it works there: https://github.com/ncuillery/angular-breadcrumb/blob/master/sample/app.js#L62
.state('room', {
url: '/room',
templateUrl: 'views/room_list.html',
controller: 'RoomListCtrl',
ncyBreadcrumb: {
label: 'Rooms',
parent: 'sample'
}
})
.state('room.new', {
url: '/new',
views: {
"#" : {
templateUrl: 'views/room_form.html',
controller: 'RoomDetailCtrl'
}
},
ncyBreadcrumb: {
label: 'New room'
}
})
.state('room.detail', {
url: '/{roomId}?from',
views: {
"#" : {
templateUrl: 'views/room_detail.html',
controller: 'RoomDetailCtrl'
}
},
ncyBreadcrumb: {
label: 'Room {{room.roomNumber}}',
parent: function ($scope) {
return $scope.from || 'room';
}
}
})
Edit2:
This solution will not combine routes into one crumb
See the official demo
re: But I use angular-breadcrumb and in your solution they will be combined into one crum.
I'm using UI-router's $stateProvider for the routing on an angularjs project and find myself repeating a lot of the same configuration for the route views.
For example:
$stateProvider.state('triage', {
url: '/operations/triage',
views: {
"header": {
controller: 'CommonCtrl',
templateUrl: 'common/header.tpl.html'
},
"submenu": {
controller: 'CommonCtrl',
templateUrl: 'common/submenu.tpl.html'
},
"content": {
controller: 'TriageCtrl',
templateUrl: 'operations/triage/triage.tpl.html'
},
"footer": {
templateUrl: 'common/footer.tpl.html'
}
},
The header, submenu and footer will be the same for almost every state, the content is really the only part that is variable.
Is there a way to configure the router to always use predefined controllers and templates unless otherwise specified.
Solution here could be called: layout root state. As in detail described here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
One of the plunkers
we can create a super parent state 'index' or 'root' (there could be few of them for different state families, e.g. standard, login, doc) which is creating unnamed target for its child/ren (ui-view="") while injecting related templates around:
.state('index', {
abstract: true,
//url: '/',
views: {
'#' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top#index' : { templateUrl: 'tpl.top.html',},
'left#index' : { templateUrl: 'tpl.left.html',},
// this one is unnamed - a target for children
'#index' : { templateUrl: 'tpl.main.html',},
},
})
So, in this example the layout.html would look like:
<div>
<section class="left">
<div ui-view="left"></div>
</section>
<section class="right">
<section class="top">
<div ui-view="top"></div>
</section>
<section class="main">
// here is the unnamed view - filled by this state
// but later target for the child states
<div ui-view=""></div>
</section>
</section>
</div>
Now, we can inject that root state into any existing state:
.state('client', {
parent: 'index',
...
})
.state('product', {
parent: 'index',
...
})
so they will have unchanged name ('client', 'product'), i.e. without prefix 'index' or 'root' but will be injected into existing template
The example
(AngularJS v1.2.0-rc.3 + Angular UI-Router v0.2.0)
In my index.html, I have the following code:
<div class="container" ui-view></div>
In my app.js, I have the following code:
$stateProvider
.state('projects', {
abstract: true,
url: '/projects',
template: '<ui-view />',
})
// below display properly
.state('projects.list', {
url: '',
templateUrl: 'views/project_list.html',
controller: 'ProjectListCtrl'
})
// below display properly
.state('projects.one', {
url: '/{projectId:[0-9]{1,8}}',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
// below does not display at all
.state('projects.one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
})
I can hit the following routes just fine: index.html/projects, index.html/projects/1, but I cannot hit this route: index.html/projects/1/campaigns
Does anyone know why I can't?
Bonus points if you can answer how I could display the projects.one.campaigns state on the same URL page as the projects.one state.
The reason is because projects.one matches before projects.one.campaigns
Add a projects.one abstract state and then add a projects.one.default state with the templateUrl.
.state('projects.one', {
url: '/{projectId:[0-9]{1,8}}',
abstract:true,
template: '<ui-view/>',
})
.state('projects.one.default', {
url: '',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
.state('projects.one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
}
To display the template of the campaigns on the same page of the projects.one you should not use a state but a directive instead and toggle with ng-show on the same page.
I just spent whole day dealing with this problem.
I found out, that you don't need abstract states at all!
Try this:
index.html:
<div class="container"><ui-view/></div>
use directive ui-view as a tag in the top level template.
Now all your nested templates wrap like this:
<ui-view>
<div>
template code
</div>
</ui-view>
and now you can just:
$stateProvider
.state('list', {
url: '',
templateUrl: 'views/project_list.html',
controller: 'ProjectListCtrl'
})
// below display properly
.state('one', {
url: '/{projectId:[0-9]{1,8}}',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
// below does not display at all
.state('one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
})
I needed general solution for the nesting and this works. Now you can create very deep nesting easily (for example one.campaing.group.member.note). If you will use ui-view on the top level and wrap all templates with the ui-view, they contact of each template will replace content of the top level ui-view (which is empty).