Is it possible to use ui-router, but based on the url or parameters, it can load different parent(master) page?
for example
<!-- index.html -->
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
Apparently,Index.html is my master page for all my state in ui-routing. Is there anyway I can change the master page (index_mobile.html)? based on some parameters or states system received? It looks like it's impossible.
Related
I'm building a web application and am using Nancy and Super Simple view engine to render the content for the user. Since a lot of the pages have the same layout (headers, sidemenu, ect.), I have seperated reusable contents in a master page.
Currently I have
--Root_file (Master page)
--Home
--Products
--Contact
--Account (Master page)
--Overview
--Manage
--Post
All files under root_file have a #Master['root_file.html'] reference. All files under Account have a #Master['account.html'].
Now my problem is, for Manage under Account I want to set a js-script as an additional header. I figured, by referring to the tag in the top-level Master Page, I would be able to add the js through reference.
Here's an overview.
Root_file.html
<head>
<title>Nice little title.</title>
#Partial['PartialView/header_references.html']
#Section['Additional_headers'];
</head>
<body>
#Section['Content'];
</body>
account.html
#Master['root_file.html']
#Section['Content']
<div class="container">
<div class="row justify-content-center">
#Partial['PartialView/side_menu.html']
<div class="col p-3">
#Section['Inner_content'];
</div>
</div>
</div>
#EndSection
manage.html
#Master['account/overview.html']
#Section['Additional_headers']
<script src="../../../Content/scripts/file-upload.js"></script>
#EndSection
I was hoping that I could set #Section[Additional_headers] through the nested master page, but the result doesn't reflect my hope.
Am I doing something wrong, or isnt it possible to set sections like this?
This is an old question and I figured you got this answered elsewhere but perhaps someone else has the same issue.
I ended up wrapping the placeholders of the top master page with new ones in the subpage. It's anything but pretty but it gets the job done.
In your html page you reference
#Section['Additional_headers']
Instead you can reference this in your sub master page wrapped in a new placeholder like:
#Section['Additional_headers']
#Section['Sub_Additional_headers']
#EndSection
You can then reference this new section in any underlying html pages like this
#Section['Sub_Additional_headers']
<label>This is in a nested master page</label>
#EndSection
To reuse your example above it would look something like this
Root_file.html
<head>
<title>Nice little title.</title>
#Partial['PartialView/header_references.html']
#Section['Additional_headers'];
</head>
<body>
#Section['Content'];
</body>
account.html
#Master['root_file.html']
#Section['Additional_headers']
#Section['Sub_Additional_headers']
#EndSection
#Section['Content']
<div class="container">
<div class="row justify-content-center">
#Partial['PartialView/side_menu.html']
<div class="col p-3">
#Section['Inner_content'];
</div>
</div>
</div>
#EndSection
manage.html
#Master['account/overview.html']
#Section['Sub_Additional_headers']
<script src="../../../Content/scripts/file-upload.js"></script>
#EndSection
I'm creating an application that provides a logged in user with the ability to create a poll (with questions and choices) in their dashboard.
Once the poll has been created I would like to redirect to the poll page, which will have a unique url (ex: http://example.com/p/3eRr4g6).
I would like this page to NOT use the dashboard template.
How does one accomplish this?
Here's my dashboard view:
Example Poll Page/Template:
UPDATE: To show my current index file and how I have it structured. (In reply to koox00's response)
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
</body>
You can use named views.
Create a state that loads the default template in that view e.g main and make every other state a child of this one if you want to share data.
In the desired state you can load over the main view the html you want.
update
default.html
<div class="wrapper">
<div ng-include="'components/navbar/navbar.html'"></div>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div class="content-wrapper">
<div ui-view></div>
</div>
<div ng-include="'components/footer/footer.html'"></div>
</div>
index.html
<body>
<div ui-view="main"></div>
</body>
take a look at nested states also if you want to share data between states parent/child.
Most parts of my application share a common layout including a header, sidenav and content area. These common elements are set up in my index.html file, and the result of a rendered route is included via the ng-view directive. See below. (Note that I am trying to use Material Design also).
<body layout="row">
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
<header>
<!-- heading -->
</header>
<ul>
<!-- menu options -->
</ul>
</md-sidenav>
<div flex layout="column">
<md-toolbar layout="row">
<!-- tool bar content -->
</md-toolbar>
<md-content flex layout-padding id="content">
<div ng-view></div> <!-- result goes here -->
</md-content>
</div>
<!-- scripts -->
</body>
My question is, how do I go about creating a front page which has a completely different layout, for example it does not have a side navigation? It seems to me that I need to move the header, sidenav etc into a separate template, and then conditionally inject the result of a route into the separate template, before it is used in ng-view. In other words, I think I need to conditionally decorate the route response.
Where do I start with this?
I see that there is a UI-router module available but I think this is probably overkill for my simple scenario.
A simple ng-if might help ... set a variable only in your home page controller so the condition will be false for all other routes.
<md-sidenav ng-if="!homePageControllerVariable">
Another alternative is a dynamic ng-include
I have a service that is called to get the authorized user's location list. This information is used to populate a select list and they can switch locations to view different information.
The code for the select list is in the nav bar in the index.html but I don't want the service to fire on the page until after they user has been successfully authenticated and the app switches to the main view.
I'm using ng-show to hide the navigation bar with an isAuthorized() function for the AuthCtrl. However, the service call from the LocationCtrl to populate the ng-repeat always fires whether the user is logged in or not. I could move the nav component into the main view but then I'd need to have it in all the views that are protected. What is the best way to handle populating service-based menu items in a single page app?
index.html
<!doctype html>
<html lang="en" ng-app="betterbooks">
<head>
scripts...
</head>
<body>
<nav class="navbar-fixed-top" ng-controller="AuthCtrl as auth">
<div class="container" ng-show="auth.isAuthorized()">
<ul class="navbar-right">
<li>Home</li>
<li class="dropdown">
Accounts <span class="caret"></span>
<ul class="dropdown-menu" ng-controller="LocationCtrl">
<li ng-repeat="location in locations">
<a href="#/location/{{ location.id }}/">
{{ location.name }}
</a>
</li>
</ul>
</li>
<li><button ng-click="auth.logout()">Logout</button></li>
</ul>
</div>
</nav>
<div class="view-container" style="height:100%">
<div ui-view class="view-frame"></div>
</div>
</body>
</html>
Use an ng-if instead. The navbar won't be loaded into the dom until auth.isAuthorized() is true, so the LocationCtrl won't render or run until that point.
I've been going over the current (angular 1.2.16) routing and multiple views method for angular. Its detailed here. In this we see that for every route there is a get request to load the partial html.
How would I change this so all get requests for views happen when the app instantiates and then the routes switch the views without making further calls to the server?
Suppose that you want to change the content of a div depending on what is stored in data.mode. You need to have first a mechanism to change the value of data.mode and that's entirely up to you.
<div ng-switch on="data.mode">
<div ng-switch-when="first_value">
<!--Your first partial page content-->
</div>
<div ng-switch-when="second_value">
<!--Your second partial page-->
</div>
<div ng-switch-when="second_value">
<!--Your third partial page-->
</div>
<div ng-switch-default>
<!--Default content when no match is found.-->
</div>
</div>
You can do what they suggest here and use ui-router
i.e.
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body>