AngularJS 2 Component Naming Convention - Beta Documentation Feedback

[nu.ev...@gmail.com]

Feedback for AngularJS 2 Beta tutorial and style guide.

Part 4 of the tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt3.html it is suggested that a file be created named:

hero-detail.component.ts

This component is added to the file:

import { Component, Input } from '@angular/core';


@Component({
  selector: 'my-hero-detail',
})
export class HeroDetailComponent {
}

Then in the HTML file we add the element:

<my-hero-detail></my-hero-detail>

This seems inconsistent to me.  Why would we not match the file name, selector, and class name?

Why not let the selector match the file name as follows:

    selector: 'hero-detail',

and

<hero-detail></hero-detail>

It seems like fully consistent names would aid in tracking down the correct component.  I am brand new to Angular 2, and want to make sure I'm not missing something here.  

The Quickstart guide as well https://angular.io/docs/ts/latest/quickstart.html.

The component file is named: 

app.component.ts

The selector name / element is:

<my-app></my-app>

I expected it to be:

<app></app>

The Style Guide is a little more disconcerting https://angular.io/styleguide#!#components

The component file hero-button.component.ts defines an implementation for

<toh-hero-button></toh-hero-button>

What if down the road my app directory contains the following:

 

app.component.ts
app-one.component.ts
my-app.component.ts
test-zero.component.ts
test-one.component.ts
super-hero-button.component.ts
hero-button.component.ts
hero-button-promo.component.ts 

Let's say I open up index.html and find the element <guess-which-component></guess-which-component>. Which file in the app directory contains the component definition?  

It would be nice to see the tutorial and style guide demonstrate best practices and highlight pitfalls in this area.

All in all the documentation seems to be continually improving which is <awesome></awesome>.

[Christoph Zwerschke]

Am 08.08.2016 um 06:36 schrieb nu.ev...@gmail.com:
> This seems inconsistent to me. Why would we not match the file name,
> selector, and class name?

Yes, that would be more consistent, but since the selector is the name
of a custom element tag, which should not collide with existing html
tags or third-party custom elements, it is custom to prefix it with she
name of your app and a dash. That's why it is called "toh-..." in the
style guide. "my-" is a bit lame, though.

As a side note, I also find it sometimes confusing when tutorials make
names too generic or consistent because then it can be unclear whether
this consistency is mandatory or not, and which name refers to which
entity, since you're just learning the concepts.

-- Christoph

[Chad Nelson]

So in the quickstart guide the name of the app is "angular2-quickstart".

If I want to apply a consistent selector name, then I would use "angular2-quickstart-app".  This would reduce the likelihood of tags clashing, and allow me to look up the component definition file at a glance.

Is this correct?

I definitely agree that tutorials are better when they inform the user of alternative ways. I guess I'm wanting to also see best practices introduced and implemented as well.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/EXsxkIKDV6M/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Chad Nelson

928-274-1546

[Christoph Zwerschke]

Am 08.08.2016 um 17:45 schrieb Chad Nelson:
> So in the quickstart guide the name of the app is "angular2-quickstart".
>
> If I want to apply a consistent selector name, then I would use
> "angular2-quickstart-app". This would reduce the likelihood of tags
> clashing, and allow me to look up the component definition file at a glance.
>
> Is this correct?

In principle yes, but I would keep the prefix short, like "toh" for
"tour of hero". If you build larger apps with many components, you don't
want to type such a long prefix everywhere.

-- Christoph