To get even more detailed answers, we can/should observe the source code and check the documentation. Let me try to explain all three questions (and also cite from code and doc). 1. When do controllers get instantiated? Here we can observe the code of the ui-view directive: [$ViewDirective.$inject = \[‘$state’, ‘$injector’, ‘$uiViewScroll’, ‘$interpolate’\];][1] Controllers are … Read more
Solution here is to distinguish the names of the resolved data. Check this answer: angular ui-route state parent and resolve (nested resolves) And its plunker So in our case we would need this change in parent resolve: { dataParent: [‘$stateParams’, ‘ProfileService’, function ($stateParams, ProfileService) { var username = $stateParams.username; return ProfileService.getProfile(username); }] } and this … Read more
We need to use absolute view name, to precisely inform ui-router, where to (re-)place the child template. (check this example) Read more here: View Names – Relative vs. Absolute Names cite: // absolutely targets the unnamed view in root unnamed state. // <div ui-view/> within index.html “@” : { } So, the root view name … Read more
It’s probably bad practice to have two separate routes point to the same state, but nothing is keeping you from creating two different states that use the same resolutions/controller/template. $stateProvider .state(‘state1’, { url: “/:city/events/:id”, templateUrl: “partials/events.html”, controller: eventsCtrl }) .state(‘state2’, { url: “/events/:id”, templateUrl: “partials/events.html”, controller: eventsCtrl }); function eventsCtrl($scope){ // shared controller } Again, … Read more
Not fully sure what exactly you are searching for… because it could be a dynamic url matcher or just smart regex. Here is a plunker with working example. It in fact 1) only builds the regex from the passed list of names… 2) shows urlMatcher in action The answer here would be: use the UrlMatcher. … Read more
I am not sure if I do understand your goal 100%, but there is updated plunker, showing how we can work with nested views. Firstly, there is a $state defintion showing the nesting: $stateProvider .state(‘index’, { url: “https://stackoverflow.com/”, views: { ‘@’ : { templateUrl: ‘layout.html’, controller: ‘IndexCtrl’ }, ‘top@index’ : { templateUrl: ‘tpl.top.html’,}, ‘left@index’ : … Read more
The otherwise() rule is only invoked when no other route matches. What you really want is to intercept the $stateChangeError event, which is what gets fired when something goes wrong in a state transition (for example, a resolve failing). You can read more about that in the state change event docs. The simplest implementation for … Read more
$scope is not the model, its a reference to a model, glue in between the data & the view. If $scopes in two, or more, controllers need to share one model/state/data use a singleton object instance by registering a angular service. That one service/factory can be injected into as many controllers as you like, and … Read more
In general I would say, let’s redirect ($state.go()) only if needed. In other cases, get out from the event listener: if (toState.name === ‘login’ ){ // doe she/he try to go to login? – let him/her go return; } if(Auth.isLoggedIn()){ // is logged in? – can go anyhwere return; } // else $state.go(‘login’) This is … Read more
This is my previous answer for some other question, but it should be good to help you You can do it by using angular $routeChangeStart $routeChangeStart Broadcasted before a route change. At this point the route services start resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the … Read more