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.
10225 questions
1100
votes
15 answers

What is the difference between angular-route and angular-ui-router?

I'm planning to use AngularJS in my big applications. So I'm in the process to find out the right modules to use. What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-router.js) modules? In many articles when ngRoute…
377
votes
10 answers

AngularJS ui-router login authentication

I am new to AngularJS, and I am a little confused of how I can use angular-"ui-router" in the following scenario: I am building a web application which consists of two sections. The first section is the homepage with its login and signup views, and…
Ahmed Hashem
  • 4,448
  • 3
  • 18
  • 25
376
votes
3 answers

How to pass parameters using ui-sref in ui-router to controller

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router. Something like using the link below for transitioning the state to home with foo and bar parameters:
skip
  • 10,691
  • 27
  • 99
  • 146
333
votes
18 answers

How to reload the current state?

I'm using Angular UI Router and would like to reload the current state and refresh all data / re-run the controllers for the current state and it's parent. I have 3 state levels: directory.organisations.details directory.organisations contains a…
Holland Risley
  • 6,879
  • 8
  • 22
  • 32
174
votes
3 answers

What is the difference between $routeProvider and $stateProvider?

Please explain the difference between $routeProvider and $stateProvider in AngularJS. Which is best practice?
YYY
  • 3,102
  • 4
  • 16
  • 20
154
votes
14 answers

Angular - ui-router get previous state

Is there a way to get the previous state of the current state? For example I would like to know what the previous state was before current state B (where previous state would have been state A). I am not able to find it in ui-router github doc…
Mihai H
  • 3,141
  • 4
  • 21
  • 31
147
votes
2 answers

AngularJS ui router passing data between states without URL

I am facing this problem of passing data between two states without exposing the data in the url, it's like user cannot really directly land on this state. For example. I have two states "A" and "B". I am doing some server call in state "A" and…
vijay tyagi
  • 2,197
  • 3
  • 17
  • 30
138
votes
9 answers

AngularJS UI Router - change url without reloading state

Currently our project is using default $routeProvider, and I am using this "hack", to change url without reloading page: services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) { …
vuliad
  • 2,042
  • 3
  • 13
  • 15
123
votes
14 answers

How to send and retrieve parameters using $state.go toParams and $stateParams?

I am using AngularJS v1.2.0-rc.2 with ui-router v0.2.0. I want to pass the referrer state to another state so I use the toParams of $state.go like so: $state.go('toState', {referer: $state.current.name}); According to the docs, this should populate…
gwhn
  • 2,723
  • 4
  • 21
  • 26
121
votes
7 answers

`ui-router` $stateParams vs. $state.params

With ui-router, it's possible to inject either $state or $stateParams into a controller to get access to parameters in the URL. However, accessing parameters through $stateParams only exposes parameters belonging to the state managed by the…
Merott
  • 6,527
  • 6
  • 32
  • 50
120
votes
6 answers

How to pass an object into a state using UI-router?

I'd like to be able to transition to a state and a pass an arbitrary object using ui-router. I'm aware that usually $stateParams is used, but I believe this value is inserted into the URL, and I don't want users to be able to bookmark this data. I'd…
eddiec
  • 7,598
  • 5
  • 32
  • 36
120
votes
3 answers

Injecting $state (ui-router) into $http interceptor causes circular dependency

What I'm trying to achieve I would like to to transition to a certain state (login) in case an $http request returns a 401 error. I have therefore created an $http interceptor. The problem When I am trying to insert '$state' into the interceptor I…
NicolasMoise
  • 7,171
  • 10
  • 42
  • 65
111
votes
7 answers

Injecting $scope into an angular service function()

I have a Service: angular.module('cfd') .service('StudentService', [ '$http', function ($http) { // get some data via the $http var path = 'data/people/students.json'; var students = $http.get(path).then(function (resp) { …
chris Frisina
  • 17,689
  • 19
  • 75
  • 154
108
votes
2 answers

Difference between $state.transitionTo() and $state.go() in Angular ui-router

In AngularJS, I see sometimes we use $state.transitionTo() and sometimes we use $state.go(). Can anyone tell me how they differ and when one should be used over the other?
Barcelona
  • 2,042
  • 2
  • 19
  • 33
103
votes
14 answers

Set Page title using UI-Router

I am migrating my AngularJS based app to use ui-router instead of the built in routing. I have it configured as shown below .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider …
user1625066
1
2 3
99 100