I have doubts on how to create a login page for the template BlurAdmin.
The Template has the index.html as masterpage. It has header, footer, sidebar, ... and the pages are loaded as template (ui-view).
But I would like to use login page the independent of index.html, I think the best way to create it using another ngApp, different from index.html, but how should I do? I looked much about, but the login.html is always loaded as a template (ui-view).
If you want to divide your application into few steps, it could be useful. So you can create separate index.html file which will include all html from logins template. Of course, you can also add another angular to this separate page to handle logic, but keep in mind how much logic you will need to add to this page, maybe it will be easier to use something with less weight for the login page.
Anyway, as a result, you should have the second separate application with included scripts and styles as it already implemented in the main application. So the answer to your question - you should handle building process for the second application which will be you login SPA, and you will have two single page applications with different scripts in each, they can use different angular versions or even different Frameworks.
Related
I have been working on a Angular application that unfortunately requires me to have two different index.html files due each needing to use different scripts. I originally attempted to dynamically inject the JavaScript however this wont work and proved troublesome.
Is it possible to have depending on the route change the index file loaded?
Ie.
http://localhost:4200/index-en.html
http://localhost:4200/index-fr.html
Im aware that it is best practice to use i18n to handle different languages however I must use separate scripts in each html file to generate the page content.
I want to write an application using NestJS. But coming from PHP, I am very much used to the SSR approach of rendering views for the client. Now, by using JavaScript, I could technically ask the server to not completely navigate a page, but just load the <body> element of the sent output, and then embed that into - and overwriting - the current view. By what I can tell, initially, this would work as I would just app.$mount(...) on the initially sent HTML and have Vue hydrate off that.
But what if I want to implement this across multiple pages?
The idea is, that by using SSR, I get to keep basically all SEO related features and can reduce the initially loaded JavaScript by taking advantage of WebPack's lazy-loading feature. But when a user navigates from page A (initially loaded) to page B (subsequent load), I would like to just replace/update the current content and then load the bundle apropriate to that page and hydrate.
Is that possible, and if, how?
So far, I know I would have to unload the currently used bundle to remove all references to events and objects from memory, and then load the new bundle in, which I can then use to hydrate the received view. And this does not take into account that a menu bar might not need to be treated separately, since it will only have to have the current location updated with a .current class appended to the relevant menu item. I might be wrong here, but that is why I ask :)
I'm trying to implement separate layouts for guest home page and admin page in an Angular 6 application.
The thing is, I have two different templates, each with their js and css files.
I found a way to use styles on a component level, but for the scripts, I cannot find any way instead of having some method that will load all the scripts where I need them and when I need them.
It's like, my guest home page uses totally different set of css styles and script files than my admin page. I know I should probably split my app into modules and then lazy load my modules, but I don't get it how I can make it to use different styles and scripts based on the page I'm currently visiting, or route. For now, i put my styles into a component that is my guest home page component, and I can do the same for admin and then separate them using parent and child routes, but how can i achieve the same for scripts and styles, without having loading them on the component level. Thank you.
i'll answer here and say that i've solved it by using separated service for loading scripts and will just inject the service in the component where i need it and provide id with an array of scripts that I need to have on that page.
I have one big information system consisting of diferrent subsystems. One of my objectives is to organize navigation and localization between these subsystems.
When I was generating view in backend via JSP I simply used jsp:include referring to special web-app which returns header with cross-site navigation and also this web-app was responsible to store user locale for all subsystems.
Now I switched to angular and found out that it's impossible to replace jsp:include with ng-include. I have 2 different ng-apps - header (coming from outside web-app) and current, say, subsystem1 ng-app. ng-include directive in header doesn't work because I have to bootstrap it, but I can't bootstrap header ng-app because it is absent - I'm fetching it with ng-include. Vicious circle.
Now I see one way to solve my problem:
Fetch header markup in second ng-app (non-header, subsystem1's ng-app) via ajax call to special header-web-app. Then, insert incoming HTML to header via simple DOM manipulations and bootstrap it manually. Disadvantage is obvious - I will make DOM manipulations in subsystem ng-app but insert HTML outside it because 2 different ng-apps must not instersect or be nested. Is it OK?
Looks like I'm inventing bicycle, so I'm asking here, how integrate cross-site ng-apps? Is it possible to share data between different ng-apps in one web page? I know, that it's possible to share data between controllers via services and factories and this is good practice. Is there any angular-way to share data between ng-apps?
Please, do not provide JSP-like solutions as I want to keep angular way of development and thus make only static pages with angular markup and make all server side job via ajax calls. Probably, I misunderstood angular way but now I'm seeing it exactly as I describe.
Method #1 from this site looks good for me. In short, any ng-app consists of markup anf js. JS can be simply loaded by script src=... and many ng-apps can be used as a modules of one big root app. Markup can be loaded by ng-include.
I am using RequireJS and I am creating a own script file for each page. However I also have some components that are included into some of the pages (server side). Should these pages also get their own script file, or should the necessary javascript be in the containing page? Some of the functionality for the included pages are common to many pages.
I think you'd be better off thinking about your javascript as reusable modules rather than page-specific functionality. So, say your page has a search box which initiates an AJAX request, a few date pickers, and a whole bunch of tabs. Each of these should be a module (or if the functionality they provide is complex enough, a few modules). By breaking down your app into small pieces that have very focused aims, you make it easier to test each bit in isolation (automated unit tests) and reuse the functionality elsewhere.
Now as to how to load your javascript modules, there's a point where it makes sense to strategically load stuff based on user needs (ex: core.js is loaded by default but search.js isn't loaded until the user accesses the "search" tab) but you can get pretty far just packaging everything into a single file (require's r.js tool does this for you) and using the same script file (main.js) on every page.
When using a single script file, keep in mind that your js will need to work when the target of it's functionality is not present. jQuery makes this super simple and you almost don't have to think about it - ex:
$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page.
I've also seen people set a data-attr on the body tag for the page - e.g. data-page="foo" and key js off of that:
var page = $('body').data('page');
if (page === 'foo'){
component1.setup();
component2.setup();
}
In your case, I would try building everything into a single file using RequireJS / AMD-style modules. Each component would get its own module file (mycomponent.js), your main.js would require() all your modules and init things appropriately, and finally you'd configure your r.js build to package everything into a single file when deploying to / running in production.
If you are interested in exploring this topic more, check out these posts:
Single Entry Point FTW
Single Entry Point Redux