Skip to content

Commit

Permalink
docs: simplify documentation of how to integrate and interact with la…
Browse files Browse the repository at this point in the history
…zy loaded modules
  • Loading branch information
danielwiehl committed Dec 11, 2018
1 parent bbe7efd commit a06000e
Showing 1 changed file with 47 additions and 36 deletions.
83 changes: 47 additions & 36 deletions resources/site/how-to.md
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,25 @@ ng generate component feature/view1
ng generate component feature/view2
```

### 2. In `FeatureRoutingModule`, add the routes to the activity component and the two view components
### 2. In `FeatureModule`, manifest a dependency to the workbench
```javascript
@NgModule({
imports: [
CommonModule,
FeatureRoutingModule,
WorkbenchModule.forChild(),
],
declarations: [
ActivityComponent,
View1Component,
View2Component
]
})
export class FeatureModule {
}
```

### 3. In `FeatureRoutingModule`, add the routes to the activity component and the two view components

```javascript
const routes: Routes = [
Expand All @@ -355,7 +373,7 @@ const routes: Routes = [
export class FeatureRoutingModule {
}
```
### 3. In `AppRoutingModule`, update the routes array to point to the feature module
### 4. In `AppRoutingModule`, update the routes array to point to the feature module

```javascript
const routes: Routes = [
Expand All @@ -374,46 +392,39 @@ export class AppRoutingModule {
```
Notice that the lazy loading syntax uses loadChildren followed by a string that is the relative path to the module, a hash mark or #, and the module’s class name. It is important to pass a string instead of a symbol to not load the module eagerly.

### 4. In `app.component.html`, add an activity to open the activity of the feature module
### 5. Open activities or views of the feature module

In `app.component.html`, add an activity to open the activity of the feature module. Because the activity is registered on an empty path, the router link corresponds to the path to the feature module.

```html
<wb-workbench>
<wb-activity title="Activity of feature module"
label="star_outline"
cssClass="material-icons"
routerLink="feature">
label="star_outline"
cssClass="material-icons"
routerLink="feature">
</wb-activity>
</wb-workbench>
```
### 5. To open the views of the feature module, either model them as activities with target `view`, or create an activity component in `AppModule` and use `wbRouterLink`

* Option 1: Open views of the feature module via activity buttons:

```html
<wb-workbench>
<wb-activity title="View 1 of feature module"
label="view_module"
cssClass="material-icons"
routerLink="feature/view-1"
target="view">
</wb-activity>
<wb-activity title="View 2 of feature module"
label="dashboard"
cssClass="material-icons"
routerLink="feature/view-2"
target="view">
</wb-activity>
</wb-workbench>
```
* Option 2: Open views of the feature module via workbench router link:

If not having an activity in your app module yet, create an activity component using Angular CLI, register a route to that component and add the activity as content child to `<wb-workbench>...</wb-workbench>`.

Then, add the following links to the template of the activity component to open the views of the feature module:

```html
<a wbRouterLink="/feature/view-1">Open View 1</a>
<a wbRouterLink="/feature/view-2">Open View 2</a>
```

To open a view from the app module, use router link as following:

```html
<a wbRouterLink="/feature/view-1">Open view 1 of feature module</a>
<a wbRouterLink="/feature/view-2">Open view 2 of feature module</a>
```

To open a view from within the activity of the feature module, use its relative path instead:

```html
<a wbRouterLink="view-1">Open view 1</a>
<a wbRouterLink="view-2">Open view 2</a>
```

To open another view from within a view of the feature module, go back one level first, and then use its relative path:

```html
<a wbRouterLink="../view-2">Open view 2</a>
```

[menu-overview]: /README.md
[menu-demo]: https://blog.sbb.technology/scion-workbench-demo/#/(view.6:heatmap//view.5:person/79//view.4:person/39//view.3:person/15//view.2:person/38//view.1:person/66//activity:person-list)?viewgrid=eyJpZCI6MSwic2FzaDEiOlsidmlld3BhcnQuMSIsInZpZXcuMSIsInZpZXcuMiIsInZpZXcuMSJdLCJzYXNoMiI6eyJpZCI6Miwic2FzaDEiOlsidmlld3BhcnQuMiIsInZpZXcuMyIsInZpZXcuMyJdLCJzYXNoMiI6eyJpZCI6Mywic2FzaDEiOlsidmlld3BhcnQuNCIsInZpZXcuNiIsInZpZXcuNiJdLCJzYXNoMiI6WyJ2aWV3cGFydC4zIiwidmlldy40Iiwidmlldy40Iiwidmlldy41Il0sInNwbGl0dGVyIjowLjQ4NTk2MTEyMzExMDE1MTEsImhzcGxpdCI6ZmFsc2V9LCJzcGxpdHRlciI6MC41NTk0MjQzMjY4MzM3OTc1LCJoc3BsaXQiOnRydWV9LCJzcGxpdHRlciI6MC4zMjI2Mjc3MzcyMjYyNzczLCJoc3BsaXQiOmZhbHNlfQ%3D%3D
Expand Down

0 comments on commit a06000e

Please sign in to comment.