I have five variant my app and all of this have same functionality. But HTML templates are different.
Now i have five almost same *.ts files. For optimize, i have one of approach - make a logic to services, and after provide it to component, but i don't like it.
Can you help me solve this problem?
I don't want make component dynamically
I don't want use a lot of *ngIf in template (for each variant)
I wanna 1 *.component.ts and 5 *.<%variant%>.component.html and 5 *.<%variant%>.component.scss
(and i will choose one of <%variant%> in environment or like UseClass with Services)
I wanna IDE (Webstorm) support - binding, link html variables with *.ts
Yes, I know what people ask this question before and Templates in Angular are compiled into JavaScript by the AOT, and this impossible. But maybe somebody solve it from custom plugin, webpack config or something else
Related
I have the following scenario. I am writing a complex component that is using three-js:
The component manages complex mouse interactions and updates other elements in the DOM using two-ways data binding: variables, JSON objects, mouse interactions, etc.
I start using the component in few part of my application but I needed to substantially modified the threed-viewer.html so I made a copy of the whole component ending up having duplicates that are hard to maintain.
All flavours of the component share 80% of the javascript code and bindings but they have substantial UI differences. So I had the though of create different 3 basic component (minimal javascript code) that I can inject into the threed-viewer.html using a selector and a variable to decide which template to load:
this does not compile as the html files have all the variables and bindings from the original components but they are not present in the typescript files.
Another solution could be to have a single html managed via ngIf but it will result in a long, messy, difficult to manage file. Is this the only option I have in Angular. Any other idea?
Thank you.
You can have a shared service and then add three different components but js code won't be duplicated as it will be in the service.
Use two way bindings in all 3 components using the service variables, functions and objects
I have did long time ago - the pages and article editor. Two different templates, same code.
I used articles component as "parent", and extended it to news editor.
Looks like this:
#Component({template: 'blah blah blah'}) export class parent {}
#Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}
Hopefully this is the solution you were looking for.
Two different components, two templates, one code.
Of course, you can have the "parent" abstract class for both where you can save all methods you need.
It's OOP baby ;)
I frequently use PhpStorm's Extract variable & method refactorings. Is there a way to add/extend functionality that could create a new template file from the selected code, prompt for desired template path, and create an include/require statement for that template?
I'm asking either for an entry point into coding this functionality, or extending existing functionality. Or maybe it's already available and I missed it.
As #Ástþór mentioned, there is no such way to change the refactoring templates.
You can use surround with live templates to emulate this behavior. This will not find duplicates and will not replace them as well, but may be it's close enough what you want.
Add a surround live template like this one. Open the editor with Ctrl+Alt+S:
Edit the variables in order to get a nicer UX:
Select the variable you want to extract and select Code > Surround with Live Templates from the menu or press Ctrl+Alt+J.
Adjust the templates to your needs.
Live template variables
HTH
No, there isn't. You can ask this question at https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development
Other useful sources: https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html & https://confluence.jetbrains.com/display/PhpStorm/Setting-up+environment+for+PhpStorm+plugin+development
I am running a springboot application with Thymeleaf and reactJS. All the HTML text are read from message.properties by using th:text in the pages, but when I have th:text in reactJS HTML block, reactJS seems angry about it.
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
The error is:
Namespace tags are not supported. ReactJSX is not XML.
Is there a walkaround besides using dangerouslySetInnerHTML?
Thank you!
There is no sane workaround.
You are getting this error because Thymeleaf outputs XML, and JSX parsers do not parse XML.
You did this because JSX looks very, very similar to XML. But they are very, very different, and even if you somehow hacked Thymeleaf to strip namespaced attributes and managed to get a component to render, it would be merely a fleeting moment of duct-taped-together, jury-rigged code that will fall apart under further use.
This is a really, really bad idea because JSX is Javascript. You are generating Javascript on the fly. Just to name a few reasons this will not work in the long term:
This makes your components difficult if not impossible to test.
Reasoning about application state will be a nightmare as you will struggle to figure out if the source of a certain state is coming from Thymeleaf or JS.
Your application will completely grind to a halt if Thymeleaf outputs bad JS.
These problems will all get worse with time (Thyme?) as as developers abuse the ease with which they can render server-side data to the client-side, leading to an insane application architecture.
Do not do this. Just use Thymeleaf, or just use React.
Sample Alternative: I primarily work on a React application backed by a Java backend. So I understand how someone could stumble upon this hybrid and think it might be a good idea. You are likely already using Thymeleaf and are trying to figure out how you can avoid rewriting your servlets but still get the power of React.
We were in a similar boat two years ago, except with an aging JSP frontend, but the difference is negligible. What we did (and it works well) is use a JSP page to bootstrap the entire React application. There is now one JSP page that we render to the user. This JSP page outputs JSON into a single <script> tag that contains some initial startup data that we would otherwise have to fetch immediately. This contains resources, properties, and just plain data.
We then output another <script> that points to the location of a compiled JS module containing the entire standalone React application. This application loads the JSON data once when it starts up and then makes backend calls for the rest. In some places, we have to use JSP for these, which is less than ideal but still better than your solution. What we do is have the JSP pages output a single attribute containing JSON. In this way (and with some careful pruning by our XHR library) we get a poor man's data interchange layer built atop a JSP framework we don't have time to change.
It is definitely not ideal, but it works well and we have benefited vastly from the many advantages of React. When we do have issues with this peculiar implementation, they are easy to isolate and resolve.
It is possible wrap ReactJS apps in Thymeleaf. Think if you want a static persistent part (like some links, or even just displayed data), you could use Thymeleaf. If you have a complicated part (something that requires DOM repaints, shared data, updates from UI/Sockets/whatever), you could use React.
If you need to pass state you could use Redux/other methods.
You could have your backend send data via a rest API to the React part and just render your simple parts as fragments or as whole chunks of plain HTML using Thymeleaf.
Remember, Thymeleaf is really just HTML. React is virtual DOM that renders as HTML. It's actually fairly easy to migrate one to the other. So you could write anything "Static" or that does not respond much to UI, in Thymeleaf/HTML. You could also just render those parts in React too, but without State.
Thymeleaf 3 allows you to render variables from your Java to a separate JS file. So that is also an option to pass into JSX
function showCode() {
var code = /*[[${code}]]*/ '12345';
document.getElementById('code').innerHTML = code;
}
Now you can use data- prefix attributes (ex. data-th-text="${message}").
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names
I have a variable in js. I want to get it from html page by intellisense.
js Code :
var buyer ="Addidas"; in js file.
Now I want to get it in html body as intellisense.
{{buyer}}
try to read `Angular official document,
In your AngularJS controller:
$scope.buyer = "Adidas";
In your html:
{{buyer}}
WARNING: You won't just know Angular once you have intellisense enabled, you will actual have to spend some effort learning it!!!
To enable intellisense follow these steps:
1) Learn Angular by reading the documentation, blog posts, looking at angular projects in Github and following the questions in this site.
2) Learn about unit testing Angular and write some tests.
3) Practice what you learn by doing a few small sites with tests.
4) Once you have done the basics and put the effort in to learn the technology you will realise that just because you use angular it will not give you intellisense in notepad.
5) Once you have this epiphany you could start using an IDE like WebStorm which offers intellisense in most Angular apps if your project is structured correctly.
http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/
There is no intellisense for templates in Visual Studio. Yet. There is a lot of interest in this, especially within the context of Typescript and angular.
More interesting than just having intellisense for templates would be having a build fail if the variable isn't used isn't in the scope.
Unfortunately none of this exists yet.
Is there a way to split a single HTML page (purely static, HTML + JS) in VS2010 (I use VS2010 + ReSharper for my HTML /Js coding) into parts, but get / build a single page at build time.
There was such a feature with Dreamweaver (I have used this years back, think it called libraries). If I was using PHP I'd use something like Include at runtime.
My page contains several div sections serving as tabs, only one visible at time. I want to place the code between these tabs in a single file, to make it easier to maintain. But in the end I do need one single, static HTML file. Again, I want to do this a build time, not at server side.
<DIV>
many lines of HTML
</DIV>
should be replaced by something like
<DIV>
#include tab1.html
</DIV>
I could write a script building the static page and hook it into VS2010, but is there some extension or function already existing?
-- Follow ups on using T4 ---
VS2010 - Assign html code formatting to T4 (.tt) file
VS2010 - disable validation for particular html file (not all files)
I ran across this question while searching for something else. You've probably moved on, but what the heck, maybe the answer will help someone else:
You could get so-called T4 templates to do this:
http://msdn.microsoft.com/en-us/library/bb126445.aspx
Alternately, Microsoft has similar capabilities in Razor, and it's more specific to HTML.
Here is a comparison of the two:
http://blogs.msdn.com/b/garethj/archive/2011/03/11/t4-vs-razor-what-s-the-skinny.aspx