docs(tutorial): fix headlines

2018-02-27 17:33:42 +01:00
parent 719e66b38b
commit 290a5f2339
15 changed files with 43 additions and 47 deletions
@@ -5,7 +5,6 @@

 <ul doc-tutorial-nav="0"></ul>

-
 In this step of the tutorial, you will become familiar with the most important source code files of
 the AngularJS Phonecat App. You will also learn how to start the development servers bundled with
 [angular-seed][angular-seed], and run the application in the browser.
@@ -167,7 +166,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
 * Added a dependency on [Bootstrap](http://getbootstrap.com) in the `bower.json` file.


-# Experiments
+## Experiments

 <div></div>

@@ -178,7 +177,7 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
  ```


-# Summary
+## Summary

 Now let's go to {@link step_01 step 1} and add some content to the web app.

@@ -5,7 +5,6 @@

 <ul doc-tutorial-nav="1"></ul>

-
 In order to illustrate how AngularJS enhances standard HTML, you will create a purely *static* HTML
 page and then examine how we can turn this HTML code into a template that AngularJS will use to
 dynamically display the same result with any set of data.
@@ -37,7 +36,7 @@ In this step you will add some basic information about two cell phones to an HTM
 ```


-# Experiments
+## Experiments

 <div></div>

@@ -48,7 +47,7 @@ In this step you will add some basic information about two cell phones to an HTM
  ```


-# Summary
+## Summary

 This addition to your app uses static HTML to display the list. Now, let's go to
 {@link step_02 step 2} to learn how to use AngularJS to dynamically generate the same list.
@@ -5,7 +5,6 @@

 <ul doc-tutorial-nav="2"></ul>

-
 Now, it's time to make the web page dynamic — with AngularJS. We will also add a test that verifies
 the code for the controller we are going to add.

@@ -148,9 +147,9 @@ To learn more about AngularJS scopes, see the {@link ng.$rootScope.Scope Angular
 </div>


-# Testing
+## Testing

-## Testing Controllers
+### Testing Controllers

 The "AngularJS way" of separating the controller from the view makes it easy to test code as it is being
 developed. In the section "Model and Controller" we have registered our controller via a constructor
@@ -206,7 +205,7 @@ describe('PhoneListController', function() {
 </div>


-## Writing and Running Tests
+### Writing and Running Tests

 Many AngularJS developers prefer the syntax of
 [Jasmine's Behavior-Driven Development (BDD) framework][jasmine-home], when writing tests. Although
@@ -253,7 +252,7 @@ To run the tests, and then watch the files for changes execute: `npm test`
 </div>


-# Experiments
+## Experiments

 <div></div>

@@ -308,7 +307,7 @@ To run the tests, and then watch the files for changes execute: `npm test`
  `toBe(4)`.


-# Summary
+## Summary

 We now have a dynamic application which separates models, views, and controllers, and we are testing
 as we go. Let's go to {@link step_03 step 3} to learn how to improve our application's architecture,
@@ -5,7 +5,6 @@

 <ul doc-tutorial-nav="3"></ul>

-
 In the previous step, we saw how a controller and a template worked together to convert a static
 HTML page into a dynamic view. This is a very common pattern in Single-Page Applications in general
 (and AngularJS applications in particular):
@@ -197,7 +196,7 @@ Voilà! The resulting output should look the same, but let's see what we have ga
 </div>


-# Testing
+## Testing

 Although we have combined our controller with a template into a component, we still can (and should)
 unit test the controller separately, since this is where our application logic and data reside.
@@ -240,12 +239,12 @@ verifies that the phones array property on it contains three records. Note that
 the controller instance itself, not on a `scope`.


-## Running Tests
+### Running Tests

 Same as before, execute `npm test` to run the tests and then watch the files for changes.


-# Experiments
+## Experiments

 <div></div>

@@ -267,7 +266,7 @@ Same as before, execute `npm test` to run the tests and then watch the files for
  throughout the application, is a big win.


-# Summary
+## Summary

 You have learned how to organize your application and presentation logic into isolated, reusable
 components. Let's go to {@link step_04 step 4} to learn how to organize our code in directories and
@@ -265,7 +265,7 @@ After all the refactorings that took place, this is how our application looks fr
 ```


-# Testing
+## Testing

 Since this was just a refactoring step (no actual code addition/deletions), we shouldn't need to
 change much (if anything) as far as our specs are concerned.
@@ -301,7 +301,7 @@ pass.
 </div>


-# Summary
+## Summary

 Even if we didn't add any new and exciting functionality to our application, we have made a great
 step towards a well-architected and maintainable application. Time to spice things up. Let's go to
@@ -78,7 +78,7 @@ following:
  by the `filter` filter. The process is completely transparent to the developer.


-# Testing
+## Testing

 In previous steps, we learned how to write and run unit tests. Unit tests are perfect for testing
 controllers and other parts of our application written in JavaScript, but they can't easily
@@ -124,7 +124,7 @@ easy it is to write E2E tests in AngularJS. Although this example is for a simpl
 that easy to set up any functional, readable, E2E test.


-## Running E2E Tests with Protractor
+### Running E2E Tests with Protractor

 Even though the syntax of this test looks very much like our controller unit test written with
 Jasmine, the E2E test uses APIs of [Protractor][protractor]. Read about the Protractor APIs in the
@@ -142,7 +142,7 @@ To rerun the test suite, execute `npm run protractor` again.
 </div>


-# Experiments
+## Experiments

 <div></div>

@@ -155,7 +155,7 @@ To rerun the test suite, execute `npm run protractor` again.
  Component isolation at work!


-# Summary
+## Summary

 We have now added full-text search and included a test to verify that it works! Now let's go on to
 {@link step_06 step 6} to learn how to add sorting capabilities to the PhoneCat application.
@@ -124,7 +124,7 @@ will be reordered. That is the data-binding doing its job in the opposite direct
 the model.


-# Testing
+## Testing

 The changes we made should be verified with both a unit test and an E2E test. Let's look at the unit
 test first.
@@ -217,7 +217,7 @@ The E2E test verifies that the ordering mechanism of the select box is working c
 You can now rerun `npm run protractor` to see the tests run.


-# Experiments
+## Experiments

 <div></div>

@@ -232,7 +232,7 @@ You can now rerun `npm run protractor` to see the tests run.
  `<option value="-age">Oldest</option>`


-# Summary
+## Summary

 Now that you have added list sorting and tested the application, go to {@link step_07 step 7} to
 learn about AngularJS services and how AngularJS uses dependency injection.
@@ -180,7 +180,7 @@ let's add the annotations to our `PhoneListController`:
 ```


-# Testing
+## Testing

 Because we started using dependency injection and our controller has dependencies, constructing the
 controller in our tests is a bit more complicated. We could use the `new` operator and provide the
@@ -283,7 +283,7 @@ Chrome 49.0: Executed 2 of 2 SUCCESS (0.133 secs / 0.097 secs)
 ```


-# Experiments
+## Experiments

 <div></div>

@@ -299,7 +299,7 @@ Chrome 49.0: Executed 2 of 2 SUCCESS (0.133 secs / 0.097 secs)
  ```


-# Summary
+## Summary

 Now that you have learned how easy it is to use AngularJS services (thanks to AngularJS's dependency
 injection), go to {@link step_08 step 8}, where you will add some thumbnail images of phones and
@@ -70,7 +70,7 @@ which it would have done if we had only specified an attribute binding in a regu
 HTTP request to an invalid location.


-# Testing
+## Testing

 <br />
 **`e2e-tests/scenarios.js`**:
@@ -95,7 +95,7 @@ views, that we will implement in the upcoming steps.
 You can now rerun `npm run protractor` to see the tests run.


-# Experiments
+## Experiments

 <div></div>

@@ -108,7 +108,7 @@ You can now rerun `npm run protractor` to see the tests run.
  inject the valid address.


-# Summary
+## Summary

 Now that you have added phone images and links, go to {@link step_09 step 9} to learn about AngularJS
 layout templates and how AngularJS makes it easy to create applications that have multiple views.
@@ -334,7 +334,7 @@ The takeaway here is:
 </div>


-# Testing
+## Testing

 Since some of our modules depend on {@link ngRoute ngRoute} now, it is necessary to update the Karma
 configuration file with angular-route. Other than that, the unit tests should (still) pass without
@@ -398,7 +398,7 @@ various URLs and verifying that the correct view was rendered.
 You can now rerun `npm run protractor` to see the tests run (and hopefully pass).


-# Experiments
+## Experiments

 <div></div>

@@ -415,7 +415,7 @@ You can now rerun `npm run protractor` to see the tests run (and hopefully pass)
  component isolation at work!


-# Summary
+## Summary

 With the routing set up and the phone list view implemented, we are ready to go to
 {@link step_10 step 10} and implement a proper phone details view.
@@ -122,7 +122,7 @@ including lists and bindings that comprise the phone details. Note how we use th
 <img class="diagram" src="img/tutorial/tutorial_10.png">


-# Testing
+## Testing

 We wrote a new unit test that is similar to the one we wrote for the `phoneList` component's
 controller in {@link step_07#testing step 7}.
@@ -194,7 +194,7 @@ heading on the page is "Nexus S".
 You can run the tests with `npm run protractor`.


-# Experiments
+## Experiments

 <div></div>

@@ -202,7 +202,7 @@ You can run the tests with `npm run protractor`.
  images on the 'Nexus S' details page.


-# Summary
+## Summary

 Now that the phone details view is in place, proceed to {@link step_11 step 11} to learn how to
 write your own custom display filter.
@@ -104,7 +104,7 @@ Let's employ the filter in the phone details template:
 ```


-# Testing
+## Testing

 Filters, like any other code, should be tested. Luckily, these tests are very easy to write.

@@ -146,7 +146,7 @@ Chrome 49.0: Executed 4 of 4 SUCCESS (0.091 secs / 0.075 secs)
 ```


-# Experiments
+## Experiments

 <div></div>

@@ -167,7 +167,7 @@ Chrome 49.0: Executed 4 of 4 SUCCESS (0.091 secs / 0.075 secs)
  ```


-# Summary
+## Summary

 Now that we have learned how to write and test a custom filter, let's go to {@link step_12 step 12}
 to learn how we can use AngularJS to enhance the phone details page further.
@@ -73,7 +73,7 @@ thumbnail image.
 <img class="diagram" src="img/tutorial/tutorial_12.png">


-# Testing
+## Testing

 To verify this new feature, we added two E2E tests. One verifies that `mainImageUrl` is set to the
 first phone image URL by default. The second test clicks on several thumbnail images and verifies
@@ -151,7 +151,7 @@ property to the controller. As previously, we will use a mocked response.
 Our unit tests should now be passing again.


-# Experiments
+## Experiments

 <div></div>

@@ -176,7 +176,7 @@ Our unit tests should now be passing again.
  Now, whenever you double-click on a thumbnail, an alert pops-up. Pretty annoying!


-# Summary
+## Summary

 With the phone image swapper in place, we are ready for {@link step_13 step 13} to learn an even
 better way to fetch data.
@@ -310,7 +310,7 @@ Chrome 49.0: Executed 5 of 5 SUCCESS (0.123 secs / 0.104 secs)
 ```


-# Summary
+## Summary

 Now that we have seen how to build a custom service as a RESTful client, we are ready for
 {@link step_14 step 14} to learn how to enhance the user experience with animations.
@@ -503,7 +503,7 @@ element). A boolean parameter (`wasCanceled`) is passed to the function, letting
 if the animation was canceled or not. Use this function to do any necessary clean-up.


-# Experiments
+## Experiments

 <div></div>

@@ -544,7 +544,7 @@ if the animation was canceled or not. Use this function to do any necessary clea
 * Go crazy and come up with your own funky animations!


-# Summary
+## Summary

 Our application is now much more pleasant to use, thanks to the smooth transitions between pages
 and UI states.