I've been developing a mean.js application. I have an admin theme that I'm trying to integrate with the existing application.
My question is
Can we have multiple Server Layouts, ? If the logged-in user is Regular User, use layout-1 if the user is Admin use layout-2
If we cannot have multiple server layout (I presume it isn't possible). Is there any way to detect the params or scope variable in the Angular Client App and dynamically load a partial inside the main Layout.
Let say I have an Index.html file, if the intended route is Dashboard, I just replace a section of the page view, ( Ruby on Rails Developers would know this)
UPDATE 1 :
I've created 2 files with my required Admin Index, and Layout files.
admin.index.server.view.html
and
admin.layout.server.view.html
I've also added the following code in my core.server.routes.js
module.exports = function(app) {
// Root routing
var core = require('../../app/controllers/core');
app.route('/').get(core.index);
app.route('/admin/').get(core.adminIndex);
};
I've also added the following code in my core.server.controller.js
exports.adminIndex = function(req, res) {
res.render('admin.index', {
user: req.user || null
});
};
and when I hit localhost:3000/admin/ I get Error: Cannot find module 'index'
Rename the two view files from admin.index.server.view.html and admin.layout.server.view.html to admin-index.server.view.html and admin-index.server.view.html respectively.
Also, change this line in your core.server.controller.js file;
res.render('admin.index', {
to this;
res.render('admin-index', {
Related
I have a NodeJS app that displays some tables from a database. The view engine is ExpressJS.
On the app I have a dropdown list where u can select the table you want to display. The problem is that any given table that I want to display is only accessible through the dropdown, but what I'm trying to do is make them work through URLs.
So for example when u enter an address like: http://localhost:6789/tableOne, I want the table one to be displayed.
But if I load table two from the dropdown, and after that I enter the address I mentioned above, the page displays also table two, so basically is not refreshing with the new data. This makes the app working only through the interface, but I want to share to somebody else the direct link to a table and I can't. (they will receive the last table that was loaded on the app)
To rephrase, take as example an app that displays on the page the route's name. Mine doesn't update.
The routes are dynamically generated and here's an example of the routing that I did:
app.get('/someTables/:' + getNameFromID(selectedID), (req, res) => {
var url = req.url;
for (i in endData) {
if (i.name == url.substr(10)) {
selectedID = i.id;
}
}
res.render('index', { frontData2: endData2, frontData: endData, jsonToDisplayFrontEnd: jsonToDisplay, m1: m1, m21: m21, m22: m22, m1FrontEnd: m1ToDisplay, m21FrontEnd: m21ToDisplay, m22FrontEnd: m22ToDisplay, versionToDisplayFrontEnd: versionToDisplay, titleName: getNameFromID(selectedID), folderPath: getFolderPath(selectedID), folderPath2: getFolderPath2(selectedID) });
});
The function getNameFromID() returns a string.
How can I make this work? Thank you!
I have a Visual Studio 2019 Solution containing 2 projects:
An ASP.NET Core Web App (Razor Pages) project
An ASP.NET Core Web API project
I am using the Fetch API to make JavaScript calls to the Web API from Razor Pages in the Razor Pages application.
For example:
fetch("https://localhost:44325/api/Customer/12")
.then(response => response.json())
.then(data => processData(data))
.catch(err => showError(err));
How do I configure the url (the first parameter to the fetch() call above) depending on the environment that the Web App is running please - i.e. development (as above), staging, production etc?
How do I configure the url (the first parameter to the fetch() call
above) depending on the environment that the Web App is running please
i.e. development (as above), staging, production etc?
First, based on the environments to add multiple appsettings.Environment.json : For example, the appsettings.Production.json and appsettings.Development.json files:
appsettings.Production.json:
{
"API": {
"URL": "https://localhost:44325/api/Customer/12", //store the url
"Environment": "Production"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
}
}
Then, in the View Page, use the #inject directive to add the IConfiguration, then you could access the configuration value from the view page. And then you can use a hidden field to store the Api URL, before using the Tetch Api, use the Jquery to find the hidden field and get the URL.
#inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnv
#inject Microsoft.Extensions.Configuration.IConfiguration configuration
<p> ASPNETCORE_ENVIRONMENT = #hostingEnv.EnvironmentName</p>
<p> ASPNETCORE_ENVIRONMENT = #configuration["API:Environment"]</p>
<p> API URl : <span>#configuration["API:URL"]</span></p>
<input type="hidden" id="hid_apiurl" value="#configuration["API:URL"]" />
The result as below:
I was looking for something similar and I found this article.
https://www.thecodebuzz.com/set-appsettings-json-dynamically-dev-and-release-environments-asp-net-core/
You can have multiple types of appsettings.json files with configuration details that are specific to DEV, TEST Or STAGING, and PROD.
Then just define your url in the setting file such as
appsettings.Development.json
{
"ApiUrls": {
"CustomerApi": "https://localhost:44325/api/Customer/12",
}
}
appsettings.prod.json
{
"ApiUrls": {
"CustomerApi": "https://productionurlblablabla/api/Customer/12",
}
}
etc. It is all described there it worked for me but I am not an author of that so feel free to read and good luck with that.
I have a file in which ii declared my videouploadfolder url and i want to call that file in my js
my config.js
var filepath = {
uploadVideoUrl : './public/videos'
}
I called it in my node.js as
var config = require(config);
config.uploadVideoUrl;
But i am not sure how to call in js,can anyone suggest help please.Thanks.
With angularjs you can make use of constant,
var app = angular.module('configuration', [])
.constant('uploadVideoUrl', './public/videos')
Then you can use in your controller as,
app.controller('Ctrl1', ['$scope','uploadVideoUrl'
function ($scope,'uploadVideoUrl') {
var config = uploadVideoUrl;
}
]);
If you want your config.js file to stay only in server where you have ther services editing it, then you would have to write a REST route in nodeJs to fetch the content of the config and send it back to angularJS client.
If you dont mind saving that config json in your client side itself instead of your server then follow what Sajeetharan has said.
I am developing a web application using sails. In this application two different type of user will be there i.e. admin and customer. So we need different layout and lots of routes. I need some basic understanding.
Is there any concept of group routing and route prefix? Like if my front end URL is 'www.abc.com/...' and admin URL is 'www.abc.com/admin/...' then what will be the code for route.js. I know it is possible by hard coding each route but i want this like
for frontend
'/about': {
controller : 'aboutController',
action : 'index'
},
'/contact': {
controller : 'contactController',
action : 'index'
}
for admin
'admin':{
'/report': {
controller : 'ReportController',
action : 'loadform'
},
'/setting': {
controller : 'settingController',
action : 'index'
}
}
2.How to maintain nested folders in controllers. Like
any other suggestions for these kind of big applications ?
I am using Node.js and ExpressJS 3.0. Moving to 3.0, I found that partials were no longer supported and subsequently found express-partials to provide similar functionality.
Looking at the example on the GitHub page, I find this:
app.get('/',function(req,res,next){
res.render('index.ejs')
// -> render layout.ejs with index.ejs as `body`.
})
This is fine, but what if I have a layout that depends on multiple partials? That is, what if I have a block in the layout.ejs file for the header, one for the content, and one for the footer? For example, what if I use one template file for the entire web application, but different kinds of users have different headers, content blocks, and footers?
Looking at the limited documentation of express-partials, I cannot find this functionality. I was expecting something like this:
app.get('/', function (req, res) {
res.render({header: 'header1.ejs', content: 'some_file.ejs', footer: 'footer1.ejs'});
// -> render layout.ejs with header1.ejs as `header`, some_file.ejs as `content, and footer.ejs as `footer
});
How can I achieve this functionality?
I'd suggest you to use ejs includes + switches
Sorry, I'm not familliar with ejs syntax, so – jade, but the essense is the same:
app.get('/', function (req, res) {
res.render('index', {
header: 'header1',
, content: 'content1',
, footer: 'footer1'
});
});
index.jade
===========
//- header
case header
when "header1":
include "includes/header1"
when "header2":
include "includes/header2"
...
case content
when "content1":
include "includes/some_file1"
when "content2":
include "includes/some_file2"
....