Questions tagged [angular-ui-router]

UI-Router evolves the concept of an AngularJS Route into a more general concept of a State for managing complex application UI states. Most notably, it allows nested state/view hierarchies and multiple named views.

UI-Router

UI-Router is a routing module created by the Angular-UI team that replaces the built-in $route/$routeProvider in Angular.

Its most notable advantage is that it uses states which, while similar to routes, allow you to describe your application as a collection of states. A state being comprised of optional parameters, such as a url, template, controller and resolved dependencies. States can be nested (parent/child relationship), multiple views can be used in a single state, and urls can be appended or absolute.

A question that would be a good candidate for using the ui-router tag would:

  • Pertain to a project that is:
    • built on the AngularJS framework
    • using or is migrating to UI-Router (over $routeProvider and ng-view)
  • Not be easily answered by the UI-Router Github Wiki. Be sure to check the FAQ!
  • Show all the various files related to the issue. State configurations, Controllers, Templates, other.
10400 questions
70
votes
6 answers

Dynamically add meta description based on route in Angular

I'm using Angular 5 to build a small brochure type website. Thus far, I have my routes set up, and the page title changes dynamically based on the activated route. I got this working using the instructions on this blog:…
Kellen
  • 1,072
  • 2
  • 15
  • 32
68
votes
6 answers

How to extract query parameters with ui-router for AngularJS?

How do I extract query parameters using ui-router for AngularJS? In AngularJS' own $location service I did: ($location.search()).uid to extract the parameter uid from a URL. What is the corresponding code for ui-router?
67
votes
3 answers

Set URL query parameters without state change using Angular ui-router

How should I update the address bar URL with a changing query parameter using AngularJS' ui-router to maintain state when refreshing the page? Currently, I am using $state.transitionTo('search', {q: 'updated search term'}) whenever input changes,…
Petrus Theron
  • 27,855
  • 36
  • 153
  • 287
66
votes
5 answers

What is the Angular ui-router lifecycle? (for debugging silent errors)

The best I've found is http://www.ng-newsletter.com/posts/angular-ui-router.html. It doesn't go as deep as, for example, the order in which $stateChangeStart, exampleState.onEnter, exampleState.resolve, and exampleState.templateProvider fire. A…
Adam
  • 2,873
  • 3
  • 18
  • 17
65
votes
7 answers

Autoscroll to TOP with ui-router and Angularjs

I've read so many different problems with this and none of the solution given seem to fit my use case. I started by simply putting target="_top" on all my links, but that actually forces my app to reload which wont work. I've also seen people say…
Mr. BigglesWorth
  • 1,530
  • 3
  • 18
  • 33
64
votes
9 answers

how to refresh page in angular 2

I have created one router link as below. This router link loads ProductsStartComponent and then this component loads several other components using ngif and not via navigation. Since below Product categories link is visible in all pages so if I am…
user2800089
  • 2,015
  • 6
  • 26
  • 47
64
votes
10 answers

Angular ui-router scroll to top, not to ui-view

I've just upgraded to ui-router 0.2.8 from 0.2.0 and I've noticed that when the state changes, the scroll position jumps to the top of te child ui-view that is the subject of the new state. This is fine but I have two problems with it: 1) I have…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
63
votes
4 answers

What's the proper way to set a Router & RouterLink in Angular2 Dart

Question: What's the proper way to set a Router & RouterLink in the Angular2 Dart. main.dart import 'package:angular2/angular2.dart'; import 'package:angular2/router.dart'; import 'package:angular2/src/reflection/reflection.dart' show…
Jack Murphy
  • 2,952
  • 1
  • 30
  • 49
62
votes
9 answers

How to achieve that "ui-sref" be conditionally executed?

I want to validate certain condition before the browser follow the link dynamically created by ui-router. I was looking into $rootscope.$on('$stateChangeStart', ..) but I have no access to the controller.$scope from there. I also need to use this…
rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
62
votes
3 answers

AngularJS UI-Router : Get the absolute URL of the state with the parameters

I wanted to be able to change the address' URL without changing the state, as to prevent rerendering. From my search, ui-router currently does not provide this, but $location.path from anuglar does. So, naturally, I wanted to use…
Kousha
  • 32,871
  • 51
  • 172
  • 296
61
votes
11 answers

Angular 2 How to detect back button press using router and location.go()?

I have built an app that uses router 3.0.0-beta.1 to switch between app sections. I also use location.go() to emulate the switch between subsections of the same page. I used and a few URL rewrite rules in order to redirect all routes…
Adrian Moisa
  • 3,923
  • 7
  • 41
  • 66
59
votes
4 answers

Angular ui-router: ui-views vs directives?

The angular ui-router allows multiple nested views. The role of these interchangeable views seems to overlap the role of directives. What are the pros/cons to using (multiple, nested) ui-views vs angular's directives? UPDATE States and routing are…
Michael Lewis
  • 4,252
  • 6
  • 28
  • 39
59
votes
2 answers

Angular ui-router - how to access parameters in nested, named view, passed from the parent template?

Hi I am trying to access a parameter in the controller "ViewWorklogCrtl" while using ui-router and running into difficulty. Basically, my parent template contains: a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show and then further…
hzane
  • 737
  • 1
  • 8
  • 9
56
votes
3 answers

AngularJS - UI Router - programmatically add states

Is there a way to programmatically add states to $stateProvider after module configuration, in e.g. service ? To add more context to this question, I have a situation where I can go with two approaches: try to force the reload on the state defined…
khorvat
  • 1,630
  • 2
  • 20
  • 31
55
votes
3 answers

Angularjs ui-router. How to redirect to login page

I have 4 states: dashboard, dahboard.main, dashboard.minor, login. dashboard is abstract and it is a parent state for .minor and .main states. Below is my code: .state('dashboard', { url: "/dashboard", abstract: true, …
Yelnar
  • 674
  • 1
  • 7
  • 17