i am developing a site in AngularJs with ui-router. I have a situation where on button click i need to change and load three state into that page and the three looks like the image .Please help me how can i load multiple pages. in one page
You need to configure your router config like this:
$stateProvider
.state("state1", {
url: "/url1",
controller: "FirstController",
views: {
view1: { templateUrl: "templates/template1.html" },
view2: { templateUrl: "templates/template2.html" },
view3: { templateUrl: "templates/template3.html" }
}
}).state("state2", {
url: "/url2",
controller: "SecondController",
views: {
view1: { templateUrl: "templates/template4.html" },
view2: { templateUrl: "templates/template5.html" },
view3: { templateUrl: "templates/template6.html" }
}).state("state3", {
url: "/url3",
views: {
view1: {
templateUrl: "templates/template7.html",
controller: "ThirdController"
},
view2: {
templateUrl: "templates/template8.html",
controller: "FourthController"
},
view3: {
templateUrl: "templates/template9.html",
controller: "FifthController"
}
});
So you need to provide information about every view in every state: templates that your views use, controllers, resolves, etc. Then you need to give names to your ui-view containers (in this example view1, view2, view3). That's how ui-router will know what templates and controllers it needs to use for every view container.
And your view will look similar to this:
<section class="sidebar left">
<div ui-view="view1"></div>
</section>
<section class="sidebar right login">
<div ui-view="view2"></div>
</section>
<div ui-view="view3"></div>
Related
I'm trying to render templates inside a main view. Here is the Feed, which is my main view.
<ion-view view-title="Feed">
<ion-content scroll="true">
<div ui-view="opportunity"></div>
</ion-content>
</ion-view>
I'm trying to render Opportunity inside my Feed. Here is the code for Opportunity. The template is named as card-opportunity.html
<h1>Opportunity Details</h1>
In the app.js I have included the views for opportunity. I'm using $stateProvider
$stateProvider
.state('app.feed', {
url: '/feed',
views: {
'menuContent': {
templateUrl: 'templates/feed.html',
controller: 'FeedCtrl'
},
'network' : {
templateUrl: 'templates/card-network.html',
controller: 'CardNetworkCtrl'
},
'opportunity' : {
templateUrl: 'templates/card-opportunity.html',
controller: 'CardOpportunityCtrl'
}
}
});
Not sure what I'm missing. There is no error in the console. I'm using ionic: 3.7.0
https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
says this:-
"Child states will load their templates into their parent's ui-view."
I am not sure if a view will load if you give its ui-sref in its sibling view. Why don't you create a new state for the opportunity ,so that it loads as a child of the feed.
$stateProvider
.state('app.feed', {
url: '/feed',
views: {
'menuContent': {
templateUrl: 'templates/feed.html',
controller: 'FeedCtrl'
},
'network' : {
templateUrl: 'templates/card-network.html',
controller: 'CardNetworkCtrl'
}
}
})
.state('app.feed.opportunity',{
url: '/opportunity',
views: {
'opportunity' : {
templateUrl: 'templates/card-opportunity.html',
controller: 'CardOpportunityCtrl'
}
}
});
What i'm trying to do:
<div id="chat">
<div ui-view>Here should people.htm be loaded</div>
<div ui-view="chat">Here is current person chat peopleChat.htm</div>
</div>
I already managed a nested structure. If "chat" is child of "people" - no problem.
But I want em to remain on the same level, but be in a different state. Something like.
$stateProvider
.state('people', {
url: '/people',
templateUrl: ...,
controller: ...
})
.state('people.chat', {
views: {
'chat': {
url: '/:personId',
templateUrl: ...,
controller: ...
}
}
})
My unnamed view is filling with data. After unnamed view is filling, i'm calling $state.go('people.chat', { personId: vm.personId });
But nothing is happening.
Name both views and you are ok:
<div id="chat">
<div ui-view="main">Here should people.htm be loaded</div>
<div ui-view="chat">Here is current person chat peopleChat.htm</div>
</div>
And your controler:
$stateProvider
.state('people', {
views: {
'main#': {
url: '/people',
templateUrl: ...,
controller: ...
}
}
})
.state('people.chat', {
views: {
'chat#': {
url: '/:personId',
templateUrl: ...,
controller: ...
}
}
})
Basically the # absolute targets the view.
Meaning if you use it like chat# it targets the named view chat in the root html.
If you want to nest the views you can use chat#people
which targets the ui-view loaded in the template that people state has injected.
Plunker
I have an app which has three views (ui-view using Angular ui-router):
header, sidebar and content.
my index.html looks like this: (I omitted the actual classes for clearness)
<body>
<div ui-view="header" class="..."></div>
<div class="page-container">
<div ui-view="sidebar" class="..."></div>
<div class="page-content">
<div ui-view="content"></div>
</div>
</div>
</div>
</body>
This pattern works well with pages that have the header and sidebar.
But I have some pages that I don't want to display the header and sidebar, for example a login page that should fit on all page.
For this kind of pages I need something like:
ui-view which should look like this:
<body>
<div ui-view="content"></div>
</body>
So it won't be nested and under the other views <div>'s and affected by their classes.
I have some solutions in mind, but none of them gave me a good enough UX.
I tried adding <ng hide> to the header and sidebar depending on the state. It worked but there was annoying flickering (that I couldn't eliminate with ng-cloak for some reason..)
To make things more clear, here is an example of two states , one is "one pager" and the other is full page with header and sidebar:
.state('Login', {
url: '/login',
views: {
'content': {
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('Users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
I also think using nested views, but not sure whether this is the right approach.
Maybe try using nested states, ie:
.state('app', {
url: '/app',
abstract: true,
templateUrl: './../templates/treeViewTemplate.html'
})
.state('login', {
url: '/login',
templateUrl: './../templates/login.html',
controller: 'LoginCtrl'
})
.state('app.users', {
url: '/users',
views: {
'header': {
templateUrl: './../templates/header.html',
controller: 'HeaderCtrl'
},
'sidebar': {
templateUrl: './../templates/sidebar.html',
controller: 'SidebarCtrl'
},
'content': {
templateUrl: './../templates/users.html',
controller: 'UsersCtrl'
}
}
})
In your root abstract state you define a template for 3 view-layout. login state will instead take whole display.
I am trying to create a page where I have a fixed header and changing content, but the fixed header depends on the state route, I would also like the header and the content to have different controllers and templates.
For example for the URL
/user/:userId/profile
I would like the header to display the user name, so it needs to know the value of :userId.
I can achieve this by used named views and ui-router, but here us code duplication that I want to avoid
$stateProvider
.state('profile', {
url: '/user/:user_id/profile',
views: {
'header': {
templateUrl: 'user-header.html',
controller: 'HeaderController'
},
'info': {
templateUrl: 'profile.html',
controller: 'ProfileController'
}
}
})
.state('friends', {
url: '/user/:user_id/friends',
views: {
'header': {
templateUrl: 'user-header.html',
controller: 'HeaderController'
},
'info': {
templateUrl: 'friends.html',
controller: 'FriendsController'
}
}
})
<section id="startup-header" ui-view="header">
</section>
<section ui-view="info">
</section>
How can I define the header once, but have the content defined per content type.
I hope I formulate the questions in a way it's clear what I want to achieve.
Ok. Let's try this:
You can create a parent page with your header for user's profile that will be contain nested child pages:
<div id="header">
<a ui-sref="userPage.profile">Profile</a>
<a ui-sref="userPage.friends">Friends</a>
......
</div>
<div ui-view>
</div>
Read more about ui-sref ditective here
And in $stateProvider something like:
$stateProvider.state('userPage.profile', {
url: '/user/:user_id/profile',
templateUrl: 'profile.html',
controller: 'ProfileController'
}
}).state('friends', {
url: '/user/:user_id/friends',
templateUrl: 'friends.html',
controller: 'FriendsController'
}
})
I am using angular UI-Router. I have the following in my route config
.config(function config($stateProvider) {
$stateProvider.state('newsFeedView', {
url: '/newsFeed',
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
data: {
pageTitle: 'News Feed'
}
})
.state('tradeFeedView', {
url: '/tradeFeed',
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
data: {
pageTitle: 'Trade Feed'
}
})
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
'tradeFeed': {
url: "",
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
},
'newsFeed': {
url: "",
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
}
},
templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
});
})
In my index page I just invoke the view using:
<div class="container" ui-view></div>
In My bulletinBoard.html i want to have a nested view:
<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>
For the /newsFeed page and the /tradeFeed pages this works perfectly but for the bulletin board i can't see anything on the page. Where am i going wrong?
I find the example on the official GitHub wiki to be very unintuitive. Here is a better one:
https://scotch.io/tutorials/angular-routing-using-ui-router
For instance:
...
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },
// the child views will be defined here (absolutely named)
'tradeFeed#bulletinBoard': { template: ..... },
// another child view
'newsFeed#bulletinBoard': {
templateUrl: ......
}
}
});
The syntax of each view attribute being viewName#stateName.
The .state() method's templateUrl is ignored when using the views object. See the ui-router wiki for more info:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties