From 290a5f23395eeb669aff3f7957300833e46646d8 Mon Sep 17 00:00:00 2001 From: Martin Staffa Date: Tue, 27 Feb 2018 17:33:42 +0100 Subject: [PATCH] docs(tutorial): fix headlines --- docs/content/tutorial/step_00.ngdoc | 5 ++--- docs/content/tutorial/step_01.ngdoc | 5 ++--- docs/content/tutorial/step_02.ngdoc | 11 +++++------ docs/content/tutorial/step_03.ngdoc | 9 ++++----- docs/content/tutorial/step_04.ngdoc | 4 ++-- docs/content/tutorial/step_05.ngdoc | 8 ++++---- docs/content/tutorial/step_06.ngdoc | 6 +++--- docs/content/tutorial/step_07.ngdoc | 6 +++--- docs/content/tutorial/step_08.ngdoc | 6 +++--- docs/content/tutorial/step_09.ngdoc | 6 +++--- docs/content/tutorial/step_10.ngdoc | 6 +++--- docs/content/tutorial/step_11.ngdoc | 6 +++--- docs/content/tutorial/step_12.ngdoc | 6 +++--- docs/content/tutorial/step_13.ngdoc | 2 +- docs/content/tutorial/step_14.ngdoc | 4 ++-- 15 files changed, 43 insertions(+), 47 deletions(-) diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc index 36afe8862..4aca8850c 100644 --- a/docs/content/tutorial/step_00.ngdoc +++ b/docs/content/tutorial/step_00.ngdoc @@ -5,7 +5,6 @@ - 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
@@ -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. diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc index e5f104701..b134e69f4 100644 --- a/docs/content/tutorial/step_01.ngdoc +++ b/docs/content/tutorial/step_01.ngdoc @@ -5,7 +5,6 @@ - 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
@@ -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. diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc index ba2edc0b9..6b4a54388 100644 --- a/docs/content/tutorial/step_02.ngdoc +++ b/docs/content/tutorial/step_02.ngdoc @@ -5,7 +5,6 @@ - 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 -# 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() { -## 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` -# Experiments +## Experiments
@@ -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, diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index 92b8d990f..e7a16de54 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -5,7 +5,6 @@ - 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 -# 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
@@ -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 diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 2865ad765..e7546f721 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -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. -# 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 diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc index adba95906..e7a5ea519 100644 --- a/docs/content/tutorial/step_05.ngdoc +++ b/docs/content/tutorial/step_05.ngdoc @@ -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. -# Experiments +## Experiments
@@ -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. diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index 7a19d2600..adc4b610f 100644 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -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
@@ -232,7 +232,7 @@ You can now rerun `npm run protractor` to see the tests run. `` -# 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. diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc index 7e801ffa8..4b0d0e64a 100644 --- a/docs/content/tutorial/step_07.ngdoc +++ b/docs/content/tutorial/step_07.ngdoc @@ -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
@@ -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 diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index a55461d0c..5707ea4d9 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -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
**`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
@@ -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. diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc index 99683ccfe..da1e92a7d 100644 --- a/docs/content/tutorial/step_09.ngdoc +++ b/docs/content/tutorial/step_09.ngdoc @@ -334,7 +334,7 @@ The takeaway here is: -# 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
@@ -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. diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc index 537f3ded4..65069b74f 100644 --- a/docs/content/tutorial/step_10.ngdoc +++ b/docs/content/tutorial/step_10.ngdoc @@ -122,7 +122,7 @@ including lists and bindings that comprise the phone details. Note how we use th -# 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
@@ -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. diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc index d9ab2565d..6bc360cbb 100644 --- a/docs/content/tutorial/step_11.ngdoc +++ b/docs/content/tutorial/step_11.ngdoc @@ -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
@@ -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. diff --git a/docs/content/tutorial/step_12.ngdoc b/docs/content/tutorial/step_12.ngdoc index e16bdaa5b..b9d4e0850 100644 --- a/docs/content/tutorial/step_12.ngdoc +++ b/docs/content/tutorial/step_12.ngdoc @@ -73,7 +73,7 @@ thumbnail image. -# 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
@@ -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. diff --git a/docs/content/tutorial/step_13.ngdoc b/docs/content/tutorial/step_13.ngdoc index f96ccd5c1..2ad46e2c9 100644 --- a/docs/content/tutorial/step_13.ngdoc +++ b/docs/content/tutorial/step_13.ngdoc @@ -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. diff --git a/docs/content/tutorial/step_14.ngdoc b/docs/content/tutorial/step_14.ngdoc index b1b5ff043..40667717e 100644 --- a/docs/content/tutorial/step_14.ngdoc +++ b/docs/content/tutorial/step_14.ngdoc @@ -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
@@ -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.