Skip to content

Commit e68190f

Browse files
BBlackwoBBlackwo
committed
Part 4b: Clean Things Up
1 parent 570635b commit e68190f

File tree

7 files changed

+58
-21
lines changed

7 files changed

+58
-21
lines changed

‎guide/part-4.md‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,55 @@ You should *now* be able to navigate to [/hello-ng](http://localhost:4200/hello-
7070

7171
## Clean Things Up
7272

73-
Let's remove our headings and add a few links to be able to test some other scenarios we need to solve for.
73+
Let's remove our headings, apply the styles, and add a few links to be able to test some other scenarios we need to solve for.
74+
75+
[legacy.routes.ts](../src/app/legacy/routing/legacy.routes.ts)
76+
77+
```ts
78+
.state('helloAjs', {
79+
url: '/hello-ajs',
80+
template: `
81+
<div class="comp ajs">
82+
<h3>Hello from AngularJs Route</h3>
83+
<a href="/hello-ng">Hello Ng</a>
84+
</div>
85+
`,
86+
});
87+
```
88+
89+
[legacy.app.component.ts](../src/app/legacy/legacy.app.component.ts)
90+
91+
```ts
92+
legacyApp.component(LEGACY_APP_COMP_SELECTOR, {
93+
template: `<ui-view></ui-view>`,
94+
});
95+
```
96+
97+
[hello-ng.component.html](../src/app/hello-ng/hello-ng.component.html)
98+
99+
```html
100+
<div class="comp ng">
101+
<h3>Hi from Angular</h3>
102+
<a href="/hello-ajs">Hello Ajs</a>
103+
</div>
104+
```
105+
106+
[app.component.html](../src/app/app.component.html)
107+
108+
```html
109+
<div style="text-align:center">
110+
<router-outlet></router-outlet>
111+
<legacy-app-upgrade></legacy-app-upgrade>
112+
</div>
113+
```
114+
115+
[index.html](../src/index.html)
116+
117+
```html
118+
<body>
119+
<app-root></app-root>
120+
</body>
121+
```
74122

75123
## Problem 2: Angular RouterOutlet Doesn't Clear
76124

‎src/app/app.component.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
<div class="comp ng">
2-
<h2>{{ title }}</h2>
3-
<nav>
4-
<a routerLink="/hello-ng">Hello Ng</a>
5-
</nav>
1+
<div style="text-align:center">
62
<router-outlet></router-outlet>
7-
83
<legacy-app-upgrade></legacy-app-upgrade>
94
</div>

‎src/app/app.component.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,4 @@ import { Component } from '@angular/core';
55
templateUrl: './app.component.html',
66
styleUrls: ['./app.component.css']
77
})
8-
export class AppComponent {
9-
title = 'App Component';
10-
}
8+
export class AppComponent {}

‎src/app/hello-ng/hello-ng.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
<p>
2-
hello-ng works!
3-
</p>
1+
<div class="comp ng">
2+
<h3>Hi from Angular</h3>
3+
<a href="/hello-ajs">Hello Ajs</a>
4+
</div>

‎src/app/legacy/legacy.app.component.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,5 @@ import { legacyApp } from './legacy.app.module';
33
export const LEGACY_APP_COMP_SELECTOR = 'legacyAppComp';
44

55
legacyApp.component(LEGACY_APP_COMP_SELECTOR, {
6-
template: `
7-
<div class="comp ajs">
8-
<h2>Legacy App Component</h2>
9-
<ui-view></ui-view>
10-
<div>
11-
`,
6+
template: `<ui-view></ui-view>`,
127
});

‎src/app/legacy/routing/legacy.routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function legacyRoutes($stateProvider, $urlRouterProvider) {
1212
template: `
1313
<div class="comp ajs">
1414
<h3>Hello from AngularJs Route</h3>
15+
<a href="/hello-ng">Hello Ng</a>
1516
</div>
1617
`,
1718
});

‎src/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
</head>
11-
<body class="comp ajs" style="text-align:center">
12-
<h2>AngularJs Root</h2>
11+
<body>
1312
<app-root></app-root>
1413
</body>
1514
</html>

0 commit comments

Comments
 (0)