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

Closes #16768
2018-11-23 10:55:24 -08:00
parent fa8fe1f739
commit a0c4e25a01
1 changed files with 9 additions and 2 deletions
@@ -88,6 +88,13 @@ Let's see an example:
    });
 ```

+```html
+<body>
+  <!-- The following line is how to use the `greetUser` component above in your html doc. -->
+  <greet-user></greet-user>
+</body>
+```
+ 
 Now, every time we include `<greet-user></greet-user>` in our view, AngularJS will expand it into a
 DOM sub-tree constructed using the provided `template` and managed by an instance of the specified
 controller.
@@ -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. -->

 </body>
 </html>
@@ -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.
    template:
        '<ul>' +
          '<li ng-repeat="phone in $ctrl.phones">' +