How do I add another page in an angular-cli project? - javascript

Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.

I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.

Related

Nuxt - dynamic params after building does not work

In a Nuxt ("spa" mode) project I have a url with a dynamic param /shop/:product, which can be as such:
/shop/ipad-128gb-rose-gold
/shop/subway-gift-card
/shop/any-string
etc.
Using this directory structure works fine in development environment:
pages/
shop/
_product.vue
However it does not work in production. Looking to the generated bin/ folder I see that there is nothing inside shop/ directory. And I see that Nuxt mentions a solution here: https://nuxtjs.org/api/configuration-generate/#routes
But in my situation, I don't know what the :product param will be (could be any string).
I am fetching the product details in pages/shop/_product.vue from the server (if it exists), otherwise handling the error. So now how do I do that in a production build?
I think I am misunderstanding the Nuxt solution -- am I really supposed to generate all possible routes for every existing product slug??
The solution for me was to use:
// nuxt.config.js
export default {
...
generate: {
fallback: true
}
}
I am serving the app out of the built dist/ folder. And I came across this in the Netlify deployment docs:
For a single page app there is a problem with refresh as by default on
netlify the site redirects to "404 not found". For any pages that
are not generated they will fallback to SPA mode and then if you
refresh or share that link you will get Netlify's 404 page. This is
because the pages that are not generated don't actually exist as they
are actually a single page application so if you refesh this page you
will get a 404 because the url for that page doesn't actually exist.
By redirecting to the 404.html Nuxt will reload your page correctly in
SPA fallback.
The easiest way to fix this is by adding a generate property in your
nuxt.config and setting fallback: true. Then it will fallback to the
generated 404.html when in SPA mode instead of Netlify's 404 page.
References:
https://nuxtjs.org/faq/netlify-deployment/
https://nuxtjs.org/api/configuration-generate/#fallback
When you generate static pages, it produces directories and index.html in each one. How did you expect to have it dynamic if you serve static HTML?
You have 2 solutions:
don't use npm run generate. Run nuxt on the server. Using this solution, you avoid ajax in browser. Instead, nuxt performs it and sends the HTML to the browser. Good for SEO.
have your web server (nginx) point all requests to /index.html - at that point, javascript takes over and it can correctly find the slug and query the products via ajax. Bad for SEO because you need to use ajax to get the content after page finishes loading.
Documentation and configuration about this can be found at nuxt's web.

How can I serve remote React app with a script tag?

We have at our company a react app (built with create-react-app) which is served today via an iframe, which works well.
A need has risen to serve the app (which is always embedded within other pages), with a script tag alone (no iframe tag).
I thought of something like:
<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
InitMyApp('#app-placeholder', 'token', otherOptions)
</script>
I've tried to create init.js file in the react app's public folder. I can access the file.
From that file, how can I render the react app itself to the given selector (#app-placeholder)?
Because this file is served as-is, and doesn't get transpiled by webpack/babel, I cannot use import/jsx/require() and other stuff.
Am i on the right track?
Should I manually transpile this file?
Are there any other solutions to this rendering method?
You should try configuring the compiler with { output.library }. This should produce a compilation output that's ready for distribution, which means you can easily reference it in another document (and not need to worry about, say, transpiling/optimizing sources, because this was already performed by webpack).
Here's an example of a multi-part library produced by webpack. As you can see, the entrypoint exports are being assigned to window.

Angular 2/4/5/6 PathLocationStrategy dynamic base href fails for child routes

I followed this post regarding calculating the base href dynamically at run time so a hard-coded path does not have to be specified at build time: Angular 2 / 4 / 5 - Set base href dynamically
It works great as long as the navigation is initiated by client side router navigation. However, I ran into an issue when a child route is hard-linked to or refreshed (this works fine with top level routes).
The problem is the .js links in the index.html are relative to the current path (or base href if specified). Normally, this is fine as the route /base/parent will look for the .js files in /base/*.js or the base href statically specifies where to look. However, in the case of the dynamic base href and a child route, the .js files will be pointing to /base/parent/*.js which doesn't exist. Furthermore, when using one of the standard web-server 'redirect to index.html' configs, it will result in a 404 causing the .js file to be rewritten to 'index.html' and the page load fails.
Is there any way I can use theadynamic base href & use child routes in this way?

django retrieve data from database using ajax and update section

I am new to django, I was trying to design a webpage where a project section will have all the projects, on the same page there will be module section and under that module section there will be commits.
Now, What i want is when the user clicks on some project the module section should get updated with the modules under that project. I was able to do this much. (Here is everything you need to reference, you might need to hop into feed app there)
But the problem is, I used this in my ajax to update the module section.
$('#module_section').html(data);
Now the index.html doesn't know about the show details button in my module section (as it is retrieved from detail.html, my detail.html has the show details button which will show the commits done under that module) and when I press the show details button in my module section on the index.html page nothing happens, obviously.
I need a javascript/ajax that may be able to do a query like "Select * from module where project_id = 'some_id' " (Not sure about the syntax), and then update my module section accordingly so that when someone clicks on show details of module section he will be able to see the commits done under that module.
Any Suggestions would be highly appreciated, <3 in advance.
Create your html modules in separate templates. Lets say you have "index.html" and "details.html". Suppose both of these have a module that shows commits (call this the "commit module").
Create a separate html template that contains your module. call it "module_commit.html".
Then link a separate javascript file to it that contains all the javascript that contains it.
Now create a server side api for this module. This includes urls/views that return data and perform actions for your module.
Connect the modules javascript to call the api views and place the data in your module. ex:
Suppose you want the module to display a list of commits. You would create a view/url that returns the list of commits in JSON format. Then create a javascript function that, using ajax, calls this url endpoint and inserts the data into your html module (I would suggest using jquery for all of this because it is a lot easier to work with than vanilla javascript).
Now create an init function in your modules javascript file to make the needed calls to populate the module and set event triggers and events.
Now include your modules template in the main templates (index.html, details.html, etc...). Make sure the init function is called somewhere after the page loads.
Your code will have this layout:
api (models/views/urls)
A | (JS calls api to perform actions and retrieve data)
| V
javascript
| (Puts results from api into the modules html)
V
html
With this solution, you can just include ({% include 'module_commits' %}) the module in any template you want, call then init function in the javascript for that module, and it will work on any page. Just make sure your html ids don't conflict with others.

Handling Dynamic Routes Without a Server

Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?
your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.
I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.
It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.

Categories

Resources