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
Related
I'm having an issue with my Google Apps Script file. Its essentially mirroring a Room Reservation system and up until recently it started to have some issues. I'm having a Content Security Policy issue that shows when I try to run it on FireFox.
When I go on Chrome, I get a different error:
I have an Admin Console, that gives me the option to accept or decline Room Reservations. Currently, the only account that shows any of the Rooms is mine.
The intended look should be this, with the rooms shown below:
However, what other Admins are seeing is this:
It shows no CSS, and I get either one of the errors above.
Currently, on my Admin Console Script, I have this, which is where the issues come about:
<!DOCTYPE HTML>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html ng-app="directoryApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="directoryCtrl" class="container-fluid" ng-init="getEvents(<?= user ?>)">
<!-- Show loading screen -->
<?!= HtmlService.createHtmlOutputFromFile('Loading').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('License').getContent(); ?>
<!-- Show notifications -->
<div id="page_top" class="notify lead" ng-if="notification">{{notification}}</div>
<div class="row">
<div class="col-xs-12">
<div ng-show="events" ng-csp>
<?!= HtmlService.createHtmlOutputFromFile('AC-Navigation').getContent(); ?>
</div>
<div ng-show="events.length && !editing && !settings">
<?!= HtmlService.createHtmlOutputFromFile('AC-List').getContent(); ?>
</div>
<div class="col-xs-10 col-xs-offset-1" ng-show="editing">
<?!= HtmlService.createHtmlOutputFromFile('AC-Single').getContent(); ?>
</div>
<div class="col-xs-6 col-xs-offset-3" ng-show="settings">
<?!= HtmlService.createHtmlOutputFromFile('AC-Settings').getContent(); ?>
</div>
</div>
</div>
</div>
</body>
</html>
<?!= HtmlService.createHtmlOutputFromFile('AC-JavaScript').getContent(); ?>
I tried to look at some Angular Documentation, that spoke about using ng-csp, which didn't work.
There is no issue with the actual reservation system itself, its just that I cannot see the rest of the code on the Admin Console, and as a result I cannot accept/deny room requests on my app.
I tried to also use a meta that allows for everything through Content-Security-Policy.
Any guidance would be appreciated!
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.
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>
I want to have a login view outside ng-view, but is it even possible with angular.js? couldnt find any examples of folowing on the internet. Example is descibed below.
<div class="container">
<div class="header">
<div class="loginView"> my huge login view</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
Yes. Assign a controller to the loginView and treat it like any other view.
ng-view is just used when using the $routeProvider to define routes.
This is perfectly valid. ngView is used to complement the router. This means it is just a directive as any other. You can put anything around it.
It sounds like you want something like this: Live demo here (click).
<div class="container">
<div class="header">
<div class="loginView" ng-include="'login.html'"></div>
</div>
</div>
You could also include your file from a $scope property like this:
$scope.foo = 'login.html';
<div ng-include="foo"></div>
can someone please point me to an example of managing global states for ui-router?
i'm trying to implement a general site template that contains on all pages a header and a footer, with a main view that changes along with nested views within that view.
<div ui-view="header"> should appear on all pages, has its own controller.
<div ui-view>main view that holds the different "pages" and nested views
<div ui-view="footer"> should appear on all pages, has its own controller.
i will try to elaborate, this is my current state with angulars routing:
<body>
<div class="wrap">
<div ng-include="'partials/header.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</body>
i would like to migrate to ui-router, but cannot achieve the same.
i need the header and the footer on all pages and an ui-view as main content that will hold all views/nested vies and stats
Thanks
That will definitely work for you. You'll just need to make sure it's ui-view insteadl of ng-view. Here's what I'm using now on a similar app:
<div ng-include src="'app/templates/nav.html'" id="global-nav"></div>
<div ui-view></div>
<footer ng-include src="'app/templates/footer.html'"></footer>