I am using the angular UI state router using this example:
http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview. The router looks like this it has different urls for each state:
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
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'
}
}
});
I would like to implement the UIrouter without changing the urls:at the moment the url changes when I change the state. Suppose I am trying to create a page where I have to add a parameter how can I pass on the parameter?
You can not do that. Only one way is custom implementation of routing. I made one time something like that. All containers for all subpages were fixed. Content was dynamically loaded using $http post. Changes were detected by listening of visible ID of container. A lot of stupid work. Most easier is to use ui - routing.
Related
I have a 'home' view a 'messaging' view and a 'conversations' view. I want the 'home' view to always show the 'messaging' view. That's the easy part and I've done that in the code below. But when the user clicks on a link in the 'messaging' view I want to:
Navigate to the 'conversations' view (which the sample below does).
or
Show the 'conversations' view as a child of 'messaging'.
Here is a link to what I have so far. I have spent quite a bit of time trying to get this to work and haven't been able to get it to do both '1' and '2'. Here is my current state configuration. You can see the full example at this link:
http://plnkr.co/edit/eVhPAr4zGmsbiNUKdzz3?p=preview
homeApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': { templateUrl: 'home.html', controller: "homeController" },
'messaging#home': { templateUrl: 'messaging.html', controller: "messagingController" }
}
})
.state('conversations', {
url: '/conversations',
views: {
'': { templateUrl: 'conversations.html', controller: "conversationsController" }
}
})
});
Then you can try to use nested states or nested views to do it.
I'm not sure it's the way you want to do it but look at this plunker, it does the job using nested state like this :
.state('home.nestedView', {
url: '/nestedView',
views: {
'': { templateUrl: 'conversations.html' }
}
})
Would like someone to help me in front end UI routing using angularjs?
Am designing login & register setup but routing is not working perfectly and also bootstrap rendering does not render it properly when connected via MVC structure..
.
You can use UI-ROUTER for routing in angular js.
UI-Router applications are modelled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.
Here is an example route configuration,
$stateProvider
.state('register', {
url: '/register',
templateUrl: 'register.html',
controller: 'registerController'
})
.state('login', {
url: '/logn',
templateUrl: 'login.html',
controller: 'loginController'
})
.state('home', {
url: '/home',
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.'
})
Github link for documentation
Another reference for ui-router
A Demo for routing and navigation using ui-router
I want to inherit states/URLs using parent.child notation in UI router. I don't want to inherit views (or nest views inside other views), or inherit controllers, I just want to inherit URLs. I'm using 'ui.router' as a dependency.
This is an example of a router:
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
url: '/:id',
templateUrl: 'view2.html',
controller: 'products#show'
})
.state('products.buy', {
url: '/:id/:moreParams',
templateUrl: 'view3.html',
controller: 'products#buy'
})
.state('products.sell', {
url: '/:id/:moreParams/:moreParams',
templateUrl: 'view4.html',
controller: 'products#sell'
});
And the controllers are:
angular.module('productsModule', [])
.controller('products#index', function($scope){
})
.controller('products#show', function($scope){
})
.controller('products#buy', function($scope){
})
.controller('products#sell', function($scope){
})
Here, all views are completely different, and I don't want to nest any view inside any other view. Also, all controllers are different too, and I don't want to inherit controllers, they are all separate with different functions.
Here's my expected result. What I want to achieve is Angular to allow me to only inherit URLs, so the URLs become:
/products
/products/:id
/products/:id/:moreParams
/products/:id/:moreParams/:moreParams
(and then have each URL its own view and controller, as specified above)
So far it's not working, and my research is beginning to tell me that this kind of inheritance using parentState.childState is only for when you want to have nested views (which is what I don't want. I only want to re-use URLs).
My workaround is to create router URLs like products_show, that is, using an underscore instead of a dot, so they are treated as new independent URLs rather than inheritance ones. I'm not sure if this is the best idea, mostly because it looks ugly (though it works perfectly).
Perhaps I should just use products_show in case it can't be done with a dot? Ideas?
You can have a parent child relationship between the routes without nesting their respective views. You achieve that by specifying an absolute target for your view. Like this:
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
url: '/:id',
views: {'#': {
templateUrl: 'view2.html',
controller: 'products#show'
}}
})
.state('products.buy', {
url: '/:id/:moreParams',
views: {'#': {
templateUrl: 'view3.html',
controller: 'products#buy'
}}
})
.state('products.sell', {
url: '/:id/:moreParams/:moreParams',
views: {'#': {
templateUrl: 'view4.html',
controller: 'products#sell'
}}
});
By doing that you're basically telling ui-router to render your view inside the unnamed ui-view in your main index.html, thus, overriding the parent view. Instead of looking for a ui-view in the parent view's template.
To understand why this works, you'll have to understand how ui-router decides where to render the view for your route. So, for example, when you do:
.state('parent.child', {
url: '/:id',
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
})
ui-router will by default translate this to something like:
.state('parent.child', {
url: '/:id',
views: {'#parent': {
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
}}
})
which will cause it to look for an unnamed ui-view inside the parent's view template and render the child view's template inside.
You could also specify more than 1 view for a route, like:
.state('parent.child', {
url: '/:id',
views: {
'#parent': {
templateUrl: 'child-view.html',
controller: 'ChildCtrl'
},
'sidebar#parent': {
templateUrl: 'child-view-sidebar.html',
controller: 'ChildViewSidebarCtrl'
}
}
})
In this case, child-view.html will be rendered inside the parent view's unnamed ui-view as before. In addition it will also look for a ui-view="sidebar" in the parent view's template and render child-view-sidebar.html inside.
For more info on this powerful views option and how to specify targets for your view, see the ui-router docs
This is how to write nested states:
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'view1.html',
controller: 'products#index'
})
.state('products.show', {
parent:'products',
url: '/:id',
templateUrl: 'view2.html',
controller: 'products#show'
})
I have my routes set up as below. Its too frustrating that the view in view.tab is loaded but its controller isn't called. I tried without the paramaters, but it still doesn't work as expected. Does anyone have any idea on how to solve this?
$stateProvider
.state('index', {
url: '/',
templateUrl: viewsRoot + 'restaurants/index.htm',
controller: 'RestaurantsCtrl'
})
.state('view', {
url: '/view',
controller: 'RestaurantsViewCtrl',
templateUrl: viewsRoot + '/restaurants/view.htm'
})
.state('view.tab', {
url: '/orders',
// controller: 'OrdersIndexCtrl',
controller: function ($scope) {
alert('This does not run');
},
views: {
"view": {
templateUrl: viewsRoot + '/restaurants/orders.htm'
}
}
});
$urlRouterProvider.otherwise("/");
You need to declare the controller along side the template:
views: {
"view": {
templateUrl: viewsRoot + '/restaurants/orders.htm',
controller: 'MyController' // (or a function, etc.)
}
The UI-Router wiki sort of alludes to this:
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
Controllers are paired with a view. So if it ignores the "template" properties defined on the state, it seems to imply that it will ignore the controller too.
If you want all of your named views to share a controller, define an abstract parent state as the wiki suggests.
I am writing an AngularJS Application using ui-router. The states 'home' and 'book' are loaded into the (parent) - ui-view element
My setup for the routes is as following :
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home2/app'
})
.state('book', {
url: '/book',
templateUrl: '/book/index'
})
.state('book.overview', {
url: '/overview',
templateUrl: '/book/overview'
})
.state('book.edit', {
url: '/edit/:bookid',
templateUrl: '/book/detail',
controller: 'bookeditcontroller'
})
.state('book.create', {
url: '/create',
templateUrl: '/book/detail',
controller: 'bookeditcontroller'
});
});
When the user tiggers the 'book' state (through a href), the template from '/book/index' is loaded and displayed successfully. But on this first request, i also want to load the template from '/book/overview' and displaying it in the child ui-view.
i've already read the topics about the default states under https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state
But this is not exactly the behavior i want. Is there a way to tell ui-router when parent state 'book' is loaded, also load 'book.overview' into its (child) ui-view ?
Thanks for you help!
I would say that you will need
Multiple Named Views
This allows us to think in one state - many views
State would look like this
.state('book', {
url: '/book',
views : {
'' : { templateUrl: '/book/index', },
'#book': {templateUrl: '/book/overview' },
}
})
this way, we will place two views into one state.
The first will be injected into index.html/root <div ui-view=""></div>
The second will be placed inside of the templateUrl: '/book/index',
That's how we can play with many views in one (or even more parent, grand parent...) state.
I created a plunker with layout, which does show a bit similar example. The code snippet of the state with many views is:
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top#index' : { templateUrl: 'tpl.top.html',},
'left#index' : { templateUrl: 'tpl.left.html',},
'main#index' : { templateUrl: 'tpl.main.html',},
},
})