An Angular 2 app uses the following code to load an array of routes:
export const routing = RouterModule.forRoot(myRoutes);
Currently, the myRoutes array is defined in the Angular 2 app, and works perfectly. But this assumes that routes have been defined statically in the client app.
How can the myRoutes array be fed into RouterModule.forRoot(myRoutes) from a source that would allow users do define routes and content from a user interface in a separate administration app? This would involve feeding the user-defined routes through a backend server.
I figured out how to send a data argument into each Route object in the myRoutes array, so that the same component can be re-used for multiple routes by sending different config into the same component from each route. But how can the routes array be imported from an external data store in a backend server?
This link indicates that I am describing a feature request. However, There MUST be some way to have UI-based content management in Angular 2 without having to resort to third party tools. What is a minimalist approach to importing an array of routes into RouterModule.forRoot(myRoutes) from a backend server?
You could try using dynamic component loading. The docs for it are here: https://angular.io/guide/dynamic-component-loader
I have not tried it ... but it does not look like it does exactly what you want. It does not seem to provide a way to add dynamic routes. But it does allow adding dynamic components.
Also, as per the link you defined, this is an issue with the CLI and its dependence on Web pack and AOT. You may be able to achieve more of what you want using SystemJS as your module loader.
Related
I am new to Nuxt and trying to make a Single Product. I wonder:
How is it possible to generate multiple pages in SSR and can create a new HTML for each page? Is CSR should be created first and then the SSR made or vice versa?
If Vuex is used and a method dispatched in async Data is it possible to get data in computed? I mean is HTML generated dynamically if we get data in computed session? how should I use Vuex and be sure that every product certainly has its own HTML page?
Thank you
All pages created are generated SSR by default if the mode is set to SSR or Universal. First, files will be generated from the server and then injected into the client-side. You can avoid SSR in specific sections using the client-only tag. Nuxt pages Nuxt SSR Q: Why should I use client-only? A: Because it's possible when you use some dependencies, it returns undefined so we use client-only to render it on the client side and avoid this problem.
It is possible to use asyncData's value in components computed property. You're looking for dynamic routes (pages). You can access the information inside this using $route.
In next js we have to create a seperate file for each new api like for /user there will be user.js with a seperate handler. And a seperate one for /user/goldmember. Will it not create too much files? Is there another way?
There's no other way to route pages in Nextjs. Websites are not built to handle large/excessive number of routes, because it's not really necessary. If you're worried about creating i.e. large number of user endpoints (/user/:id), that's where dynamic routes come into play.
I have created a component outside app using the Angular CLI (in src folder)
../src> ng g c test
And added the component import in app-modules.ts
I'm not able to access the test.html file separately (I want to execute the code in the ngOnInit method of test.ts) as below
http://localhost:4200/<<context_path>>/test.html
I even created HTML and a JavaScript file and tried to access, however that didn't work.
Kindly let me know is it possible to access the HTML?
Thanks for the response. Below the screenshot
Application screenshot
i want to access like http://localhost:4200/test.html
this called bad approach you shouldn't create components out of src folder i don't mean by that is not gonna work but not recommended to do that src folder excite to gather all your project component to make it easy to access and sharing the data between them.
alternative solution 1: you can delete the component you made out of src folder and recreate another one in app folder or simply move the component files/folder in the app that's the correct approach.
then you can access to it from any other component in your app by import it in ts file
alternative solution 2: if you want just to sharing data or executing method/function that maybe shared by two components that holds some data you can use services or event binding.
alternative solution 3: if your problem with routes and you want to naviagte to this test.html for recommended approach firstly move it inside the app folder like alternative solution 1 then use routes and it's config to create a route for this component.
notice: you couldn't inject only html file inside angular components it must has his own ts file that holds the component config #Component({...}) that's how angular knows that's component excite and how to inject it to other components.
I'm currently working on a Laravel/Vue.js project where I need to use the same data (i.e. Static list of Operating Systems) both in the backend and frontend. So far these are the different options I've thought of:
Duplicate data both in my Laravel and vue.js projects.
Load the data into the frontend through the API
Share, the data through a common static config file and possibly preload the data into Vue at processing time (currently using webpack)
The third options seem to be the best of them all as it avoid duplication of data and the need to make unnecessary requests and wondering if it's possible to accomplish with existing tools.
Well the best way would depend on the specifics of the app.
I typically prefer #3 as that's the "Laravel way". Use variables prefixed with MIX_ in your .env file and access them in the frontend using process.env.MIX_VARIABLE_NAME as described in the Laravel docs. Access them in the backend using the env helper
Although arrays are not supported, you can always construct them in the backend and frontend like so:
$config = [
env('KEY1') => [
env('KEY_ONE') => env('VALUE_ONE'),
env('KEY_TWO') => env('VALUE_TWO')
],
...
};
I want to separate out the logic of my app which needs to call an OData service before the main execution can continue. I have other apps which need this behaviour implemented in the future, so if I can modularise that functionality into a component, it would be very useful.
I have Component.js for the main app, and I'd like to add a second component to be run first, which then loads the main component once the OData result has been received.
How do I load a Component, then get that Component to run the next one (in this case a UIComponent)?
It seems the sap.ui.component code automatically appends "Component.js' to the end of the name provided, so how do you have different Component files with different names?
var oComponent = sap.ui.component({
name: "MYAPP.Component2",
id: "componentId"
});
Returns error,
failed to load 'MYAPP/Component2/Component.js' from ./Component2/Component.js: 404 - NOT FOUND
Could anyone provide some example code of a UIComponent having a dependency of a Component, and the file structure of that part of the application?
You can build multiple components as separate entities and then have them listed as dependent components inside a master component for your project. In your main or master component you can list these secondary components under the metadata config's dependencies array. Each component is atomic to itself so each will have its own Component.js with routes and view path. We create nested components in this same manner and it works really well.