I'm developing an application in nodejs and handlebars.
I'd like to be able to create a layout template then add various individual components within that layout.
Each component would be created with a separate handlebars template and context.
e.g. layout.tmpl
<html>
<head>...</head>
<body>
<!-- somehow render a handlebars template here with a separate context -->
<!-- somehow render another handlebars template here with a separate context -->
<body>
</html>
Is this possible? If not, is there another templating engine that can do this?
Yes. It is possible with Handlebars partials.
Related
I am new to Angular. I am working on a web application using Angular. When I start the project app.component.(ts, html...) and app.module.ts generated.
I am wondering when will the app.component.html will be rendered?
What should I put in app.component.html,
And when should I create an another component, like homepage component?
Will there be any differences between putting homepage in app.component.html and putting homepage in another component.html?
Welcome to Angular
So how bootstrap process works in Angular Application.
The entry point to every Angular Application is the main.ts file which contains this last line.
The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment.
The bootstrapModule() function bootstrap our root module which is app.module.ts.
AppModule(app.module.ts) is an entry module and also root module for our application.
app.component.ts is an entry component that we specify in app.module.ts.
So what should you keep in app.component.ts
You can consider app.component.ts as a HomeComponent also, but it is good to keep HomeComponent seprately and giving it's reference to app.component.ts.
You should create separate component for each separate page in your application.
Image source: medium.com
app.component.html is root component file. so its content display top. you create another component its will be render with root component. you can implement app routing module and define here application list of url for file. other word app.component.html is master page. and create new component is child page.
<html>
<head>
</head>
<body>
<!-- Content >> -->
<router-outlet></router-outlet>
<!-- Content << -->
/<body>
</html>
app.component.html is the page that will be rendered from your application. All the component's html pages created will be rendered with in app.component.html.
component's html pages will be rendered based on the routes set in app.module.ts.
for eg: if the route for 'home' is set as homeComponent then home.component.html will be rendered inside app.component.html.
To serve this purpose of dynamically loading the required components the app.component.html will have its content as nothing but output of routing module as,
<router-outlet></router-outlet>
reading further through the angular guide will help in understanding these concepts in depth. https://angular.io/
We are intergrating an external JavaScript application into Acumatica and we have a need to be able to access the logged in users authorization / user access roles. Our thought is that if we can write the logged in users access roles to the page source as global scope variables our JavaScript app can handle the rest, but we are a bit challenged in figuring out how to do that. We know we can write the roles to the trace screen, but that doesn't help as we need it literally in the page source for this to work (ideally the page source and not the DOM - but we can look into if the DOM could work too).
Any help would be much appreciated.
The page source in ASP.Net is a ASPX.CS file that resides on the server, I doubt your JavaScript can hook into that. The communication from the server to the UI layer is a template engine.
You define the fields in the ASPX file and these template fields are populated with the DataViews current record. The minified JavaScript that is in the page runs that templating engine.
You can't simply generate dynamic HTML or access the JavaScript side of things from the server. So having fields values in the DOM is probably your best bet. You can make the controls invisible if required.
Example to read UI control values using JavaScript:
<%# MasterType VirtualPath="~/MasterPages/FormDetail.master" %>
<asp:content id="cont1" contentplaceholderid="phDS" runat="Server">
<script language="javascript" type="text/javascript">
window.addEventListener('load', function () {
// Fetch a value from UI control
var control = px_alls["edControlID"];
var value = control.getValue();
});
</script>
[...]
</asp:content>
I'm trying to customize the page UI on Azure AD B2C unified sign in/sign up page.
I was able to create my template and upload all the assets i.e. html page, images and css to my Azure Blob Storage container with the right CORS settings.
When I pull up the page, however, it looks absolutely HORRIBLE! It doesn't seem to support Bootstrap. I read somewhere that no JavaScript is allowed. Is that the reason for this?
Once I upload my custom HTML page, Azure AD B2C seems to be stripping off a lot of the design elements necessary for my customization such as id and style in my body tag -- see below:
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
When I inspect the page source once my custom page is rendered, I see that all my classes and Id's are removed along with Bootstrap references e.g. css and js.
Am I getting this right? No Bootstrap which means Azure AD B2C only supports customization of the most basic kind?
Your HTML template can include any external, head, or inline styles but it can't include scripts.
An example of a customized page can be found at the WoodGrove sign-up or sign-in page.
The HTML template for this customized page can be found in the WoodGrove GitHub repository.
This HTML template includes Bootstrap's Reboot styles as well as the WoodGrove's specific styles.
Azure AD B2C creates the head and body elements and then copies the child elements for each of these head and body elements from your HTML template to its HTML document.
Therefore, you shouldn't add attributes to the body element in your HTML template, because they aren't copied.
You can import the bootstrap references. Please see this document: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c
See also: https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect
It looks horrible for a reason. No styling is applied to the page so that it can be fully customizable. You can reference Bootstrap for CSS; however, I have run in to issues when using bootstrap.js for modals since it appears the Azure B2C API uses bootstrap for modals...In my experience, it is best to rely on Vanilla JS and to leave off any references to third-party JS.
It is possible to use JavaScript if you are using your own custom policies. There are some limitations to JavaScript and the best approach is to try to accomplish anything using the policy first.
To enable JavaScript use the following as guide:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
When referencing external CSS/JS files, the URL must be absolute. This is true for the head section of HTML files as well as any references within JavaScript. Relative URL's can only be referenced within a CSS file.
Incorrect:
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
Correct:
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
I am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>
I'd like to have a partial come from a service via a url like so (using ejs):
<div>
<%- remotePartial('http://google.com/?q=hi') %>
</div>
Is this possible?
You would need to define a dynamicHelper, that fetches the remote template and passes it to the templating engine.
However, this would require asynchronous dynamicHelpers, which are currently not provided. See this thread on the express user group.