Update step_03.ngdoc to clarify #16768

joej164 · 2018-11-23T18:58:54Z

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
Updates documentation to clarify the controller naming convention for first time users of angular.js

What is the current behavior? (You can also link to an open issue here)
Not as clear as it could be

What is the new behavior (if this is a feature change)?
Improved documentation

Does this PR introduce a breaking change?
No

Please check if the PR fulfills these requirements

The commit message follows our guidelines
Fix/Feature: Docs have been added/updated
Fix/Feature: Tests have been added; existing tests pass

Other information:
Due to me messing up my previous PR with a commit from a work account, i closed that PR and opened a new one. Please reference comments about that at the link below

#16740 (comment)

docs/content/tutorial/step_03.ngdoc

petebacondarwin · 2018-11-24T21:12:53Z

docs/content/tutorial/step_03.ngdoc

@@ -127,7 +140,7 @@ acquired skill.
 <body>

  <!-- Use a custom component to render a list of phones -->
-  <phone-list></phone-list>
+  <phone-list></phone-list>       // This is what calls the phoneList angular.js component


"Calls" is not really the right term here. How about:

This tells AngularJS to instantiate a phoneList component here.

petebacondarwin · 2018-11-24T21:13:25Z

docs/content/tutorial/step_03.ngdoc

@@ -148,7 +161,7 @@ angular.module('phonecatApp', []);
 // Register `phoneList` component, along with its associated controller and template
 angular.
  module('phonecatApp').
