I was trying to use Koa.js instead of express for node.js.
In express we have used render function to fetch the html page.
I tried to access angular html page from Koa.js using the below code as below:
app.use(async function (ctx, next) {
return send(ctx, 'views/index.html', { root: ''
})
.then(() => next()) })
But the above code displays the index page as it is without styles and the ng-view datas are not rendered
Also, I tried adding co-views as below
var views = require('co-views');
var render= views(__dirname + '/views',
{ map: { html: 'swig' }});
But, I didnt get the result as expected. It also displays the page as mentioned above.
Please help to get the expected result.
Unless you have very specific requirements for serving static files, most of the time you can get away with koa-static:
import serve from 'koa-static'
// ...
app.use(serve(`${__dirname}/public`))
If you have more particular needs, you might need to edit your question.
Related
I have the following route structure
src/routes/[slug]/results
src/routes/[slug]/about
I can't figure out how to link to the routes in SvelteKit. The routes themselves work when I access them through the browser navigation bar.
How can I create a simple links on the [slug] page, that will link to the child routes?
Both below link to the root:
results
results
Tried something like below, but that didn't work.
results
results
I assume it's something similar, but the SvelteKit documentation on routing and advanced routing don't mention anything related to navigation within dynamic routes.
Would just add the parameter to the link:
<script>
import { page } from '$app/stores';
</script>
Results
I figured it out, it was a bit hidden in the documents (and I'm a starter, so not fully aware of all the concepts yet).
In +page.js:
/** #type {import('./$types').PageLoad} */
export function load({ params }) {
return {
slug: params.slug
};
}
In +page.svelte:
<script>
export let data;
</script>
results
share
I am migrating an app from AngularJs to Angular 7. In the old ui-router I was able to update the location without reloading the state with below code.
this.syncLocation = function (paramObj) {
var params = _.clone($state.params);
params = _.merge(params, paramObj);
$state.transitionTo($state.current.name, params, {
location: true,
notify: false
});
};
However with new Angular & UI-Router I am unable to get this done. Not sure if it is due to Change Detection Strategy or changes to UI-Router itself.
syncLocation(paramObj) {
console.log("syncLocation", paramObj);
let params = _.clone(this.stateService.params);
params = _.merge(params, paramObj);
this.stateService.go(this.stateService.current.name, params, {
reload: false
});
}
I have created plunker to reproduce the problem. The problem is described in the component colors.component.ts link. In this plunker I don't want to reload the page even though I check/uncheck the checkbox.
The idea is that I have a complicated page where I cannot afford to lose the contents by reloading the page but still be able to update the location. It is a simplified page with the problem.
Any help is appreciated.
You can update the url with Location.replaceState()
See: replaceState()
Inject Location with di and use like this:
constructor(private location: Location) {
...
private syncLocation(){
this.location.replaceState(`whatever/state/or/path/you/need`);
}
}
There are other useful methods in Location such as Path you may want to reference.
I've got a small issue with routing with AngularJS using Laravel. When I have a url like www.example.com/blog and I refresh, it will load fine under the AngularJS UI Router, however, when I have www.example.com/blog/1 and I refresh it shows the Laravel-side 404.
I have my web.php set-up like this:
Route::get("/", function(){
return view("index");
});
Route::get('/{all}', function () {
return view('index');
});
I also have $location.html5Mode(true); in AngularJS and also my <base /> and the routes are all defined accordingly.
Can anyone shed some light on this?
For future reference and people coming here from search results.
Route::get('/{all}', function(){
return view('index');
})->where(['all' => '(.*)'])
A where is needed to catch all after the initial / This isn't explicitly noted in the documentation: https://laravel.com/docs/5.6/routing#parameters-regular-expression-constraints
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
I want to try dynamic route request but It's not working properly. And here I explain my coding style step by step.
<nav class="main-nav" ng-show="global.user.user_type!='admin'" ng-repeat="mMenu in Mainmenu">
{{mMenu.MenuName}}
</nav>
This code contain URL link and It's load every time with a variable that is web address link. And the link is something like that - http://localhost/views/adminpanel/about.html
In AngularJS Controller contain the code -
$scope.geturl = function(url)
{
var params = {
url1 : '/views/adminpanel/'+url
}
$http({'method' : 'post', url : 'views/adminpanel/'+url, data: params
}).success(function(data)
{
}).
error(function(data){
})
}
configuring and using ngRoute -
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: 'views/adminpanel/:url'
})
In server side (Express) :
Routing HTTP requests, Configuring middleware and Rendering HTML views
app.post('/views/adminpanel/:url',auth.requiresLogin, users.geturl);
exports.geturl= function(req,res)
{
var url = req.body.url1;
res.render(url);
}
This is all about my rendering process but It's not working. In browser It only shows the URL link but not shows any content. How can I solve It any idea?
I think you are confusing things:
first of all you have a link together with a ngClick: you should have either of those
your ngClick has an empty success function, so it does nothing with the template
you have a route set with express that matches with the ngRoute (btw, POST is usually used to create resources, you should GET the template)
your templateUrl is going to send a GET request to (literally) /views/adminpanel/:url, it does not replace :url
To fix it:
set a different endpoint for your APIs
use a GET endpoint instead of a POST
change the ngRoute to:
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: function(param) {
return '/api/<path>/' + param.url;
}
})
remove the ngClick from the <a>