I'm trying to develop a website in Angular. My website happens to be a Multi-Page Application (MPA), where different pages have been developed as different components. I have developed those pages of the website, I was just wondering how can connect those components/pages together like on a button click, the user should be directed to another page, etc.
Also, it would be really great if anyone could provide any references to some resources or tutorials where they teach us how to develop Multi-Page Application (MPA) with the help of Angular. I searched online for quite a while and didn't find anything since Angular is mostly used for Single Page Applications (SPA).
Any help would be highly appreciated. Thanks!
In your scenario it is really important to have some kind of state saving as a SPA does lose its state on hard reload i.e. CTRL+R.
A common approach would be the use of the localStorage to preserve your data that you need to restore the state, but the downside of it is the security as it can be viewed from the devtools.
Another approach would be the use of cookies which requires a backend. I think this is straight forward and commonly asked how to implement cookies.
That's the same approaches how other SSR (server side redered) pages are handle its state.
Additionally:
I think I kinda guessed your problem as you just have different component on different routes. Angular is a SPA, but this does not mean it cannot change the route. It will change the route, but without reloading the browser. There you can reach other components. More about that I would recomment to read this Tour of Heroes example:
https://angular.io/guide/router
Related
I work for a medium sized company that has an application used by a few thousand people and is built primarily with HTML,Javascript, aspx, xml, xsl, and runs on IE 11. This application is proprietary and not designed in house but we have access to the code for possible modifications and its just sitting out there on the server(s). A new project has come down the pipline for an enhancement\adjustment to be made to a particular area of the application and I'm wondering what kind of web framework I could use to do this work. I am really just needing to call an enterprise service and get data back, display it, and that's about it, so its not incredibly hard. I am worried though about how to integrate it with the existing application.
I am not sure how this scenario would go:
User navigates to page A inputs data, I want that data to go to a controller or something I built, fetch info and send it back to page A. I was thinking of using Spring MVC but not sure. Any feed back or suggestions would be greatly appreciated! I know this question doesn't include code, so please don't hate me.
Thank you.
From a very high point of view and with no knowledge about any specific requirement.
If you have already an application developed in ASP.NET, it's better that you continue the development of the new module of the application on the same platform.
If you want to develop a new module (actually a new web app) that looks like the old application but with a totally different platform like Spring MVC (could use any other), you can reuse the existing css styles and databases.
For integration purpose you could modify the original application in the menu(or links) that redirects you to the new module and implement a single sign on server (this will required work on both applications) to made the transitions smoothly between both applications (something like a portal style). Note that they will have a different context application path.
It's almost a month learning angularjs. What I have understood till now is that angularjs forces you to create SPA's though you can create multiple page application/website as well but I don't know how as I don't find good examples out there. Even angularjs seed projects are using SPA concept.
By multiple page website some questions I need answers are:
Will Multipage application able to handle query params just like SPA easily? if yes then how? i.e would we use ngRoute or something else?
Until now I have concluded that there is no way of communicating two controllers if they are on separate pages other than using localStorage, sessionStorage or cookies. Right?
Will we able to handle global events across multiple pages? i.e. If two tabs are open and on 1st tab user logs out, will on second page I can get event notification? (Well I am sure yes, but experts can better tell)
Although SPA is easy to implement (well for my case) and makes HTML fragment easy to handle, but I don't have that case right now as it's not application that I am building, I have complex site that SPA is not the right fit. In short I don't want to use ng-view. So please guide with examples if possible.
If you don't use ng-view, then $route is almost useless. You will have to handle param manually in that case
You are right.
Not possible to communicate between two tabs by angularjs. Angularjs will be instantiated independently in two tabs. You will have to maintain it from server end to the opened tabs
I'm thinking of using Angular or React for a new web project but the SEO are an important part. From what I have read there are ways to solve it but it always results in keeping two page version alive or using an external service that renders the pages.
This sounds like bad options to me?
I have also read some unclear info about that search engines now can read javascript webpages with for example angular or react?
Could someone clarify this for me? Will SEO be as good with Angular as if I was using, for example, ASP.NET MVC?
Can't speak for Angular but React.js is perfect for SEO. The reason is that every state of your application can be fully rendered server side.
So this is not like your traditional ajax page where you have your base view and then do some ajax/javascript stuff to go to the next state.
As I understand it the "conventional" way to handle page reloads is to duplicate functionality and presentation on the web stack using its controllers, views, and models. I'd appreciate insight on other (possibly better) ways to handle these situations. As well as feedback on the following two approaches:
Reload the js framework based app/suite on every web (stack) app page thus
forcing the js framework to handle all routing and rendering
Use the web stack to route interactions and then use backbone to
display views depending on the interactions.
Thanks!
IMHO the 2. approach is the one Backbone has born to :)
Following this approach we'll finish with what is called Single Page Application.
But to achieve this in medium-large applications can be very exhausting. You have to deal with complicate Router that has to be in charge of initialize or replacing elements, also you have to take care with memory leaks and ghost Views. You have to define a system to refresh your Collections and Models due you are reusing them in every page, ...
So a combination of both approaches can be also a good idea. You can split your application in modules like: ManagingUsers, ManagingPosts, ManagingMedia, create Single Page applications for these modules, containing index, edit, show, ... actions that don't reload the page, and if you move to another module the page will be reloaded and in company of the whole framework and with a healthy memory reset.
I have build a basic backbonejs application and it is one page now handling login, list view and detail views.
I now need to add more business objects to be viewed listed and edited, and I was wondering if there is a best practice on when to move beyond the one page?
BTW it is backbonejs on the front, nodejs and express is on the back
Not really.
You can build the entire thing as a single page app using a router to handle the dispatching between all the various views.
You might want to make "namespace" pages, so like /auth/ is a file that loads just the auth parts of your site, /posts/ might be all the blog posts, etc.
This way you're not loading a ton of javascript into the browser in case someone doesn't never need to use a certain function.