I have an older app (Angular 1.5.3) and I would like to take advantage of angular-ui-router and components for a few of my pages.
Is it possible to use the old routeProvider in conjunction with the stateProvider that ui-router provides?
IE I would like to transition a few pages to use components here and there as I get time, while leaving the rest.
I am pretty sure using ng-view and ui-view I am having a hard time getting that to work (probably cause you are not supposed to do that). Does that mean I have to transition my entire project from routeProvider to stateProvider all at once?
Is it possible to use the old routeProvider in conjunction with the
stateProvider that ui-router provides?
Short answer
No. Similar structure but different syntax
Long answer
No, but ... You can easily convert ng-view to ui-view a.e. from $routeProvider to $stateProvider.
Consider example ng-view:
$routeProvider
.when('/Book/Add', {
template: '<div class="box" ng-class="classname">Add</div>',
controller: function($scope) {$scope.classname="add"}
})
.when('/Book/Error', {
templateUrl : 'error.html',
controller: 'ErrorController'
})
.otherwise({redirectTo: '/Book/Error'});
Consider example ui-view:
$stateProvider
.state('book', {
url: '/Book',
abstract: true,
templateUrl: 'views/Book.html'
})
.state('book.add', {
url: '/inbox',
template: '<div class="box" ng-class="classname">Add</div>',
controller: function($scope) {$scope.classname="add"}
})
.state('book.error', {
url: '/Error',
templateUrl : 'error.html',
controller: 'ErrorController'
})
$urlRouterProvider.otherwise(function ($injector, $location) {
return '/Book/Error';
});
Keep in mind that routing syntax will change too.
For example:
if ($state.current.name === 'login') {
$state.go('book.add', {});
}
Instead Add we will write <a ui-sref="book.add">Add</a>
And so on ......
As you can see, the syntax is a bit similar. I'm sure you will find a lot of references about power of $stateProvider. For example https://stackoverflow.com/a/21024270/1631379
Hope I answered on your question
I've had no luck with this particular issue. Everything I've looked up has to do with people having issues 'trying' to refresh the page instead of my issue where it's refreshing every time I go to a certain state. This ONLY happens in IE not chrome.
Code:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('box', {
templateUrl: templatePath + 'box.html',
controller: 'BoxController',
controllerAs: 'box',
url: '/Box/{folder:string}'
})
.state('compose', {
templateUrl: templatePath + 'compose.html',
controller: 'ComposeController',
controllerAs: 'compose',
url: '/Compose/{messageSentId:int}'
})
.state('view', {
templateUrl: templatePath + 'view.html',
controller: 'ViewController',
controllerAs: 'view',
url: '/Box/{folder:string}/{messageId:string}/{messageSentId:string}'
});
$urlRouterProvider.otherwise('/Box/');
});
The problem is with my compose state. If I go directly to that state like so:
vm.compose = function () {
$state.go('compose', { messageSentId: 0 }, { notify: true });
};
It works just fine. However, if I add a different number besides 0 and call from a different controller it does not work:
vm.reply = function() {
var id = Math.floor($stateParams.messageSentId);
$state.go('compose', { messageSentId: id }, { notify: true });
};
I thought maybe it was having issues because it thought id was a string and therefore didn't match to /Compose/{messageSentId:int} so I added the Math.floor() but that didn't help.
Something to note is that if I fire my compose function first and go to that state the reply function will work. However, if I attempt to navigate with my reply function first the page reloads.
Another thing that I can confirm is that my controller for that page and the page itself loads just fine. You can actually see the form pop up briefly. The problem is once the controller has loaded a refresh is triggered. No errors. No nothing. Simply fails in IE.
After many hours of research and having found nothing similar to my issue on the web I made a simple change. I moved my state change out of my controller and used ui-sref instead:
Code:
<div class="btn-group pull-right" ng-if="view.canReply()">
<a class="btn btn-primary" ui-sref="compose({messageSentId: view.replyMessageId})">
<i class="fa fa-reply"></i> Reply
</a>
</div>
Where 'view' is my controllerAs since I don't use $scope and I set my $stateparameter on the variable replyMessageId. Maybe this will help someone.
Well, I've implemented angularJS and I am calling different views which is being handled by $routeProvider . The problem is that for eg:
$routeProvider.
when('/prodDetails/:prodID', {
templateUrl: 'templates/productDetails.html',
controller: 'ProductController'
}).
Now, if I click on:
<a ng-href="#prodDetails/{{ prod.id }}">View Product</a>
The browser url will show prod.id in the url tab. How can I manipulate url to hide sensitive info in it.
Use Angular UI Router. it will solve your problem without doing anything. you can then pass parameter using params object given by angular-ui-router.
You can use angular ui router
You can achieve that by doing:
$stateProvider.
state('productDetail', {
url: '/prodDetails',
templateUrl: 'templates/productDetails.html',
controller: 'ProductController',
params: {
productId: 'defaultId'
}
})
And in the html:
<a ui-sref="productDetail({productId: prod.id})">View Product</a>
You can have access to the productId from the controller with the service $stateParams.
EDIT:
Let's say you have a encodeId and a decodeId functions:
<a ui-sref="productDetail({productId: encodeId(prod.id)})">View Product</a>
and in the controller:
app.controller(function($stateParams) {
var id = decodeId($stateParams.productId);
});
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.