I know the question looks like some others I could read but it's not the exact same issue in my opinion.
I have a "loading screen" (small piece of HTML) in my Angular application. This loading screen is present in three places :
When the application is not loaded yet (so inside the tag of the root component in the index.html : <app-root>my loading html</app-root>
When the router inside the root component is not yet ready to display the "final" component. (See answer here for more detail)
In the "final" component itself waiting for some data to be loaded from an HTTP service.
In the second and the third cases the "loading screen" could be in another component. But it's not possible for the first one since another component will only be displayed after the app is fully loaded and we want the first loading screen to be visible as soon the user get the index.html.
So for the moment I have this short "loading screen" HTML duplicated in multiple places.
I don't care if it's duplicated once built and delivered to the user but from a code point of view I want it to exist only once... (You know how it is, when someone will have to change the message it will be forgotten in the other places...)
I could use iframe (or object but W3C advise to use iframe instead) but people here want to avoid it at all cost so I think the code duplication will be preferred to this solution.
I could also have a small JS to do it (like this answer) but it feel wrong to add a "wild js" in an Angular app...
My question is : Do I have a way to include HTML file into another HTML file (like the "include()" in PHP) with some markup (like in this answer about Service Side Include) that could be resolved during the Angular compilation?
I mean the AOT compilation is already checking the HTML template so it could be quite easy...
Thanks in advance!
It's not in the compilation time, but a way to do something similar to what you are asking, is this:
You could have your "loading screen" html code as a component (for instance, app-loading-component), declared and exported inside a Shared Module.
Then, in the component 'X' in which you want to use it, you have to import the Shared Module in the section imports:[] of the module of that 'X' component, and used it in your HTML in the usual way:
<app-loading-component></app-loading-component>
Related
I have a service which is called after events which trigger page content changes. This service currently inspects all the viewable HTML on the rendered page for key words and then creates links to a glossary where those key words are used. The page content comes from many sources, including various components and external textual data. Initially this was done by finding all the elements and then searching and modifying the nativeElement.innerHTML which works fine on events that trigger a complete page refresh; in components where the text is based on template bindings, those bindings won't update after the innerHTML changes. I know modifying the innerHTML is bad...
I've tried using the root ViewContainerRef, and ViewRef as starting points but don't see way to access all the page content including content in multi-level child components. Additionally some of the content is added via router-outlet. I was hoping to either dynamically modify the templates, or the rendered content while allowing the component to still render the content when data changes and my service to post process again. Some components are from imported libraries, or receive their data directly, so modifying the component source code doesn't seem like the best option.
I found that by temporarily disabling, forcing change detection, then enabling the component on a data change, it would cause the component to be removed and recreated with working bindings. This is not an optimal solution, but did work as an initial fix. I'll attempt to try the above solution.
Using a MutationObserver you can subscribe to changes of text in the document, then you can manipulate the DOM in a way that doesn't break Angular, i.e. don't change the innerHTML of a node, but rather, insert a sibling with the new HTML and hide (don't remove) the original node.
I've written a stackblitz that demonstrates this.
https://stackblitz.com/edit/angular-highlighter2
EDIT I created an Angular library with all the code, see https://www.npmjs.com/package/ngx-html-highlighter
I'm coming from a javascript/react/react-router/webpack background to a clojurescript/om environment.
With webpack & react-router it was possible to split my code and only load the javascript needed. E.g. on /login I would only load the js necessary to display the login-page everything else would be left out.
How do I the same with clojurescript/om?
Apparently it's possible to split your code into multiple files: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
The question is how do I only load the code necessary to render the current page: /login for example...
With webpack I would manually write require.ensure to asynchronously load the necessary javascript to render a certain page. React Router supports this very well.
Is there any equivalent in clojurescript without making multiple html files and each giving it the right script tag with the splitted code through google closure modules?
Sadly I don't have a concrete example yet, and I agree that webpack and react-router make this really easy. There are some links that may direct you to get it working:
Code splitting: http://swannodette.github.io/2015/02/23/hello-google-closure-modules
Manually adding script tags to html files
Actual docs: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
Dynamic loading of cljs modules: https://rasterize.io/blog/cljs-dynamic-module-loading.html
Uses multi-methods for route definitions to dynamically add implementations when loading more code
Dense read, there is no easy tooling regarding this use case right now, but the article has all clues to get it working
I hope this helps. If you get around to implementing this in an OSS example it would be great if you could share the link.
I have created a page in DNN 7 and added the standard feedback module available at Codeplex to it. Now I want to link to this page using a hyperlink in the middle of another page (not from a menu).
I am able to see the URL for the feedback page via the admin pages and it seems to be consistent. So the obvious way would be to use the HTML module and simply hardcode the URL. But something feels wrong about that. I thought of creating a simple module, encapsulate the hyperlink and surrounding text in a control and use NavigateURL to obtain the URL for the feedback page. Unfortunately, I have not been able to figure out how to do that. I have seen a lot of information about getting the URL for other controls within the same module and even using ModuleID but nothing that would help me implement the code for getting the URL for a particular page at my level of experience.
Sorry about the long intro but I was wondering if it is good practice to hardcode the URL and if not how to programmatically obtain the URL for the feedback page.
TIA
The first argument to NavigateURL is TabId (pages are called tabs in the DNN API). To get the ID of the Feedback tab/page, you'll want to call a method off of the DotNetNuke.Entities.Tabs.TabController class; I'd suggest the static method TabController.GetTabByTabPath(portalId, tabPath, cultureCode), so something like this:
Globals.NavigateURL(TabController.GetTabByTabPath(this.PortalId, "//Feedback", string.Empty))
You're still hard-coding the path to the page here; you could have a setting, which would let you pick the page, but that seems like a bit of overkill for a simple link. The main benefit that you would get by hard-coding the path, but still using NavigateURL is that any changes you make to how URLs are generated (e.g. upgrading to the Advanced URL Provider that comes in DNN 7.1) will happen automatically.
Most folks don't worry much about programatically generating links in HTML content.
I happen to have inherited a drupal project where a common html validation error seems to occur on nearly every page. The validation error is so minor and easy, I actually only have to open any page up in the editor and the tinymce wysiwig editor will fix the problem automatically and I only need to save the page. Considering I will be needing to do this 30k+ times to apply it to the entire site, is there any way to have it either applied automatically to all pages or automated? Any and all suggestions welcome to help me speed up the process.
EDIT : Used solution
Since I'm not the most adept at finding a programming solution, I did find an addon for firefox letting me record et loop a series of actions called iMacros. Started it up in 5 different instances of FF and let it running all night and it's half done already. Certainly not the most efficient way of doing things, but may be a solution for those who, like me, aren't as advanced in programming.
Assuming you can loop through the pages somehow i would suggest to build a page where you include the code source into the editor root html element (textarea or whatever). Then after onInit (see the tinymce configuration options for this (setup parameter and onInit) ) you trigger the submit or save button which delivers the page to the server where it gets saved.
The pages textarea might then get filled with the code of the next page and so on...
The important part here is that your serverbackend is able to loop through the different pages and knows which page comes next when receiving the modified/corrected page code.
I am relatively new to Web Development, and I am messing with a Joomla template installation.
I managed to get firebug to make changes and Firediff to save them as a new CSS, and replaced the CSS file on the server.
What I would now like to do is edit the template elements, (mostly deleting unused template elements), on screen using firebug, and then save the changes to a new HTML document.
My trouble is that I cannot work out where the correct html is to replace on the server.
Only by using Dreamweaver I can ascertain that the file name is index.html, but there are many files called this on the server.
With the CSS file I was able to identify the server path and filename from the blue text in the right panel of firebug, in order to replace the CSS changes with the output from firediff.
Can I identify the location, (and ideally filename), of hte HTML document in the same sort of way from firebug?
You might want to read the template tutorials before removing anything from the template index.php. In general, you want the template to have provisions for every possibility that you might want. A well designed template will have the ability to display multiple columns in multiple positions as well as other positions to place banners, login boxes, weather widgets, or anything else you can think of. Then you simply code the template so that any position that is not being used does not get added to the final code of the page being displayed.
Official documentation - http://docs.joomla.org/Joomla!_1.5_Template_Tutorial
Once you have a good handle on how the template is supposed to work, the file you will be editing is in JOOMLA/templates/YOUR TEMPLATE/index.php
Be sure you get the whole module positions and collapsible module position thing before stripping anything out. A well thought out template will very rarely need any code editing, virtually everything should be done in the admin and with CSS page class and module class suffixes.