Is there a way to preview Angular template (i.e. see how HTML would be rendered) without starting the whole application?
I'm working on CSS styling and it would be easier to be able to see changes immediately.
Is there a way to preview Angular template (i.e. see how HTML would be
rendered) without starting the whole application?
You can't. There's only one way which is starting your Angular application. One reason is that in the Angular application, your CSS doesn't directly affect the HTML like in a normal standalone webpage.
Related
I have an angular app that I need to use as a source of the components for my new app that will be mostly using pure HTML. I need to get the HTML and CSS from the Angular app.
The problem is, that the app uses custom components such as <mat-icon> that are not standard HTML tags. I assume, that under the hood they eventually consist of simple HTML elements but I can't figure it out. Is there any method to convert an Angular website to plain HTML & CSS? I know that the dynamic content can't be extracted, but I mean only the view. Maybe there is a Chrome extension to do that? I do have access to the app source code, so it can be also some npm module.
How is it possible for a web application/website to have the same identical source code behind every page on the site with no change at all. I was looking at the crypto - fiat currency exchange website: (Remitano.com) and for each page on the site the code is the same. How could this be possible?
The site is most likely a single page application (SPA). This means that it dynamically adds and removes elements with JavaScript. This is why sites made with React, Vue, and Angular don't work without JavaScript enabled.
For example, if you look at the code of a Vue app, you'll see something like <noscript><strong>We're sorry but myvueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>. The content inside noscript only displays if the user has JS disabled in their browser.
I've got an application hook to work as explained in the very basic sample of the doc. The application does its job, renders its own templates and does all navigation back and forth.
But I am facing 2 problems:
After putting the hooked application an a page via the advanced settings of the cms, I am no longer be able to edit the page over the frontend. If I navigate in /?edit mode to this particular page cms toolbar dismisses and the /?edit mode is taken away.
How can I recover editing such an apphook'd page?
In the site's view mode (published apphook'd page) I have no styling and no base.html template stuff. So I miss the header menu coming from the base template and the footer which is generally added to each page by a static placeholder. Since I am not able to do frontend editing of the apphook'd page (as mentioned in paragraph 1), I am unable to embed the application into my well known page style.
How can I get the intimate styling back for such an apphook'd page?
I am working with
django 1.11.18
djangocms 3.5.3
python 3.7.2
Got it to go. Considerably following this instructions did the trick. I was able to overload the particular template from within the apphook application.
I have a single page application written in AngularJS. I need to put a UI5 text field there (for testing purposes) that I am using with Declarative Support.
I have 2 files:
index.html
sap.html.
In my index.html I have <div class="mainView" ng-view></div>
and there I inject sap.html into the index.html.
when I write this line in my index.html I see the sap text field:
<div data-sap-ui-type='sap.ui.commons.TextField' id='message' class='my-button' data-value='Hello World'></div>
However, when I put this code in sap.html the text field isn't being shown in the browser.
When I look in the chrome F12 source mode - I see that the UI5 related tag has been evaluted into textbox in the index.html. This doesn't happen in the sap.html (the "injected by angular ng-view" page) - I just see the tag "as is" - the DOM in the injected page was not evaluted.
Why is that happening? Does AngularJS bootstrap or life cycle
interfere with sap boostrap?
Any way to fix it?
I need to use AngularJS because it is a part of an existing app. A re-write of the app is not an option for me.
Thanks
I never came across this scenario and really do not consider this a good solution (but this is my opinion). I wonder why do you expect UI5 to be aware of AngularJS injecting markup dynamically?
However, the documentation shows an example of how to compile dynamically loaded markup. Obviously AngularJS provides an event to listen to reloads of ngView content, maybe it is possible to trigger the compliation there.
I am new to Vaadin.
I have created template for my web application in HTML and JS.
How to use the developed template with Vaadin as am not sure if I will be able to develop same template using Vaadin only?
It may be possible to re-use some of the layout of the template using the CustomLayout layout component in Vaadin.
You can also render the contents of a template into a Label component, and display the label in the application. See http://demo.vaadin.com/sampler#LabelRich for a small demo.
Generally, though, the idea of templates and "pages" is orthogonal to developing applications in Vaadin.