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>
Related
I'm adding a title to every state in the ui-router like that:
.state('projects', {
url: '/',
templateUrl: 'projects/projects.html',
ncyBreadcrumb: {
label: 'Projects'
},
data : {title: 'Projects'}
})
And then the title attribute takes that data:
<title ng-bind="$state.current.data.title"></title>
How can I take data from the state parameters and add it to the title in the above example? I tried the following with no luck:
.state('project', {
abstract: true,
url: '/projects/:projId',
resolve:{
projId: ['$stateParams', function($stateParams){
return $stateParams.projId;
}]
},
controller: 'projectCtrl',
templateUrl: 'project/project.html',
ncyBreadcrumb: {
label: 'Project',
parent: 'projects'
},
data : {title: '{{state}}'}
})
you have to use app.run() in your app.js file and assign your title in $rootScope.title . you can follow this code
app.run(function($rootScope){
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){
$rootScope.title=toState.data.title;
});
});
after this then bind the variable in your html like this
<title ng-bind="title"></title>
I think it will helpful
There is a working example
I would say, you are almost there. The title could look like this:
<title>{{$state.current.data.title}} {{$stateParams.ID}}</title>
Let's have these two states:
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
data : { title: 'Title for PARENT' },
})
.state('parent.child', {
url: "/child/:ID",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
data : { title: 'Title for CHILD' },
})
;
And call them like this:
<a ui-sref="parent">
<a ui-sref="parent.child({ID:1})">
<a ui-sref="parent.child({ID:2})">
And with this hook:
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
So, the point is, that in a $rootScope we can access both, $state.current and $stateParams
Check it here (NOTE, to see plunker in separated window, click the right -top corner blue icon - new window will change the title as well)
I'd suggest you to use params option instead of using data option, because params can be optional and you can set it dynamically by passing parameter inside your $state.go or ui-sref directive.
Code
.state('projects', {
url: '/',
templateUrl: 'projects/projects.html',
ncyBreadcrumb: {
label: 'Projects'
},
params: {
title: { value: null }
}
});
From Controller
$state.go('projects', {title: 'Page1'}); //you can change title while calling state
From HTML
ui-sref="projects({title: 'Something Else'})"
I have multi pages with One View .I want use Single View for All pages, with Logical structure Angular, In addition Breadcrumbs for navigation, in head of Home page.
config code:
$stateProvider
.state('otherwise', {
url: '*path',
controller: function ($state) {
var lastUrl = sessionStorage.lastUrl
if (lastUrl && lastUrl != 'otherwise')
$state.go(lastUrl);
else if (!lastUrl)
$state.go('Companies');
},
data: {
requireLogin: false
}
})
.state('Create', {
controller: 'myControl',
url: '/',
templateUrl: 'Create.html',
data: {
requireLogin: true
}
})
.state('Jobs', {
controller: 'myControl',
url: '/',
templateUrl: 'JobsList.html',
data: {
requireLogin: true
}
})
.state('Companies', {
controller: 'myControl',
url: '',
templateUrl: 'CompaniesList.html',
data: {
requireLogin: false,
breadcrumbProxy: 'Companies.CarsList'
}
})
.state('Companies.CarsList', {
controller: 'myControl',
params: { id: ':id', companyName: ':companyName' },
url: '',
templateUrl: 'CarsList.html',
data: {
requireLogin: false,
displayName: 'List'
}
})
.state('Companies.CarsInfo', {
controller: 'myControl',
templateUrl: "CarInfo.html",
data: {
requireLogin: false,
displayName: 'Info'
}
})
html:using single VIEW in home page
<div ui-view></div>
You have a Solution for my Config?!
Single view
To handle multiple views, the ui-router provides rules to target views when you have multiple <div ui-view></div> in your templates.
By default, a state takes place in the unique <div ui-view></div> in parent state. So, given your configuration, the Companies.CarsList template will be inserted in the <div ui-view></div> of the Companies state (in CompaniesList.html).
To override that, just wrap templateUrl and controller of your second-level states (Companies.CarsList and Companies.CarsInfo) in a views object the ui-router to place the view in the unique <div ui-view></div> of the root state (in index.html), like this:
.state('Companies.CarsList', {
params: { id: ':id', companyName: ':companyName' },
url: '',
views: {
"#": { // rule for absolutely targetting the unnamed view in root unnamed state.
controller: 'myControl',
templateUrl: 'CarsList.html',
}
},
data: {
requireLogin: false,
displayName: 'List'
}
})
Breadcrumb
Have a look on angular-breadcrumb, it generates a breadcrumb based on the ui-router configuration. All you have to do is to give a name to the states (like you seems to do already with data > displayName).
The module can handle the absolute view targeting I described above. See the docs for details
I an trying to list out all the URL's that exist in the stateprovider (angularjs 1.2.26).
given the example below, (very much cut down state list):
angular.module('app')
.config(function ($stateProvider) {
$stateProvider
.state('app.vendors', {
url: '/vendors',
templateUrl: 'app/vendor/list.html',
controller: 'Vendor.ListController as vm',
})
.state('app.vendor', {
url: '/vendor/{vendorId}',
templateUrl: 'app/vendor/details.html',
controller: 'Vendor.DetailsController as vm',
data: {
subnav: [
{ title: 'Details', icon: 'fa-align-left', state: 'app.vendor', permissions: 'get-vendor', exactStateOnly: true },
{ title: 'Sites', icon: 'fa-archive', state: 'app.vendor.sites', permissions: 'get-site' },
{ title: 'NCRs', icon: 'fa-copy', state: 'app.vendor.ncrs', permissions: 'get-vendor' }
],
requiredPermissions: ['get-vendor']
}
})
.state('app.vendor.sites', {
url: '/sites',
templateUrl: 'app/vendor/site/list.html',
controller: 'Vendor.Site.ListController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.site', {
url: '/site/{siteId}',
templateUrl: 'app/vendor/site/details.html',
controller: 'Vendor.Site.DetailsController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.ncrs', {
url: '/ncrs',
templateUrl: 'app/vendor/ncr/ncrList.html',
controller: 'Vendor.NCR.NCRListController as vm',
data: {
requiredPermissions: ['get-vendor']
}
});
});
to get to a particular vendor you would use state:
app.vendor({vendorId: 1})
to get to its site
app.vendor.site({vendorId: 1, siteId: 2})
if I pass in the $state object to a controller I can list all the states with state.get().
If I list them the urls only contain the last part (i.e. what is in the config, and relative to its parent). I can use $state.href('app.vendor.site') which will give me almost the whole url, but misses out the parameters. I am trying to find a way at runtime to know what or at least how many parameters it requires.
My goal is to try and create a basic smoke test for every page in our Angular app to ensure it loads something and doesn't through errors in the console. I dont want to have to manually maintain a list of urls with params. (all our params are int IDs so I can simply use "1" in the params to test the url).
The private portion of the state contains params and ownParams objects. You can use a decorator to access those internal variables. See my previous answer regarding exposing the entire internal state object using a decorator: UI-Router $state.$current wrapper for arbitary state
After decorating your state objects, use the $$state() function to retrieve the private portion. Then query the state for its params and generate the href.
angular.forEach($state.get(), function(state) {
var paramKeys = state.$$state().params.$$keys();
var fakeStateParams = {};
angular.forEach(paramKeys, function(key) { fakeStateParams[key] = key; });
console.log($state.href(state, fakeStateParams));
});
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
I am using angular UI-Router. I have the following in my route config
.config(function config($stateProvider) {
$stateProvider.state('newsFeedView', {
url: '/newsFeed',
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
data: {
pageTitle: 'News Feed'
}
})
.state('tradeFeedView', {
url: '/tradeFeed',
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
data: {
pageTitle: 'Trade Feed'
}
})
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
'tradeFeed': {
url: "",
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
},
'newsFeed': {
url: "",
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
}
},
templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
});
})
In my index page I just invoke the view using:
<div class="container" ui-view></div>
In My bulletinBoard.html i want to have a nested view:
<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>
For the /newsFeed page and the /tradeFeed pages this works perfectly but for the bulletin board i can't see anything on the page. Where am i going wrong?
I find the example on the official GitHub wiki to be very unintuitive. Here is a better one:
https://scotch.io/tutorials/angular-routing-using-ui-router
For instance:
...
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },
// the child views will be defined here (absolutely named)
'tradeFeed#bulletinBoard': { template: ..... },
// another child view
'newsFeed#bulletinBoard': {
templateUrl: ......
}
}
});
The syntax of each view attribute being viewName#stateName.
The .state() method's templateUrl is ignored when using the views object. See the ui-router wiki for more info:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties