I have a project with 2 ui-view div:
<div ui-view='agent-station'></div>
<div ui-view='routingConfig'></div>
The main state login is successfully loaded in both:
$stateProvider
.state("login", {
url: "/login",
views: {
'agent-station': {
templateUrl: "login.html"
},
'routingConfig': {
templateUrl: "loginrc.html"
}
}
})
The problem arises when I click in one link which URL updates only one of the ui-views. The ui-view referenced by that URL is successfully updated, but the other ui-view becomes blank. So for example if I click on Test 1 AG link on the plunker example the Test 1 Agent station state is updated but the Login Routing Config state becomes a blank page.
My main suspicion is the following line:
$urlRouterProvider.otherwise("/login");
But I'm not sure why it becomes blank instead of showing the login page for Routing Config ui-view.
What could be the problem?
Here is my plunker:
Angular Named Views Test
Related
I'm just trying to setup a boilerplate for angular 1.5.9 with UI Router 1.0.0. I can display my parent state component within the ui-view, however when I nest states within my parent, my components aren't being injected into my ui-view.
This is my index.html
<body ng-app="app">
<ui-view></ui-view>
</body>
This is the main component
<div class="main-container">
<banner></banner>
<div ui-view='ui-view></div>
</div>
It is at this point where in I'm unable to inject anything into the ui-view.
This is my javascript file
$stateProvider
.state('app', {
url: '/',
component: 'main'
})
.state('app.login', {
url: '/login',
views: {
'ui-view': {
templateUrl: './app/login/login.html'
}
}
});
I'm not sure what I'm doing wrong, any help/direction to the right path would be appreciated.
EDIT
Additional Info that might be helpful
When I reference login as a parent state everything works as expected.
The login component is part of a separate module that I've included in my main module.
For nesting one child state in each parent component, there is no need to use named views as you did by adding a value of "ui-view" for the ui-view directive used in your main component template. Those named views are only required when you want to address more than one ui-view. Then you need to reference them by name.
In your sample, you will not see any content because you also don't target the named view correctly. There are some rules on how to address those named views if the named views are defined in a template which is not the root file. In that case you need to be more specific by referencing the ui-view with a "ui-view-name#state" syntax which would mean "ui-view#app" in your case.
But as already mentioned: In your simple case, just leave out the name for the ui-view and replace the views section in your state config with a plain template (or a component reference).
.state('app.login', {
url: '/login',
templateUrl: './app/login/login.html'
});
For details on nesting views, please have a look at the great sample apps in the ui-router docs.
So this one is really strange, I've no explanation as to why it worked the way it did. All I did was change the javascript file to the one below
$stateProvider
.state('login', {
url: '/login',
component: 'main'
})
.state('login.default', {
url: '/default',
component: 'login'
});
Instead of my parent having '/', changed it to '/login'. I'd be keen to know if someone knows the reason behind this behaviour.
$stateProvider
.state('app', {
url: '/',
templateUrl: path/to/main_component.html
})
.state('app.login', {
url: '/login',
views: {
'ui-view': {
templateUrl: './app/login/login.html'
}
}
});
When you are in app.login view(state) ui-view will be checked in its parent states template. If you don't have a template, it doesn't know where to render.
'ui-view':{} is targetted to its parent view.
'ui-view#':{} is targetted to the root component that is index.html
I'm currently trying ionic with the tab template. I got to the stage where I have a second-level tab in one of my main tabs.
.state('tab.leaderboard', {
url: "/leaderboard",
abstract:true,
views: {
'tab-leaderboard': {
templateUrl: "templates/tab-leaderboard.html",
controller: 'LeaderboardCtrl'
}
}
})
.state('tab.leaderboard.players', {
url: "/players",
views: {
'leaderboard-page': {
templateUrl: "templates/players-leaderboard.html",
controller: 'PlayersCtrl'
}
}
})
.state('tab.leaderboard.teams', {
url: "/teams",
views: {
'leaderboard-page': {
templateUrl: "templates/teams-leaderboard.html",
controller: 'TeamsCtrl'
}
}
})
If I use a direct link to my tab tab.leaderboard.teams, the url on the address bar changes, the bar title changes but the content is not loading and the current page from where I made the call stays opened.
However if I click on a link to tab.leaderboard.teams, it works perfectly.
Also if I switch the tabs on my html and make the teams tab first then it works for teams and not for players.
Note that if I go manually to the tabs then everything is fine. The problems happens only when I use href to open it.
Any help would be appreciated.
EDIT
I also used ng-click='func()' and then on my controller used $state.go('tab.leaderboard.teams') it didn't work. Same for ui-sref on my html. The url changes but not the content.
angular-ui-router is based on states. If you want to go from one state to another then you have to use "ui-sref" or "$state.go()"
for example :
<a ui-sref="stateName">to go page</a>
I debated a while on this but I got a Plunk that reproduce it.
I have a state "Contact" that get loaded by default. with $state.transitionTo
Inside that state I have some views, they all get loaded and everything work.
If I click to change the state to "Home" by default or by "ui-sref" and in the "Home" state/template I have ui-sref="contacts". When we click back to set the state to contacts it should work, but all the sub views are now not being called properly.
It seems that when ui-sref call the state this one behave differently that when it is loaded by default.
Why $state.transitionTo(''); seems to work differently than ui-sref.
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /
$urlRouterProvider.otherwise("/")
$stateProvider
.state('home', {
templateUrl: 'home.html',
controller: function($scope){
}
})
.state('contacts', {
templateUrl: 'contacts.html',
controller: function($scope){
}
})
.state('contacts.list', {
views:{
"":{
template: '<h1>Contact.List Working wi no Data defined.</h1>'
},
"stateSubView":{
template: '<h2>StateSubView Working</h2>'
},
"absolute#":{
template: '<h2>Absolute item</h2>'
}
}
});
});
myapp.controller('MainCtrl', function ($state) {
$state.transitionTo('contacts.list');
})
Q2:
Why is the Absolute tag that is under contact work when I add the view in the Index, but is not working when it is inside the contact.html file. Absolute reference work only with the Index and not if called everywhere?
"absolute#":{
template: '<h2>Absolute item</h2>'
}
I saw that in index.html you have an empty ui-view tag. What do you expect to go there? I think you can not do this. The router just doesn't know with which state (home or contacts) it should replace. Apparently it picks the second one (contacts). I'd suggest to put url: '/' in the home state and you'll see the difference.
This is for sure one issue.
Other than that:
You can't simply access views from contacts.list in contacts afaik.
The empty ui-view work as a wild card and can be use to switch across multiple route even if we have nested element. But if we have a nested view contact.list it can only be access if we put the whole path in ui-sref="contacts.list" because the list child of contact cannot be access only by using ui-sref="contacts"
In my app I have this server-generated link:
http://localhost:3000/people#/users
When I click on it I get redirected to the following HTML page with Angular UI-Router script:
<a ui-sref="users">Users</a>
<a ui-sref="invitations">Invitations</a>
<div ui-view></div>
The problem is - users state does not get triggered automatically on page load. I need to manually click on it and only then the corresponding UI-Router state gets triggered.
Here's my config file:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
})
})
There is a working plunker
$urlRouterProvider.otherwise('/users');
// States
$stateProvider
.state('users', {
url: "/users",
templateUrl: "assets/partials/users.html"
});
The $urlRouterProvider.otherwise('/users'); will redirect to defined page when none is provided
This links in index.html will work as well
href
<a href="#/users">
ui-sref
<a ui-sref="users">
Check it here
If that should be more dynamic, please check the:
Angular - Dynamically Choose Starting State
In case, that our issue is that application is working with this init page:
http://domain/app/
but not without the trailing slash
http://domain/app
We have to do some redirection on a server. (Redirection is needed to make all the relative path properly working) there are some how to with asp.net mvc
Browser address will not be displayed correctly in ui-route
my requirement is:
index.html
-- /login
-- /main/tab1
-- /main/tab2
-- /userinfo
And the ui will be like:
header: logo, userinfo
left-nav: switch tab1/tab2/tabN
right content: ui-view to change, and multi sub ui-view,
And UI detail:
login will be a independent page, no header, left-nav, right content
main/tab will only change the right content
/userinfo will replace the left-nav and right content to some userinfo page, remain the header, of course using ui-view
I've seen the ui-route demo, but follow the demo, I don't know how to build the route config to what I want, so could any one help me ? The ui-route config is a little complex.....
If my url define is not perfect, please help me improve the url structure, thanks
If you have seen the demo and understood it, this should make sense:
.state('index', {
url: '/',
templateUrl: //your index.html template path,
controller: // your controller if any for index page
})
.state('index.login', {
url: '/login',
templateUrl: // your login template,
controller: // controller for login page
})
.state('index.mainTab1', {
url: '/main/tab1',
templateUrl: // your tab1 template,
})
add the other states in the same manner and you should be ready to go.