
Angular 2 Style Guide - lobo_tuerto
https://angular.io/styleguide
======
pbreit
Any tips for a mere mortal who looks at Angular and finds it incomprehensible?
React? Vue.js? Or just stick to good ole Rails/Python for now?

~~~
jashmenn
One way to think about Angular is like this: Different modules on your page
are broken down into components, which are like "regular" HTML tags except
that they have JavaScript functionality attached to them. Your app is a tree
of components.

React is great as well, but if you find Angular incomprehensible it's not
clear you'll find React much easier.

One major difference between React and Angular is that the Angular community
_tends_ to separate their templates from their "controller" code, whereas the
React community _tends_ to intermix their templates with code ("PHP" style).

The result is that in Angular you have a few funny characters in your HTML to
learn (e.g. `*ngFor="let foo in bar"` for looping) whereas in React you'll use
JSX and use JavaScript for loops.

It's pretty clear to me that component-based webapps are here for the long
haul. Even if WebComponents ends up being the future, the concepts you learn
in using either Angular or React will be more-or-less transferrable.

It seems to me that Angular and React are becoming more similar over time. For
typing, Angular uses TypeScript and React uses Flow. For data architecture,
both communities are gravitating towards some sort of Flux (redux / ngrx). You
can even use JSX in Angular if you want to.

