In NuxtJS (vuejs framework), I am having some difficulty with routes, I wanted to ask how we can create this kind of route using pages directory or any other approach?
Example:
Sample routes:
/some-route-of-page-2021
/some-route-of-page-2022 and so on for every year.
2021/2021 is the year and that will be dynamic
Having a dynamic variable inside of a path itself is supported in Nuxt3 . In Nuxt2, you can only have /some-route-of-page/XXX. In this case, it seems a bit more logical to have this kind of structure anyway. Usually, you don't have a lot of variables interpolated in the path itself, can be kinda confusing IMO.
Dynamic Pages are handled by adding an underscore in front of the parameter. For example "_pageyear.vue"
Docs: https://nuxtjs.org/examples/routing/dynamic-pages/
Sandbox: https://codesandbox.io/s/github/nuxtlabs/examples/tree/master/routing/dynamic-pages?from-embed
Related
I'm implementing multi-language support in my app, and I guess this is the last thing that I would need in order to be able to change between languages without reloading the whole app/page. (I already have a solution with full page reload.)
For a simple example let's say this is how my router looks:
Router.map(function() {
this.route('search', { path: t('search') });
this.route('item', { path: `${t('item')}/:id`);
});
The t function would be getting the correct translation for the given strings in the currently active language.
The structure of the route hierarchy won't change, the only things that need to be updated are the path strings. Application state should be kept, of course.
I'm wondering whether this is possible to do.
I am not %100 sure about the correctness of what I wrote but Router.map is executed and resources with the definitions given within this method is transformed to a DSL instance and that is then passed to the actual router maintained by Ember.Router itself. In order to achieve what you want I believe what we need is dynamic modification to the router even if it is just the paths you need yo modify not the whole route structure.
If you look at the following github issue, Ember.js no more supports dynamically adding routes (hence no dynamic modification to the existing ones I believe). With all that said, I believe what you want is not possible without reloading the whole app (hence losing the application state).
I have an application based on e.g. the Northwind database, in which I have built views for each of the different objects to maintain them CRUD-ly, using AngularJS views and the in typical file structure adopted by most devs.
I have an issue I would like to improve, firstly from all examples I have seen, you need to declare your controller on an index.html file. If one module that a user uses does not require, all the other controllers, is it necessary to load all controllers on the client side. Is there a better way to only declare controllers that are need per view?
Is this the normal behaivor of a Single Page LOB, to preload all necessary dependencies, whether required or not?
No. Don't declare your controllers in your HTML.
The less logic you add in your template, the more flexible your app will be.
The problem with including controllers in your HTML is that if some nested controllers have the same instance var (example foobar), then you don't know which one would be displayed :
<div ng-controller="firstController">
...
<div ng-controller="secondController">
...
{foobar}
Then, the best way is to work with modules and routes. With routes, you can tell AngularJS that your HTML should be controlled by aController.
I you are looking for a good app to start with, take a look at this one.
It has been developped by the AnguarJS team and shows some good practices to follow. You can notice that none of the HTML files contain a reference to a controller.
I'm using firebase as a backend and have several posts in the database. My files look like:
index.html
add-post.html
all-posts.html
How can I create routes for post-details such as /posts/id.
Do I need to use a framework such as Angular for this kind of dynamic routing?
That's correct if you want to use Angular JS UI router, I leave you the link here, the info is clear, hope it helps
https://github.com/angular-ui/ui-router
If you go to the bottom of the page you'll see that it's explained step by step.
I've just started using angular and javascript and I can't really figure out how to structure my application.
I started writing a Controller and my first reflex is to put what I would call my model into a class in a different file.
I have different option
1 - putting everything (model + controller ) in one file
2 - using requireJS so my controller can 'include' my model. I've managed to do it, put it wasn't straight forward and I still have problem to make the yeoman dist version to work.
3 - use angular module, which seems to be the recommended way, but if choose this solution do I need to load explicitly my model file in the main html file. I understand that not hardcoding the dependency between files can be a good thing, so you can for example swap or change some components, but it seems wrong when for example a subclass need to requires its parent class. If I need to split a module in lots of angular submodules, do I need to load them all explicitly ? That's seem totally wrong.
Am I missing something ? what is the standard way to do so ?
What I found quite useful are the MTV meetup sessions. They give a good overview about how to apply best practices in AngularJS:
Best Practices: http://www.youtube.com/watch?v=ZhfUv0spHCY
Angular+Yeoman: http://www.youtube.com/watch?v=XOmwZopzcTA
There are many more videos on youtube. I hope this helps giving a first idea.
I am trying to understand how to internationalize a web-app developed with emberjs.
I found the ember-i18n package that I think is a good solution, but I can't understand how to use it.
The first thing you'll need to do is to create hash with all your localizations, you always pair up a identifier with the localized string.
The best practice here is to create a put all locales you have into a seperate file. (like loc-english.js)
Em.I18n.translations = {
'login.loginbutton': 'Login',
};
When your webapp is getting loaded, make sure you load your strings file. All string must be loaded before you render the first view with ember.
The actual use is quite simple you just use the 't' helper in your template
<button class="login">{{t login.loginbutton}}</button>
Which will result in Login
You can find more information at: https://github.com/zendesk/ember-i18n/blob/master/README.md