I have .when('/center', '/center/question')
in my angular web app.
When I type '/center'
in my browser it will redirect to '/center/question'
as I expect but when I click the <a ui-sref="center" href="#/center"></a>
, it won't redirect and just stay on the url '/center'
.
There is no error in my console and I don't know why.
I see one similar issue here Angular UI-Router $urlRouterProvider .when not working anymore.I try the answer but it still don't work for me.
Here is my coffeescript code:
whenConfig = ['$urlRouterProvider', ($urlRouterProvider) ->
# default url config
$urlRouterProvider
.otherwise '/center'
.when '/center', '/center/question'
]
stateConfig = ['$stateProvider', ($stateProvider) ->
# nested url config
capitalize = (s)->
s[0].toUpperCase() + s[1..]
mainConfig = ({
name: name
url: "/#{name}"
templateUrl: "templates/#{name}.html"
controller: "#{capitalize name}Ctrl"
} for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat'])
centerConfig = ({
name: "center.#{name}"
url: "/#{name}?page"
templateUrl: "templates/center/#{name}.html"
controller: "Center#{capitalize name}Ctrl"
resolve:
thead: (CenterService) ->
CenterService.getThead @self.name
data: (CenterService, $stateParams) ->
CenterService.fetchItems @self.name, $stateParams.page
} for name in ['question', 'answer', 'comment', 'article'])
for singleConfig in mainConfig
$stateProvider.state singleConfig
for childConfig in centerConfig
$stateProvider.state childConfig
]
app.config whenConfig
app.config stateConfig
A ui-sref is a directive, and behaves similar to an html href . Instead of referencing a url like an href , it references a state. The ui-sref directive automatically builds a href attribute for you ( <a href=...> </a> ) based on your state's url.
ui-sref-active can live on the same element as ui-sref / ui-state , or it can be on a parent element. If a ui-sref-active is a parent to more than one ui-sref / ui-state , it will apply the CSS class when any of the links are active.
The ui-router is effective for the larger application because it allows nested-views and multiple named-views, it helps to inherit pages from other sections. In the ngRoute have to change all the links manually that will be time-consuming for the larger applications, but smaller application nrRoute will perform faster.
The otherwise with $urlRouterProvider will redirect all the other routes to the home page. In practical, you will show an 404 template for this one. You can replace template by tempateUrl if you want to separate the HTML template. // app.jsapp.config(function($stateProvider, $urlRouterProvider){
There is a new working plunker (extending the Angular UI-Router $urlRouterProvider .when not working *anymore*), which should be working with the version 0.2.13+
Until version 0.2.12-
we could use $urlRouterProvider.when()
, suggested in documenation (small cite):
How to: Set up a default/index child state
...
if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:
$urlRouterProvider.when('/home', '/home/index');
So this was solution shown in the Q & A mentioned above:
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider
.when('/app/list', ['$state', 'myService', function ($state, myService) {
$state.go('app.list.detail', {id: myService.Params.id});
}])
.otherwise('/app');
}];
...
app.config(whenConfig)
Now - we cannot.
0.2.13
It is due to "FIX" (which I am simply not sure about), mentioned in the release 0.2.13
Bug Fixes
$state:
- ...
- Avoid re-synchronizing from url after .transitionTo (b267ecd3, closes #1573)
And here is the new code added in the urlRouter.js:
if (lastPushedUrl && $location.url() === lastPushedUrl)
// this line stops the corrent .when to work
return lastPushedUrl = undefined;
lastPushedUrl = undefined;
This piece of code is optimizing/fixing some other issue ... but also, turning off the .when()
functionality
As already mentioned, this brand new plunker shows the way with version 0.2.13+. We just have to listen to state change, and if the state is "app.list" we can go to its detail with some id...
var onChangeConfig = ['$rootScope', '$state',
function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (toState.name === "app.list") {
event.preventDefault();
$state.go('app.list.detail', {id: 2});
}
});
}]
Check the plunker here
You can do this in your controller too. I think it is cleaner than listening to state changes.
Example:
.controller 'YourControllerName', ($scope, $state) ->
$state.go "center.question" if $state.is "center"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With