I have a question about the Angular UI router when I am using multiple named views in nested states. Basically I have an abstract state with a template that points to two named views. Those two named views are defined in both the sub states. I want to keep the URL fixed to /test.
When transitioning to either of the sub states, I see the view corresponding to the first sub state only. Why is that? I really hope someone can clarify the concept for me so I can learn
JSFiddle is here: https://jsfiddle.net/adeopura/e2c5n14o/16/
angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state('test', {
abstract: true,
url: '/test',
views: {
'main': {
template: '<h1>Hello!!!</h1>' +
'<div ui-view="view1"></div>' +
'<div ui-view="view2"></div>'
}
}
})
.state('test.subs1', {
url: '',
views: {
'view1': {
template: "Im 1View1"
},
'view2': {
template: "Im 1View2"
}
}
})
.state('test.subs2', {
url: '',
views: {
'view1': {
template: "Im 2View1"
},
'view2': {
template: "Im 2View2"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('test.subs1');//I see the data corresponding to the test.subs1
// Assume here that there are lots of different state transitions in between unrelated to the test1 state
$state.transitionTo('test.subs2');//I still see the data corresponding to the test.subs1, why is that?
}]);
It's actually the order by which you've defined them. Swap the order so that you define test.sub2 before test.sub1 and you'll see it'll start # test.sub2.
I think it's because you don't have a url assigned to either of the sub-states. I would try giving them their own url paths, and seeing if you can then reference the states that way.
One of my colleagues explained what is happening in this case. Explained as below:
state.transitionTo('test.subs2') causes the application to go to state 'test.subs2'
Once in state 'test.subs2', the URL is changed to /test
This causes the Angular UI Router to fire a change to the appropriate state.
The appropriate state is the first one that matches the URL /test, which would be the state 'test.subs1'
Hope this helps someone
Related
Is it possible to simply replace a state definition with a new one?
The use case I have is that one module defines the state, and I'd like to be able to replace that state definition from a different module. Basically the initial definition is a "default" definition, and I'd like to have the possibility to customize the state from a different module.
I realize that doing this at config time could result in a race condition on which module defines it first. I looked into the possibility of doing it at run-time, but couldn't get it working.
I can accomplish what I want by creating entirely new states, but I would like to use the same URL from the original state.
Edit:
To further clarify what I am trying to accomplish...
Please consider the following code:
angular.module('module1', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('root', {
url: '',
abstract: true,
template: '<div class="layout sub" ui-view="sub"></div>'
})
.state('root.sub1', {
url: '/sub1',
views: {
'sub#root': {
template: '<p>Default sub state 1</p>'
}
}
});
}]);
angular.module('module2', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('root.sub1', {
url: '/sub2',
views: {
'sub#root': {
template: '<p>Customized sub state 1</p>'
}
}
});
}]);
Which of course gives "Error: State 'root.sub1'' is already defined"
Ok, so as I was putting together a plnkr demo of what I tried next, I found that it actually works if you use $state.get and update it.
angular.module('module2', ['ui.router'])
.run(['$state', function($state){
var state = $state.get('root.sub1');
if(state && state.views && state.views['sub#root']){
state.views['sub#root'].template = '<p>Customized sub state 1</p>';
}
}]);
Plnkr: http://plnkr.co/edit/xLdCgjeM33z2Hf5CHfZR
Edit:
I figured out that it wasn't working in my app because I didn't define the view I wanted to override in the original state.
Example (doesn't work):
angular.module('module1', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('root', {
url: '',
abstract: true,
template: '<div class="layout sub" ui-view="sub"></div>'
})
.state('root.sub1', {
url: '/sub1',
views: {
}
});
}]);
angular.module('module2', ['ui.router'])
.run(['$state', function($state){
var state = $state.get('root.sub1');
if(state && state.views){
state.views['sub#root'] = { template: '<p>Customized sub state 1</p>' };
}
}]);
it seems like there is no way to overwrite it for < v1, unless you need to rewrite the decorator for the stateProvider.
for v1, there is a new method deregister for that purpose
https://github.com/angular-ui/ui-router/commit/44579ecbafe15ad587dc341ba4a80af78b62bdaa
I tried using $state.get(view) and overwrite the value, but the controller and template are not registered properly because the built-in decorator is using stateBuilder property to generate the controller and template.
check https://github.com/angular-ui/ui-router/blob/0.3.2/src/state.js
The best approach I've found to solving this is to:
Create a 'root' controller (ie. a state that loads prior to other states)
.state('root' , { url: ':/root_path', controller: 'rootController' ..other stuff here })
In rootController, you decide what to do with the route:
db.call(pull-root-key-from-db) .then(function(root_response) {
if (root_response.type == "user") {
$state.go("user.dashboard") })
Sorry for formatting, I'm mobile :)
I have done this many time in pure angular.js with ng-router but dont know whats wrong with it here in ionic using ui-router
I want to have some $scope properties/objects on parent scope that i can read and modify from child scopes and they can reflect every where (without factory), so that refreshing between states doent loose data and i have common place to keep it
What i have tried:
I first tried whole app routes to be wrapped inside a div
<div ng-controller="appCtrl">
<div ui-view></div>
</div>
This doesn't helped so i made app state as an abstract state and controller and now all states inherit from it
.state('app', {
url: "/app",
abstract: true,
controller : 'appCtrl',
templateUrl: "templates/app.html"
})
.state('app.login', {
url: "/login",
parent:"app",
//abstract: true,
controller : 'loginCtrl',
templateUrl: "templates/login.html"
})
.state('app.form', {
url: "/form/:selectedForm",
//abstract: true,
//reload:true,
parent:"app",
controller : 'formCtrl',
templateUrl: "templates/selected-form.html"
})
Problem while trying:
Problem is that lets say i have a property $scope.selectedForm=21; on appCtrl , i can access it correctly(shows 21 in all states) but cant modify it ($scope.selectedForm=22;) it doesnt reflects back
Dummy cotrollers
appctrl(parent):
.controller('appCtrl', function ($scope) {
$scope.InspectedForms = [];
$scope.currentForm= {}
$scope.selectedForm=21;
})
formCtrl(child):
.controller('formCtrl', function ($scope, $stateParams, authService) {
$scope.selectedForm=22;
});
The answer was very obvious, how come I forgot about dot rule
Wasted my several hours, want to post it as if anyone else gets stuck to this kind of problem
Changes are only reflected on objects and array and not on primitive types
Parent:
app.controller('Parentctrl',function($scope){
$scope.parentprimitive = "some primitive value"
$scope.parentobj = {};
$scope.parentobj.parentproperty = "somevalue";
});
Child:
app.controller('ctrlChild',function($scope){
$scope.parentprimitive = "this will NOT modify the parent"
$scope.parentobj.parentproperty = "this WILL modify the parent";
});
Here are details about the inheritance
I want to make tabs with tab-content.
tab-content has it's own view.
Here is code sample
(function () {
angular
.module('infirma.konfiguracja', ['ui.router'])
.config(routeConfig)
;
routeConfig.$inject = ['$stateProvider'];
function routeConfig($stateProvider) {
$stateProvider
.state('app.konfiguracja', {
url: 'konfiguracja/',
views: {
'page#app': {
templateUrl: 'app/konfiguracja/lista.html',
controller: 'konfiguracjaListaCtrl',
controllerAs: 'vm'
}
},
ncyBreadcrumb: {label: "Ustawienia systemu"}
})
.state('app.konfiguracja.dzial', {
url: '{dzial:.*}/',
views: {
'dzial#app.konfiguracja': {
templateUrl: 'app/konfiguracja/dzial.html',
controller: 'konfiguracjaDzialCtrl',
controllerAs: 'vm'
}
},
ncyBreadcrumb: {label: "{{vm.nazwaDzialu}}"}
})
;
}
})();
I want to mark selected tab which is in parent state (app.konfiguracja).
Problem is that when entering url like /konfiguracja/firmy/ there is no $stateParams.dzial in app.konfiguracja controller
How to fix it?
I created working example for your scenario here. I would say, that there at least two ways.
The first, general way, how we should use the UI-Router and its selected params in parent views (to mark selected tab/link), should be with a directive **ui-sref-active**:
ui-sref-active="cssClassToBeUsedForSelected"
So this could be the usage:
<a ui-sref="app.konfiguracja.dzial({dzial: item.id})"
ui-sref-active="selected"
>{{item.name}}</a>
The second approach (my preferred) would be to use a reference Model, created in parent $scope, and filled in a child:
.controller('konfiguracjaListaCtrl', ['$scope', function ($scope, )
{
$scope.Model = {};
}])
.controller('konfiguracjaDzialCtrl', ['$scope', function ($scope)
{
$scope.Model.dzial = $scope.$stateParams.dzial;
// we should be nice guys and clean after selves
$scope.$on("$destroy", function(){ $scope.Model.dzial = null });
}])
usage could be then like this
<span ng-if="item.id == Model.dzial">This is selected</span>
How is the second approach working? check the DOC:
Scope Inheritance by View Hierarchy Only
Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).
It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.
Check that all in action here
I am trying to implement a tabbed interface akin to this: http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx
However, on my state change, the controller of the parent state seems to be reinitialized (or a new $scope is created?)
There are two major differences between the example plunkr and my project.
I use a parameter in my url
I resolve different data on the state change for each tab (removing this does nothing).
I am not using ui-bootstrap for the tabs but am triggering a $state.go on ng-click of the tab.
I experimented with the above plunkr and added a dropdown to the parent state; however the parent dropdown values seem to persist when the child states change. I am not too concerned with the child states and will probably end up using sticky states anyways.
I am using wondering if I am doing something fundamentally wrong before I try and add another package to my project.
here is a rough plunkr of what I am trying to do: http://plnkr.co/edit/TmRQN5K8OEc8vHG84G5z?p=preview
here is my config:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.when('/main',
function ($state) {
$state.go('parent.tab1', { main_id: '00008' });
});
$stateProvider
//Handle States Here
.state('parent', {
abstract: true,
url: '/parent?main_id',
templateUrl: "main.html",
controller: 'Main_Controller',
resolve: {
//Calls to API
}
})
.state('parent.tab1', {
url: "/applications",
templateUrl: "tab1.html",
controller:'Tab1Ctrl',
resolve: {
//Get some different data from an API
},
})
.state('parent.tab2', {
url: "/phasing",
templateUrl: "tab2.html",
controller: 'Tab2Ctrl',
resolve: {
//More API Data
}
});
});
I've made your plunker working here
$urlRouterProvider
//.when('/main',
.when('',
function ($state) {
$state.go('parent.tab1', { main_id: '00008' })
});
Also there is a change in main.html, which does not use ng-controller any more. We just have to pass the proper Controller name
$stateProvider
//Handle States Here
.state('parent', {
abstract: true,
url: '/parent?main_id',
templateUrl: "main.html",
controller: 'MainController',
resolve: {
//Calls to API
}
})
...
// MainController
// these two names should fit
app.controller("MainController", function($rootScope, $scope, $state) {
So now, it is working, and let's discuss
I use a parameter in my url
I resolve different data on the state change for each tab (removing this does nothing).
I am not using ui-bootstrap for the tabs but am triggering a $state.go on ng-click of the tab.
Quick answers:
parameter in url exists, e.g. #/parent/tab1?main_id=8000
resolve is trigerred for each controller if controller is reinstantiated. That happens when we navigate to that state (among tabs)
no need to use $state.go, I used:
a snippet:
<a ui-sref="parent.tab1({main_id:'00008'})"> go to tab1 with main_id '00008'</a><br />
<a ui-sref="parent.tab2({main_id:'00008'})"> go to tab2 with main_id '00008'</a><br />
<a ui-sref="parent.tab3({main_id:'00008'})"> go to tab3 with main_id '00008'</a><br />
Check it here
I have an Angular SPA that presents a variety of recommendation lists, and a Google Map of locations, based on different cuts of some restaurant data (see m.amsterdamfoodie.nl). I want each of these lists to have their own URL. In order for Google to crawl the different lists I use <a> tags for the offcanvas navigation.
At present the <a> tag causes a view refresh, which is very noticeable with the map.
I can prevent this using ng-click and $event.preventDefault() (see code snippets below), but then I need to implement a means of updating the browser URL.
But in trying Angular's $state or the browser's history.pushstate, I end up triggering state changes and the view refresh...!
My question is therefore how can I update a model and the URL, but without refreshing the view? (See also Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?)
I have experimented with a lot of approaches and currently have this html
Budget
In the controller:
this.action = ($event) ->
$event.preventDefault()
params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)
# seems to cause a view refresh
# history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);
# seems to cause a view refresh
# $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}
updateModel(...)
And, what is I think is happening is that I am triggering the $stateProvider code:
angular.module 'afmnewApp'
.config ($stateProvider) ->
$stateProvider
.state 'main',
url: '/'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
.state 'criteria',
url: '/criteria/:criteria/:q'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
One possible clue is that with the code below if I load e.g. http://afmnew.herokuapp.com/criteria/cuisine/italian then the view refreshes as you navigate, whereas if I load http://afmnew.herokuapp.com/ there are no refreshes, but no URL updates instead. I don't understand why that is happening at all.
This is an example of the way to go if I understand correctly:
$state.go('my.state', {id:data.id}, {notify:false, reload:false});
//And to remove the id from the url:
$state.go('my.state', {id:undefined}, {notify:false, reload:false});
From user l-liava-l in the issue https://github.com/angular-ui/ui-router/issues/64
You can check the $state API here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
Based on our previous discussions, I want to give you some idea, how to use UI-Router here. I believe, I understand your challenge properly... There is a working example. If this not fully suites, please take it as some inspiration
DISCLAIMER: With a plunker, I was not able to achieve this: http://m.amsterdamfoodie.nl/, but the principle should be in that example similar
So, there is a state definition (we have only two states)
$stateProvider
.state('main', {
url: '/',
views: {
'#' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
},
'right#main' : { templateUrl: 'tpl.right.html',},
'map#main' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'list#main' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'map' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
}];
This would be our main tpl.layout.html
<div>
<section class="main">
<section class="map">
<div ui-view="map"></div>
</section>
<section class="list">
<div ui-view="list"></div>
</section>
</section>
<section class="right">
<div ui-view="right"></div>
</section>
</div>
As we can see, the main state does target these nested views of the main state: 'viewName#main', e.g. 'right#main'
Also the subview, main.criteria does inject into layout views.
Its url starts with a sign ^ (url : '^/criteria/:criteria/:value'), which allows to have / slash for main and not doubled slash for child
And also there are controllers, they are here a bit naive, but they should show, that on the background could be real data load (based on criteria).
The most important stuff here is, that the PARENT MainCtrl creates the $scope.Model = {}. This property will be (thanks to inheritance) shared among parent and children. That's why this all will work:
app.controller('MainCtrl', function($scope)
{
$scope.Model = {};
$scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];
$scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
$scope.Model.list = []
$scope.Model.data
.sort( $scope.Model.randOrd )
.forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
$scope.Model.selected = $scope.Model.list[0];
$scope.Model.select = function(index){
$scope.Model.selected = $scope.Model.list[index];
}
})
This should get some idea how we can use the features provided for us by UI-Router:
Absolute Routes (^)
Scope Inheritance by View Hierarchy Only
View Names - Relative vs. Absolute Names
Check the above extract here, in the working example
Extend: new plunker here
If we do not want to have map view to be recreated, we can just omit that form the child state def:
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
// 'map' : {
// templateUrl: 'tpl.map.html',
// controller: 'MapCtrl',
//},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
Now our map VIEW will be just recieving changes in the model (could be watched) but view and controller won't be rerendered
ALSO, there is another plunker http://plnkr.co/edit/y0GzHv?p=preview which uses the controllerAs
.state('main', {
url: '/',
views: {
'#' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
controllerAs: 'main', // here
},
...
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
controllerAs: 'list', // here
},
},
})
and that could be used like this:
<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>
The last plunker is here
you can use scope inheritance to update url without refreshing view
$stateProvider
.state('itemList', {
url: '/itemlist',
templateUrl: 'Scripts/app/item/ItemListTemplate.html',
controller: 'ItemListController as itemList'
//abstract: true //abstract maybe?
}).state('itemList.itemDetail', {
url: '/:itemName/:itemID',
templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
controller: 'ItemDetailController as itemDetail',
resolve: {
'CurrentItemID': ['$stateParams',function ($stateParams) {
return $stateParams['itemID'];
}]
}
})
if child view is inside parent view both controllers share same scope.
so you can place a dummy (or neccessary) ui-view inside parent view which will be populated by child view.
and insert a
$scope.loadChildData = function(itemID){..blabla..};
function in parent controller which will be called by child controller on controller load. so when a user clicks
<a ui-sref="childState({itemID: 12})">bla</a>
only child controller and child view will be refreshed. then you can call parent scope function with necessary parameters.
The short answer ended up being do not put the map inside a view that changes. The accepted answer provides a lot more detail on how to structure a page with sub-views, but the key point is not to make the map part of the view but to connect its behaviour to a view that does change and to use a Controller to update the market icons.