I am trying to pass parameters to a state in angular.js ui-router like the following:
.state('details', {
url: '/details/:index',
templateUrl: 'views/details.html'
})
The index is being passed through an ng-repeat index
<div ng-repeat="program in programs">
<h2>{{program.name}}</h2>
<p>{{program.description || "No Description"}}</p>
<p><a ui-sref="details({index: $index})">View details ยป</a></p>
</div>
my question is how in details.html do i read the index passed in the url of the state?
Inject $stateParams in your controller.
Example.
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1/2")
$stateProvider
.state('route1', {
url: "/route1/:index",
templateUrl: "route1.html",
controller: function($stateParams, $scope) {
$scope.index = $stateParams.index
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
});
Related
I'm using NodeJS+Express to serve an HTML page with an Angular app. It seems to work fine when it loads. There are no errors.
Problem is that that page is pretty much blank - except for the header. But the part that is supposed to go where <div ui-view></div> is, doesn't display anything.
Worse yet, when I go to an address, like
http://localhost:7070/admin/#/rounds
the browser just changes it to
http://localhost:7070/admin/#/
and goes back to displaying nothing.
My angular app, in index.js looks like this:
Some .run() and .config() settings
app.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
app.config(["$locationProvider", function($locationProvider) {
//$locationProvider.html5Mode(true);
}]);
States definition:
app.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
console.log("Is this running at all?");
$urlRouterProvider.otherwise('/');
$stateProvider
.state("admin", {
abstract: true,
url: '/admin',
template: '<ui-view />'
})
.state("admin.login", {
url: '/login',
templateUrl: 'login.html',
controller: 'userLoginCtrl'
})
/* DASHBOARD */
.state("admin.dashboard", {
url: "",
controller: 'dashboardAppCtrl',
templateUrl: "dashboard.html"
})
.state("admin.subjects", {
url: "/subjects",
controller: 'subjectsCtrl',
templateUrl: "subjects.html"
})
/* ROUNDS */
.state("admin.rounds", {
url: "/rounds",
controller: 'roundsAppCtrl',
templateUrl: "rounds.html",
resolve: {
gameId: ['$stateParams', function($stateParams){
console.log("gameId ");
return $stateParams.gameId;
}]
}
})
.state("admin.round", {
url: "/round/:roundId",
controller: 'adminRoundCtrl',
templateUrl: "adminround.html",
resolve:{
gameId: ['$stateParams', function($stateParams){
return $stateParams.gameId;
}],
roundId: ['$stateParams', function($stateParams){
return $stateParams.roundId;
}]
},
});
}
]);
There is a working plunker
The answer is relatively simple
$urlRouterProvider.otherwise('/admin');
And instead of this
http://localhost:7070/admin/#/rounds
we have to try this
http://localhost:7070/admin/#/admin/rounds
The point is, every sub-state 'admin.xxx' is child state of the the 'admin' state. And that means, it inherits its url: '/admin'
Also, we used
//$locationProvider.html5Mode(true);
So, the startingurl would most likely be ...
EXTEND: as discussed in comments, IIS Express is used with virtual applicaton /admin, so this part will be in url twice /admin/#/admin...
http://localhost:7070/admin/index.html
// i.e.
http://localhost:7070/admin/
As a starting url of our app. Any routing is later managed after the # sign
http://localhost:7070/admin/#/admin/round/22
Check it here
PLNKR: http://plnkr.co/edit/Or4JTiUrPOJUoW78c8Xd
Hey guys, I'm struggling with an issue that i was able to simplify down to the following sample:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/items/123");
$stateProvider
.state('dashboard', {
url: "/items/:itemId",
templateUrl: 'dashboard.html',
controller: function($scope, $stateParams){
$scope.itemId = $stateParams.itemId;
},
resolve: {
itemParam: ['$stateParams', function($stateParams){
return $stateParams.itemId;
}]
}
})
.state('dashboard.history', {
parent: 'dashboard',
url: "/history",
templateUrl: 'dashboard.history.html',
controller: function($scope, itemParam){
$scope.itemId = itemParam.itemId;
}
});
})
dashboard.html
<h1>Dashboard for item {{itemId}}</h1>
<a ui-sref="dashboard.history({itemId: 123})">History</a>
dashboard.history.html
<h1>Dashboard History for item {{itemId}}</h1>
The problem is history controller isn't being called and I'm getting no errors. Can anybody explain to me what's up?
Thanks in advance!
This is because you don't have a <ui-view> directive inside your parent state:
FORKED DEMO
dashboard.html
<h1>Dashboard for item {{itemId}}</h1>
<a ui-sref="dashboard.history({itemId: 123})">History</a>
<ui-view></ui-view>
How can I load a default child state while placing links to the child states in ui-sref and placing a an empty ui-view below. I want ui-view to load first child state by default on page load, and by user clicking ui-sref links, he/she switch between the states.
Following is the complete code explaining my scenario:
<div class="apps_head settings_top_head1">
Favorities
<img src="img/apps_menu.png"/>
<div id="row1Dropdown" style="border: solid; display: none">
<ul>
<li><a onclick="setRow1Toggle()" ui-sref="dashboard.mainContent.favorites" href="javascript:;" style="color: black">Favorities</a></li>
<li><a onclick="setRow1Toggle()" ui-sref="dashboard.mainContent.passwords" href="javascript:;" style="color: black">Passwords</a></li>
</ul>
</div>
<div ui-view></div>
//===================================================================================
//Here goes the UI-Router Configuration:
var myApp = angular.module('myApp', [
//'ngRoute',
'ui.router',
'JungleLockControllers'
]).run(function($rootScope, $state){
$rootScope.$state = $state;
});
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
url:'/home',
templateUrl:'partials/home.html',
controller : 'HomepageController'
})
.state('career',{
url:'/career',
templateUrl:'partials/career.html'
})
.state('faq',{
url:'/faq',
templateUrl:'partials/faq.html'
})
.state('companyOverview',{
url:'/companyOverview',
templateUrl:'partials/companyOverview.html'
})
.state('press',{
url:'/press',
templateUrl:'partials/press.html'
})
.state('terms',{
url:'/terms',
templateUrl:'partials/terms.html'
})
.state('dashboard',{
url:'/dashboard',
views:{
'':{templateUrl:'partials/dashboard.html'},
'notifications#dashboard':{templateUrl:'partials/dashboard.notifications.html'}
}
})
.state('dashboard.mainContent',{
url:'/mainContent',
//templateUrl:'partials/dashboard.mainContent.html'
views: {
'':{templateUrl:'partials/dashboard.mainContent.html'},
'contentHeader#dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
'row1#dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
'row2#dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
'row3#dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
//'favorites#dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
//'passwords#dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
'sponsored#dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
'browse#dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
}
})
.state('dashboard.mainContent.favorites',{
url:'/favorites',
templateUrl:'partials/favouriteContent.html'
})
.state('dashboard.mainContent.passwords',{
url:'/passwords',
templateUrl:'partials/passwordsContent.html'
})
.state('dashboard.settings',{
url:'/settings',
templateUrl:'partials/dashboard.settings.html'
})
// .state('settings',{
// url:'/settings',
// templateUrl:'partials/dashboard.settings.html'
// })
.state('logout',{
url:'/logout',
templateUrl:'partials/logout.html'
})
/*
Template for adding new empty state
.state('',{
url:'',
templateUrl:''
})
*/
;
$urlRouterProvider.otherwise('/home');
});
Change your rounter config method as:
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home/list');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne#about': { template: 'Look I am a column!' },
'columnTwo#about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
});
Change your default URL
Make your home url state as abstract.
Hope this helps
I've found and implemented the solutions, so what i did is, I made the parent state as Abstract, and the child state that i wanted to be displayed by default, i gave a blank URL to it. here goes an example.
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider.
.state('dashboard',{
abstract:true,
url:'/dashboard',
views:{
'':{templateUrl:'partials/dashboard.html',
controller:'DashboardController'},
'notifications#dashboard':{templateUrl:'partials/dashboard.notifications.html'}
}
})
.state('dashboard.mainContent',{
url:'',
views: {
'':{templateUrl:'partials/dashboard.mainContent.html',
controller:'DashboardController'},
'contentHeader#dashboard.mainContent':{templateUrl:'partials/dashboardContentHeader.html'},
//'contentHeader#dashboard.mainContent':{templateUrl:'partials/logoutConfirmationPrompt.html'},
'row1#dashboard.mainContent':{templateUrl:'partials/row1.dashboard.html'},
'row2#dashboard.mainContent':{templateUrl:'partials/row2.dashboard.html'},
'row3#dashboard.mainContent':{templateUrl:'partials/row3.dashboard.html'},
//'favorites#dashboard.mainContent':{templateUrl: "partials/favouriteContent.html"},
//'passwords#dashboard.mainContent':{templateUrl: "partials/passwordsContent.html"},
'sponsored#dashboard.mainContent':{templateUrl: "partials/sponsoredContent.html"},
'browse#dashboard.mainContent':{templateUrl: "partials/browseContent.html"},
}
})
This way my problem got solved, Thanks alot for your help.
Following documentation from angular/ui-router # github
body
.unstyled
a(ui-sref="state1") State 1
a(ui-sref="state2") State 2
State1 State2 display as text not as links, as the href is not included in the tag. Is adding href necessary for using Angular-UI-Router? or is there a workaround? Problem with adding 'href' is then the entire routing will need to be managed for that too.
upon correct inclusion of
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
});
Angular will include a href='#' dynamically.
*code from Github
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.