javascript integrate angular frontend with existing website/project

Question

I have built a website already using bootstrap, but i want to integrate the website into angular to make it a single page app so that when a link is clicked, only that section which would be needed would be loaded from the server as the other sections would have been loaded already.

Providing more details to what I want to do. I have everything running inside my express.js project. but I want angular to handle the client side.

So when the website is visited, the content (more like template )is loaded unto angular, when a link is clicked the content of that link can then be uploaded from the server (this may be a form, a web page etc) this would then be rendered by angular within the section where the content section is supposed to be inside the webpage. Thus preventing full reloading of the website. So basically angular would get the information as either a json which it would then render into the webpage or an html which would contain a form etc.

How can i get that done? I have searched through google but came up with nothing eg integrate angular into existing website etc angular spa from existing website webpage

[UPDATE]

I am seriously under time constraint so this may sound somehow like an SOS, also pardon me if it seems as if I am trying to do something out of place. 1. The links(more like routes) are created inside Node.js. The links that would be shown would be determined by some information which the user would provide this is done at the server side. 2. I also notice that it seems as if there is duplication of routes which is routes are declared in angular and node.js I already have the node.js side running well I now want to connect it to angular. This may sound strange I moved the files which were in the current public folder of node.js to where angular assets, I came across a problem of providing the links which is only in node.js Any help would be appreciated

Answer 1

That's not how Angular or SPAs are intended to work. You should rebuild the site as an Angular website from the ground up.

With that said, what you want to accomplish is technically possible, but it would be a dirty solution. But if you really wanted to... if you had to meet a tight deadline or something... Off the top of my head, I see two options for accomplishing this.

1. Use an iframe on each Angular page to view each related original page. Depending on the functionality of your original pages, you'll probably run into some security issues.
2. Have each Angular page make a GET request to it's original related page, thereby receiving the HTML for that page, and then use something like .innerHTML to set the page content.

Again, I *highly* discourage you from trying either of these... just rebuild it in Angular. Otherwise you'll run into security headaches, and the users will still have to wait for a round-trip server request before seeing the relevant content anyways... and then having to communicate with the "sub-page" content from the parent Angular site... just no.

Answer 2

It seem as if i am late to the question I came across the same problem you had but I was able to solve it using angularjs, although this looked backward. I already had a website which I already built from a template, so I integrated angularjs into it and modified the links to include route through ui-router within the angularjs file. That allowed me to be able to use an existing website and integrate my angularjs work with it to pull out templates needed based on the link/route clicked