@@ -138,7 +138,7 @@ The result is that we end up with a hierarchy of **Routing Components** rendered
138
138

139
139
140
140
141
- # Example Heroes App
141
+ ## Example Heroes App
142
142
143
143
You can see the complete application running below.
144
144
@@ -459,12 +459,12 @@ You can see the complete application running below.
459
459
</example>
460
460
461
461
462
- # Getting Started
462
+ ### Getting Started
463
463
464
464
In the following sections we will step through building this application. The finished application has views
465
465
to display list and detail views of Heroes and Crises.
466
466
467
- ## Install the libraries
467
+ #### Install the libraries
468
468
469
469
It is easier to use [Yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com) to install the
470
470
**Component Router** module. For this guide we will also install AngularJS itself via Yarn:
475
475
```
476
476
477
477
478
- ## Load the scripts
478
+ #### Load the scripts
479
479
480
480
Just like any AngularJS application, we load the JavaScript files into our `index.html`:
481
481
@@ -494,7 +494,7 @@ You also need to include ES6 shims for browsers that do not support ES6 code (In
494
494
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
495
495
```
496
496
497
- ## Create the `app` module
497
+ #### Create the `app` module
498
498
499
499
In the app.js file, create the main application module `app` which depends on the `ngComponentRouter`
500
500
module, which is provided by the **Component Router** script.
@@ -547,7 +547,7 @@ must have a base URL.
547
547
...
548
548
```
549
549
550
- ## Bootstrap AngularJS
550
+ #### Bootstrap AngularJS
551
551
552
552
Bootstrap the AngularJS application and add the top level App Component.
553
553
@@ -559,7 +559,7 @@ Bootstrap the AngularJS application and add the top level App Component.
559
559
```
560
560
561
561
562
- # Implementing the AppComponent
562
+ ### Implementing the AppComponent
563
563
564
564
In the previous section we have created a single top level **App Component**. Let's now create some more
565
565
**Routing Components** and wire up **Route Config** for those. We start with a Heroes Feature, which
@@ -577,7 +577,7 @@ We are going to have a `Heroes` Component for the Heroes feature of our applicat
577
577
and `HeroDetail` **Components** that will actually display the two different views.
578
578
579
579
580
- ## App Component
580
+ #### App Component
581
581
582
582
Configure the **App Component** with a template and **Route Config**:
583
583
@@ -598,7 +598,7 @@ Configure the **App Component** with a template and **Route Config**:
598
598
The **App Component** has an `<ng-outlet>` directive in its template. This is where the child **Components**
599
599
of this view will be rendered.
600
600
601
- ### ngLink
601
+ #### ngLink
602
602
603
603
We have used the `ng-link` directive to create a link to navigate to the Heroes Component. By using this
604
604
directive we don't need to know what the actual URL will be. We can let the Router generate that for us.
@@ -607,7 +607,7 @@ We have included a link to the Crisis Center but have not included the `ng-link`
607
607
implemented the CrisisCenter component.
608
608
609
609
610
- ### Non-terminal Routes
610
+ #### Non-terminal Routes
611
611
612
612
We need to tell the **Router** that the `Heroes` **Route Definition** is **non-terminal**, that it should
613
613
continue to match **Routes** in its child **Components**. We do this by adding a **continuation ellipsis
@@ -616,14 +616,14 @@ Without the **continuation ellipsis** the `HeroList` **Route** will never be mat
616
616
stop at the `Heroes` **Routing Component** and not try to match the rest of the URL.
617
617
618
618
619
- ## Heroes Feature
619
+ ### Heroes Feature
620
620
621
621
Now we can implement our Heroes Feature which consists of three **Components**: `Heroes`, `HeroList` and
622
622
`HeroDetail`. The `Heroes` **Routing Component** simply provides a template containing the {@link ngOutlet}
623
623
directive and a **Route Config** that defines a set of child **Routes** which delegate through to the
624
624
`HeroList` and `HeroDetail` **Components**.
625
625
626
- ## HeroesComponent
626
+ ### HeroesComponent
627
627
628
628
Create a new file `heroes.js`, which defines a new AngularJS module for the **Components** of this feature
629
629
and registers the Heroes **Component**.
@@ -651,20 +651,20 @@ and also to add the module as a dependency of the `app` module:
651
651
angular.module('app', ['ngComponentRouter', 'heroes'])
652
652
```
653
653
654
- ### Use As Default
654
+ #### Use As Default
655
655
The `useAsDefault` property on the `HeroList` **Route Definition**, indicates that if no other **Route
656
656
Definition** matches the URL, then this **Route Definition** should be used by default.
657
657
658
- ### Route Parameters
658
+ #### Route Parameters
659
659
The `HeroDetail` Route has a named parameter (`id`), indicated by prefixing the URL segment with a colon,
660
660
as part of its `path` property. The **Router** will match anything in this segment and make that value
661
661
available to the HeroDetail **Component**.
662
662
663
- ### Terminal Routes
663
+ #### Terminal Routes
664
664
Both the Routes in the `HeroesComponent` are terminal, i.e. their routes do not end with `...`. This is
665
665
because the `HeroList` and `HeroDetail` will not contain any child routes.
666
666
667
- ### Route Names
667
+ #### Route Names
668
668
**What is the difference between the `name` and `component` properties on a Route Definition?**
669
669
670
670
The `component` property in a **Route Definition** defines the **Component** directive that will be rendered
@@ -676,7 +676,7 @@ The `name` property is used to reference the **Route Definition** when generatin
676
676
that has the `name` property of `"Heroes"`.
677
677
678
678
679
- ## HeroList Component
679
+ ### HeroList Component
680
680
681
681
The HeroList **Component** is the first component in the application that actually contains significant
682
682
functionality. It loads up a list of heroes from a `heroService` and displays them using `ng-repeat`.
@@ -705,7 +705,7 @@ The template iterates through each `hero` object of the array in the `$ctrl.hero
705
705
the `$ctrl` property on the scope of the template.*
706
706
707
707
708
- ## HeroService
708
+ ### HeroService
709
709
710
710
Our HeroService simulates requesting a list of heroes from a server. In a real application this would be
711
711
making an actual server request, perhaps over HTTP.
@@ -735,7 +735,7 @@ Note that both the `getHeroes()` and `getHero(id)` methods return a promise for
735
735
in real-life we would have to wait for the server to respond with the data.
736
736
737
737
738
- ## Router Lifecycle Hooks
738
+ ### Router Lifecycle Hooks
739
739
740
740
**How do I know when my Component is active?**
741
741
@@ -780,7 +780,7 @@ By returning a promise for the list of heroes from `$routerOnActivate()` we can
780
780
Route until the heroes have arrived successfully. This is similar to how a `resolve` works in {@link ngRoute}.
781
781
782
782
783
- ## Route Parameters
783
+ ### Route Parameters
784
784
785
785
**How do I access parameters for the current route?**
786
786
@@ -811,7 +811,7 @@ by the **Router**. In this code it is used to identify a specific Hero to retrie
811
811
This hero is then attached to the **Component** so that it can be accessed in the template.
812
812
813
813
814
- ## Access to the Current Router
814
+ ### Access to the Current Router
815
815
816
816
**How do I get hold of the current router for my component?**
817
817
@@ -882,7 +882,7 @@ Other options for generating this navigation are:
882
882
```
883
883
this form gives you the possibility of caching the instruction, but is more verbose.
884
884
885
- ### Absolute vs Relative Navigation
885
+ #### Absolute vs Relative Navigation
886
886
887
887
**Why not use `$rootRouter` to do the navigation?**
888
888
@@ -894,7 +894,7 @@ to the `HeroListComponent` with the `$rootRouter`, we would have to provide a co
894
894
`['App','Heroes','HeroList']`.
895
895
896
896
897
- ## Extra Parameters
897
+ ### Extra Parameters
898
898
899
899
We can also pass additional optional parameters to routes, which get encoded into the URL and are again
900
900
available to the `$routerOnActivate(next, previous)` hook. If we pass the current `id` from the
@@ -936,7 +936,7 @@ Finally, we can use this information to highlight the current hero in the templa
936
936
</div>
937
937
```
938
938
939
- ## Crisis Center
939
+ ### Crisis Center
940
940
941
941
Let's implement the Crisis Center feature, which displays a list if crises that need to be dealt with by a hero.
942
942
The detailed crisis view has an additional feature where it blocks you from navigating if you have not saved
@@ -951,7 +951,7 @@ changes to the crisis being edited.
951
951

952
952
953
953
954
- ## Crisis Feature
954
+ ### Crisis Feature
955
955
956
956
This feature is very similar to the Heroes feature. It contains the following **Components**:
957
957
@@ -962,7 +962,7 @@ This feature is very similar to the Heroes feature. It contains the following **
962
962
CrisisService and CrisisListComponent are basically the same as HeroService and HeroListComponent
963
963
respectively.
964
964
965
- ## Navigation Control Hooks
965
+ ### Navigation Control Hooks
966
966
967
967
**How do I prevent navigation from occurring?**
968
968
@@ -979,7 +979,7 @@ can complete, all the **Components** must agree that they can be deactivated or
979
979
The **Router** will call the `$routerCanDeactivate` and `$canActivate` hooks, if they are provided. If any
980
980
of the hooks resolve to `false` then the navigation is cancelled.
981
981
982
- ### Dialog Box Service
982
+ #### Dialog Box Service
983
983
984
984
We can implement a very simple dialog box that will prompt the user whether they are happy to lose changes they
985
985
have made. The result of the prompt is a promise that can be used in a `$routerCanDeactivate` hook.
0 commit comments