Shameless plug: I've written a book on Angular 2 which talks through, step-by-
step, how to understand Angular. The first chapter walks you through your
first app and you can get it (for free) here: [https://www.ng-
book.com/2/](https://www.ng-book.com/2/)

~~~
nawitus
Why use Angular 2 when you can use web components?

~~~
zip1234
[http://caniuse.com/#search=components](http://caniuse.com/#search=components)

Because you can't practically use web components. Only Chrome and Opera
support them. Angular2 has support down to IE 9.

~~~
rictic
The web components polyfills have support down to IE 10:
[https://github.com/webcomponents/webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)

~~~
pfooti
Start with this:
[https://github.com/webcomponents/webcomponentsjs/issues/212](https://github.com/webcomponents/webcomponentsjs/issues/212)

Which is why I stopped messing around with polymer. Basically adding the
webcomponents polyfill to your DOM tree (because it touches so many things)
breaks contenteditable in some weird ways. Which can be limiting to people who
use rich text editors (many still decorate contenteditable divs) although
iframe-wrapping the editor fixes the contenteditable breakage (at the expense
of introducing other problems with extending your editor - try adding custom
(say) atmention autocompletes to something in its own execution context).

Also, webcomponents have had some pretty major syntax changes over time,
especially when it comes to shadow-piercing styling vs other styling
selectors.

Ultimately, I'm looking forward to webcomponents. I can't wait to have proper
namespaces and all that. In the short run, though, I've tried the
webcomponents polyfill (I wrote a lot of polymer 0.X code for a webapp that I
eventually ported to angular 1.x instead when the polymer 1.x syntax meant I'd
have to rewrite a lot anyway), and it's not Enough.

------
gremy0
"Write Angular 2 with style"

> Request javascript version

"This chapter is not yet available in JavaScript. We recommend reading the
TypeScript version."

LOL

~~~
spriggan3
Same with their tutorials on angular.io .

Angular2 is a framework build for Typescript and Dart, barely for Javascript
and certainly not for ES5.

~~~
zip1234
TypeScript is fantastic. Maybe it will be the undoing of Angular2 but I doubt
it. The Angular2 team chose TypeScript because writing large applications
using the limitations of ES5 is extremely difficult. TypeScript makes the task
manageable and compiles back into ES5 (or whatever you want). The tooling is
lightweight and freely available. Give it a try!

~~~
spriggan3
Typescript isn't Javascript. I gave it a try already,for 2 years, and I used
Angular 1 in production, I'm moving to something else like React or Vue.js,
both supporting actual Javascript (even JSX isn't necessary). Good luck with
your non standard syntax like decorators... Angular 1, despite its internal
complexity, was just one file dropped in an html page and you're ready to go.
There was nothing that mandated a complete rewrite with breaking APIs at first
place. I complained to Igor 3 years ago about it. Well let's see how it goes.

~~~
radicalbyte
Typescript is ES with totally optional type information, which protects you
from a whole lot of bugs and for javascript bad API design (i.e. horrors like
APIs which return different types with different input).

I can understand that it feels strange, especially to someone who has had
little exposure to languages outside of Javascript. However it is very much
worth investing the time in learning it.

15 years ago I was making the same argument to Visual Basic developers about
C#..

~~~
gshulegaard
I'm sorry but I will _never_ use Angular 2.0 unless it can be used with
straight JavaScript. I am a backend developer that, for personal projects,
needs to do small amounts of front-end work. Anything that potentially
increases complexity or involves a redundant learning curve (learning yet
another _imperative_ language that compiles into JavaScript anyway) is not
something I am going to invest time in.

It's a shame too, I was a pretty big Angular fan. I used Angular, Ember, and
even React and for several reasons I ended up settling on Angular as my
favorite SPA framework (back in 2014 and 2015). Back when they announced
Angular 2.0 would be TypeScript based, I felt like it was a mistake and that
feeling has only gotten stronger as TypeScript has continued to fall behind
EMCAScript ([http://kangax.github.io/compat-
table/es6/](http://kangax.github.io/compat-table/es6/)).

If TypeScript adopts compilation down to WebAssembly, that would be a reason
to learn it/give Angular 2.0 a chance for me, but until then I will stick to
Angular 1.0 or move towards React for my next project...which is a shame
because I really don't like Reacts focus on the V of MVC. Maybe I will go back
and check on Ember, but I wasn't a fan of it's tight binding of Models to
Views (sometimes I just need a VC or a V and not a full MVC)...but maybe it
has changed.

~~~
squeaky-clean
> I'm sorry but I will never use Angular 2.0 unless it can be used with
> straight JavaScript.

It can. Typescript is just optional information added to your Javascript. All
Javascript is 100% compatible TypeScript. You can use TS extensions anywhere
you like, your whole codebase, only certain function APIs, or nowhere at all.

------
ben_jones
People have brought it up but I feel the need to drive it home: while
Typescript is amazing and, when used correctly, can allow more expressive and
bug-free code then es5, adoption will suffer greatly and has the potential to
detract from the overall success of Angular 2.0.

~~~
rubber_duck
Typescript is _the_ feature of Angular 2.0 for me

There are plenty of ES5 frameworks out there - the biggest value proposition
Angular 2 brings for me is that it's built with typescript from the start and
it leverages all of it's features (ie. modern OO tooling that comes with
languages like C# and a language that feels familiar to C#/Java devs) and
builds a GUI framework on top of it that works in the browser.

Without being native TS Angular 2 would have very low appeal to me.

~~~
Roboprog
You know, there are some of us who _like_ the fact that Javascript is a
dynamic language that supports functional programming (FP) style.

For us, "being like Java" is not a plus. My IDE already does a pretty good job
at type inference while I am editing, as well as displaying the comments about
each symbol as I click on it.

------
netinstructions
You could also run the Codelyzer (A set of tslint rules for static code
analysis of Angular 2 TypeScript projects) with the recommended configuration
to match this style guide.

[https://github.com/mgechev/codelyzer](https://github.com/mgechev/codelyzer)

------
bshimmin
I don't much care for Angular, but this is some seriously beautiful
documentation.

------
GnarlyWhale
Happy to see the pace at which the angular team is updating their support docs
now that they are in beta.

~~~
lobo_tuerto
You mean now that they are in release candidate! ;)

------
chvid
So Angular is all TypeScript now?! With a recommendation for Microsoft's
editor at the end of the article.

Anyways - it seems like a set of reasonable conventions; Java/C# programmers
should feel right at home.

The only thing that sticks out is the file name convention. If you only have
one thing pr. class then why not use name as it is directly in the file name?
(HeroComponent.ts instead of hero.component.ts)

------
r0m4n0
I'm really excited to see there will be an official style guide that was truly
lacking in v1.x

Having worked on various teams (now we follow
[https://github.com/johnpapa/angular-
styleguide](https://github.com/johnpapa/angular-styleguide)), its truly a
maintenance nightmare without a verbose Angular style guide for reference.

~~~
lobo_tuerto
Lacking how? John Papa's style guide has been around for some time, and it's
endorsed by the Angular team.

He is in charge of the Angular 2 style guide too. I bet he will do a good job
with this one too.

~~~
devNoise
Just to follow up. John Papa's original style guide was create after he had
experience with building Angular 1 apps and got feedback from other
developers. An Angular 2 style guide can't be fully formed right now because
no one really knows what all of the best practices are yet. As all of us get
more experience using Angular 2, the style guide will get better.

------
robotnoises
From:
[https://angular.io/styleguide#!#style-03-03](https://angular.io/styleguide#!#style-03-03)

> Consider naming an interface without an I prefix.

They give the same recommendation in the Typescript style guide, but I still
don't understand why.

~~~
netinstructions
This is a common discussion I see on the internet[0][1][2][3]. Paraphrased
below

You shouldn't need to know whether the client is using an interface or an
implementation class. List represents a list, and a User represents a user -
not an IUser. Another problem with using I, is that (oddly) we use it to
communication the implementation decision of using an interface. Usually we
don't want implementation decisions expressed so loudly, because that makes
them hard to change.

[0][http://programmers.stackexchange.com/questions/117348/should...](http://programmers.stackexchange.com/questions/117348/should-
interface-names-begin-with-an-i-prefix)

[1][http://stackoverflow.com/questions/541912/interface-
naming-i...](http://stackoverflow.com/questions/541912/interface-naming-in-
java)

[2][http://stackoverflow.com/questions/5816951/prefixing-
interfa...](http://stackoverflow.com/questions/5816951/prefixing-interfaces-
with-i)

[3][https://blogs.msdn.microsoft.com/brada/2004/02/03/why-do-
int...](https://blogs.msdn.microsoft.com/brada/2004/02/03/why-do-interface-
names-begin-with-i/)

~~~
robotnoises
Excellent reply, thank you.

To me, it still seems more about people's gripe over the very existence of
interfaces.

If anything, using IUser in lieu of User is a pretty clear signal to, say, an
uninitiated developer, that you shouldn't be attempting to create an instance
of "IUser."

------
teen
In the first suggestion they suggest breaking up a component into its own
folder. That quickly becomes a completely mess imo. Better to prefix the
filename with the component (hero.service.js) and leave everything in the same
directory.

~~~
EugeneOZ
If each component have 3 files, how can 10 folders (with 3 files inside) be a
more mess than list of 30 files with prefixes?

------
abiox
does angular2 support preloading data/setting initial-state, such as by
server-side templating?

if not, can i run angular2 in, say, nashorn to generate view data?

~~~
kabes
Yes, it's called 'angular universal'. Here's a talk of ng-conf:
[https://www.youtube.com/watch?v=TCj_oC3m6_U&index=5&list=PLO...](https://www.youtube.com/watch?v=TCj_oC3m6_U&index=5&list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j)

------
Roboprog
How many symbols are all of those .ts files going to put into the global
namespace?

~~~
scriby
The .ts files will be compiled to AMD modules, so none of the declarations
will be in the global scope.

~~~
Roboprog
Thanks, I had not seen that before. Interesting trick: Call a "registration"
function with a string array (of dependencies) and an anonymous function
(IIFE) with parameters for each dependency which the registration function
injects. Thus, the dependencies are accessed as closures over the outermost
func's params, rather than as globals.

E.g. -

    
    
        define( [ 'jQuery' ], function ( $ ) { ... return { ... } } )
    

where the 1st elipses are all the private/setup code, and the second elipses
are whatever methods/properties the module exports. (this dummy only wants
jQuery, but the list can be longer)

------
meeper16
Looking forward to forced indentation + javascript.

~~~
ihsw
It already is forced -- see: ESLint.

------
vmateixeira
Anyone getting along with angular forms?

