Hacker News Reader

Comment by tashoecraft | Hacker News Reader

You have literally never had to scatter each component across three files. From the first release of Angular 2, you had "single file components", with template, styles and js all in one file.

View on HN

It does appear I was wrong about the "until recently" bit: Angular still doesn't have a single-file component format like Vue or Svelte. Of course you can stick templates in string literals (and IDEA will even treat them as angular templates). Just be prepared to escape your quotes I guess. The official tutorial still uses separate files, and the tooling defaults to them too.

Honestly the real shame is that IDEs don't present a more integrated UI for separate files, and that on the other hand in my Vue apps I still have to argue over the order of script/template/style sections. I guess Angular at least avoids that second problem.

Isn't dealing with bare string literals for HTML-like syntax a terrible developer experience?

Not as much in Jetbrains IDEs: it detects the string is HTML and highlighting, formatting, and mode-specific functionality all just work inside the string. In an Angular source file, all the template properties like "ng-if" autocomplete too, not sure if any code completion inside props works though (it doesn't with the AngularJS 1.x I just tested, but that's a different plugin that's probably less capable). Have to be careful about escaping the outermost quotes too if you use them in the template. So not exactly terrible, but still a little bit janky.

You could do that with angularjs 1.5 components too. But afaik it was/is not standard practice to embed html and css inside your js, because many (most?) editors treat html inside a string as a string instead of as html.

Reply on news.ycombinator.com