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.
Related
I am using $stateprovider to navigate between pages I had given $state.go('view1') to go to view1.html:
config(['$qProvider','$stateProvider','$locationProvider', '$routeProvider', function($qProvider,$stateProvider,$locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller:'View1Ctrl'
})
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html'
});
$routeProvider.otherwise({redirectTo: '/'});
$qProvider.errorOnUnhandledRejections(false);
}])
Function using $state:
controller("appcontroller",['$scope','$state','$stateParams',function($scope,$state,$stateParams,$rootScope){
$scope.login = function()
{
$state.go('view1');
}
}]);
Here view1.html is loading but it's showing above index.html.
As you are using Anguar ui-router. You must have kept in index.html. So your view1.html will be replaced there only. Other code in index.html will be untouched by your angular code.
<p> Here is me </p>
<ui-view></ui-view>
Now, if you change the route. "Here is me" will be always there.
Hope this was the issue what i understood.
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>
In my app I have some main modules and each modules has sidebar.
If I click sidebar item then it will route to sidebar linking page but here if I click header again then I am not able to view my parent route page.
I have listed my problem in this plnkr.
Step to reproduce :
By default route1 is selected and dashboard is available on view. Click on Item1.
Now click on route1 : Failed to see dashboard view.
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
controller: function($scope, $state) {
$scope.items = ["item1", "item2"];
$state.go('route1.dashboard');
}
})
.state('route1.dashboard', {
url: "/dashboard",
templateUrl: "dashboard.html"
})
.state('route1.item1', {
url: "/item1",
templateUrl: "item1.html"
})
.state('route1.item2', {
url: "/item2",
templateUrl: "item2.html"
})
.state('route2', {
url: "/route2",
templateUrl: "route1.html",
controller: function($scope, $state) {
$scope.items = ["item3", "item4"];
$state.go('route2.dashboard');
}
})
.state('route2.dashboard', {
url: "/dashboard",
templateUrl: "dashboard.html"
})
.state('route2.item3', {
url: "/item3",
templateUrl: "item3.html"
})
.state('route2.item4', {
url: "/item4",
templateUrl: "item4.html"
})
})
</script>
The code you have in the route1 controller only runs when it's instantiated. Therefore, after you re-visit it from being inside item1, it doesn't need to reload and the $state.go() doesn't fire.
I've forked your plunker with another potential approach: http://plnkr.co/edit/7stMErnkb3rzPJD0Gj5x?p=preview
you should put the dashboard content in the route1 template, rather than attempting to forward to it via $state.go()
so, your route1.html goes from the previous ui-view statement of
<div ui-view></div>
to
<div ui-view>
<h1>Dashboard</h1>
</div>
Now you don't need the dashboard partial, and it loads every time. The item1/item2 partials will replace the content in the ui-view whenever those states activate.
Note in the updated Plunker how Route1 works as you want, while Route2 still doesn't work (as it still has the previous $state.go() approach).
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"
})
});