-  component('phoneList', {
+  component('phoneList', {        // This is what defines the html element <phone-list>


This name is what AngularJS uses to match to the <phone-list> element.

petebacondarwin

This looks better. We can squash the commits when we merge.

gkalpak

Thx, @joej164! I left a couple of minor comments.

gkalpak · 2018-11-26T12:43:07Z

docs/content/tutorial/step_03.ngdoc

@@ -127,7 +140,7 @@ acquired skill.
 <body>

  <!-- Use a custom component to render a list of phones -->
-  <phone-list></phone-list>
+  <phone-list></phone-list>       // This tells AngularJS to instantiate a phoneList component here.


Since this is HTML, we should use HTML comments ().
I would also reduce the spacing (e.g. to 2 or 4 spaces).

gkalpak · 2018-11-26T12:44:11Z

docs/content/tutorial/step_03.ngdoc

@@ -148,7 +161,7 @@ angular.module('phonecatApp', []);
 // Register `phoneList` component, along with its associated controller and template
 angular.
  module('phonecatApp').
-  component('phoneList', {
+  component('phoneList', {        // This name is what AngularJS uses to match to the <phone-list> element.


I would reduce the spacing (e.g. to 2 or 4 spaces).

gkalpak · 2018-11-26T12:45:46Z

docs/content/tutorial/step_03.ngdoc

+<body>
+   <!-- The following line is how to use the greetUser angular.js component above in your html doc-->
+  <greet-user></greet-user>
+ </body>


Inconsistent indentation is the lines above.

Resolved, thanks for catching that

Still looks inconsistent to me 😁

Ok, finally got this one. I was looking at the content of the body tag, not the tag itself. Think I finally got it.

docs/content/tutorial/step_03.ngdoc

gkalpak

A few more to go 😇

gkalpak · 2018-11-29T18:23:05Z

docs/content/tutorial/step_03.ngdoc

@@ -127,7 +134,7 @@ acquired skill.
 <body>

  <!-- Use a custom component to render a list of phones -->
-  <phone-list></phone-list>
+  <phone-list></phone-list>  <!-- This tells AngularJS to instantiate a phoneList component here --!>


Typo: --!> should be -->.
Can you also wrap phoneList in backticks and add a . at the end (for consistency)?

gkalpak · 2018-11-29T18:23:53Z

docs/content/tutorial/step_03.ngdoc

@@ -148,7 +155,7 @@ angular.module('phonecatApp', []);
 // Register `phoneList` component, along with its associated controller and template
 angular.
  module('phonecatApp').
-  component('phoneList', {
+  component('phoneList', { . // This name is what AngularJS uses to match to the <phone-list> element.


Stray dot before //.
Can you also wrap <phone-list> in backticks?

gkalpak · 2018-11-29T18:24:39Z

docs/content/tutorial/step_03.ngdoc

+<body>
+   <!-- The following line is how to use the greetUser angular.js component above in your html doc-->
+  <greet-user></greet-user>
+ </body>


Still looks inconsistent to me 😁

gkalpak · 2018-11-29T18:26:04Z

docs/content/tutorial/step_03.ngdoc

@@ -88,6 +88,13 @@ Let's see an example:
    });
 ```

+```html
+<body>
+  <!-- The following line is how to use the greetUser angular.js component above in your html doc-->


angular.js --> AngularJS (or just remove that altogether, since it should be clear by now that we are talking about AngularJS 😁)
Can you also wrap greetUser in backticks, add a . at the end and leave a space befoe the closing -->?

Ok, I think I got them all.

Sorry for the delay, every time I wanted to get to this over the weekend it kept slipping my mind.

One Issue i had was I wasn't sure how to render the files into final docs to see what I was doing. Is there a link to an article on how I could have rendered the page?

gkalpak

One last thing. LGTM otherwise.
Thx for following through, @joej164 👍

docs/content/tutorial/step_03.ngdoc

gkalpak · 2018-12-05T15:27:24Z

docs/content/tutorial/step_03.ngdoc

+```html
+<body>
+  <!-- The following line is how to use the `greetUser` component above in your html doc. -->
+  `<greet-user></greet-user>`


Can you remove the backticks from around <greet-user></greet-user> here too?

I did that also. Thanks for being patient.

…ents Closes #16768

gkalpak · 2018-12-05T17:02:34Z

Merged 🎉 Thx, @joej164 👍
(Note: While merging, I noticed the commit message did not follow our guidelines, so I tweaked it.)

Update step_03.ngdoc

e0e421a

googlebot added the cla: yes label Nov 23, 2018

joej164 mentioned this pull request Nov 23, 2018

docs(tutorial/3 - Components): Adding Tag to Angular Mapping Info #16740

Closed

2 tasks

petebacondarwin reviewed Nov 24, 2018

View reviewed changes

docs/content/tutorial/step_03.ngdoc Outdated Show resolved Hide resolved

petebacondarwin reviewed Nov 24, 2018

View reviewed changes

Update step_03.ngdoc

0782636

petebacondarwin approved these changes Nov 25, 2018

View reviewed changes

petebacondarwin added type: docs needs: merging labels Nov 25, 2018

gkalpak reviewed Nov 26, 2018

View reviewed changes

Update step_03.ngdoc

399d610

gkalpak suggested changes Nov 29, 2018

View reviewed changes

joej164 added 2 commits December 3, 2018 09:11

Update step_03.ngdoc

a4bbf4e

Update step_03.ngdoc

ca018db

gkalpak suggested changes Dec 4, 2018

View reviewed changes

docs/content/tutorial/step_03.ngdoc Outdated Show resolved Hide resolved

Update step_03.ngdoc

4a8347c

gkalpak reviewed Dec 5, 2018

View reviewed changes

Update step_03.ngdoc

5164ec4

gkalpak approved these changes Dec 5, 2018

View reviewed changes

gkalpak closed this in a0c4e25 Dec 5, 2018

gkalpak pushed a commit that referenced this pull request Dec 5, 2018

docs(tutorial/step_3): clarify how components are mapped to HTML elem…

7981140

…ents Closes #16768

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update step_03.ngdoc to clarify #16768

Update step_03.ngdoc to clarify #16768

joej164 commented Nov 23, 2018

petebacondarwin Nov 24, 2018

petebacondarwin Nov 24, 2018

petebacondarwin left a comment

gkalpak left a comment

gkalpak Nov 26, 2018

gkalpak Nov 26, 2018

gkalpak Nov 26, 2018

joej164 Nov 26, 2018

gkalpak Nov 29, 2018

joej164 Dec 3, 2018

gkalpak left a comment

gkalpak Nov 29, 2018

gkalpak Nov 29, 2018

gkalpak Nov 29, 2018

gkalpak Nov 29, 2018

joej164 Dec 3, 2018

gkalpak left a comment

gkalpak Dec 5, 2018

joej164 Dec 5, 2018

gkalpak commented Dec 5, 2018

Update step_03.ngdoc to clarify #16768

Update step_03.ngdoc to clarify #16768

Conversation

joej164 commented Nov 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

petebacondarwin left a comment

Choose a reason for hiding this comment

gkalpak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkalpak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkalpak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkalpak commented Dec 5, 2018