Skip to content

Commit 8f2117c

Browse files
SteveSandersonMSSteveSandersonMS
committed
Upgrade Angular template to Angular 2 RC3 and migrate to new @angular/router
1 parent f1325d0 commit 8f2117c

File tree

9 files changed

+51
-42
lines changed

9 files changed

+51
-42
lines changed

‎templates/Angular2Spa/ClientApp/boot-client.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@ import './styles/site.css';
55

66
import { bootstrap } from '@angular/platform-browser-dynamic';
77
import { FormBuilder } from '@angular/common';
8-
import * as router from '@angular/router-deprecated';
9-
import { Http, HTTP_PROVIDERS } from '@angular/http';
8+
import { provideRouter } from '@angular/router';
9+
import { HTTP_PROVIDERS } from '@angular/http';
1010
import { App } from './components/app/app';
11+
import { routes } from './routes';
1112

12-
bootstrap(App, [router.ROUTER_PROVIDERS, HTTP_PROVIDERS, FormBuilder]);
13+
bootstrap(App, [
14+
...HTTP_PROVIDERS,
15+
FormBuilder,
16+
provideRouter(routes)
17+
]);
1318

1419
// Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
1520
// you modify source files. This will not preserve any application state other than the URL.

‎templates/Angular2Spa/ClientApp/boot-server.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import 'angular2-universal/polyfills';
22
import * as ngCore from '@angular/core';
3+
import { APP_BASE_HREF } from '@angular/common';
4+
import { provideRouter } from '@angular/router';
35
import * as ngUniversal from 'angular2-universal';
46
import { BASE_URL, ORIGIN_URL, REQUEST_URL } from 'angular2-universal/common';
57
import { App } from './components/app/app';
8+
import { routes } from './routes';
69

710
const bootloader = ngUniversal.bootloader({
811
async: true,
912
preboot: false,
1013
platformProviders: [
11-
ngCore.provide(BASE_URL, { useValue: '/' })
14+
ngCore.provide(APP_BASE_HREF, { useValue: '/' }),
1215
]
1316
});
1417

1518
export default function (params: any): Promise<{ html: string, globals?: any }> {
1619
const config: ngUniversal.AppConfig = {
1720
directives: [App],
1821
providers: [
19-
ngCore.provide(REQUEST_URL, { useValue: params.url }),
2022
ngCore.provide(ORIGIN_URL, { useValue: params.origin }),
21-
...ngUniversal.NODE_PLATFORM_PIPES,
22-
...ngUniversal.NODE_ROUTER_PROVIDERS,
23+
ngCore.provide(REQUEST_URL, { useValue: params.url }),
2324
...ngUniversal.NODE_HTTP_PROVIDERS,
25+
provideRouter(routes),
26+
...ngUniversal.NODE_LOCATION_PROVIDERS,
2427
],
2528
// TODO: Render just the <app> component instead of wrapping it inside an extra HTML document
2629
// Waiting on https://github.com/angular/universal/issues/347

‎templates/Angular2Spa/ClientApp/components/app/app.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
import * as ng from '@angular/core';
2-
import * as router from '@angular/router-deprecated';
3-
import { Http, HTTP_BINDINGS } from '@angular/http';
2+
import { ROUTER_DIRECTIVES } from '@angular/router';
43
import { NavMenu } from '../nav-menu/nav-menu';
5-
import { Home } from '../home/home';
6-
import { FetchData } from '../fetch-data/fetch-data';
7-
import { Counter } from '../counter/counter';
84

95
@ng.Component({
106
selector: 'app',
117
template: require('./app.html'),
12-
directives: [NavMenu, router.ROUTER_DIRECTIVES]
8+
directives: [...ROUTER_DIRECTIVES, NavMenu]
139
})
14-
@router.RouteConfig([
15-
{ path: '/', component: Home, name: 'Home' },
16-
{ path: '/counter', component: Counter, name: 'Counter' },
17-
{ path: '/fetch-data', component: FetchData, name: 'FetchData' }
18-
])
1910
export class App {
2011
}

‎templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@
77
<span class='icon-bar'></span>
88
<span class='icon-bar'></span>
99
</button>
10-
<a class='navbar-brand' [routerLink]="['/Home']">WebApplicationBasic</a>
10+
<a class='navbar-brand' [routerLink]="['/home']">WebApplicationBasic</a>
1111
</div>
1212
<div class='clearfix'></div>
1313
<div class='navbar-collapse collapse'>
1414
<ul class='nav navbar-nav'>
15-
<li>
16-
<a [routerLink]="['/Home']">
15+
<li [routerLinkActive]="['link-active']">
16+
<a [routerLink]="['/home']">
1717
<span class='glyphicon glyphicon-home'></span> Home
1818
</a>
1919
</li>
20-
<li>
21-
<a [routerLink]="['/Counter']">
20+
<li [routerLinkActive]="['link-active']">
21+
<a [routerLink]="['/counter']">
2222
<span class='glyphicon glyphicon-education'></span> Counter
2323
</a>
2424
</li>
25-
<li>
26-
<a [routerLink]="['/FetchData']">
25+
<li [routerLinkActive]="['link-active']">
26+
<a [routerLink]="['/fetch-data']">
2727
<span class='glyphicon glyphicon-th-list'></span> Fetch data
2828
</a>
2929
</li>

‎templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as ng from '@angular/core';
2-
import * as router from '@angular/router-deprecated';
2+
import { ROUTER_DIRECTIVES } from '@angular/router';
33

44
@ng.Component({
55
selector: 'nav-menu',
66
template: require('./nav-menu.html'),
7-
directives: [router.ROUTER_DIRECTIVES]
7+
directives: [...ROUTER_DIRECTIVES]
88
})
99
export class NavMenu {
1010
}

‎templates/Angular2Spa/ClientApp/routes.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { RouterConfig } from '@angular/router';
2+
import { Home } from './components/home/home';
3+
import { FetchData } from './components/fetch-data/fetch-data';
4+
import { Counter } from './components/counter/counter';
5+
6+
export const routes: RouterConfig = [
7+
{ path: '', redirectTo: 'home' },
8+
{ path: 'home', component: Home },
9+
{ path: 'counter', component: Counter },
10+
{ path: 'fetch-data', component: FetchData },
11+
{ path: '**', redirectTo: 'home' }
12+
];

‎templates/Angular2Spa/ClientApp/styles/site.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
}
1111

1212
/* Highlighting rules for nav menu items */
13-
.main-nav li a.router-link-active,
14-
.main-nav li a.router-link-active:hover,
15-
.main-nav li a.router-link-active:focus {
13+
.main-nav li.link-active a,
14+
.main-nav li.link-active a:hover,
15+
.main-nav li.link-active a:focus {
1616
background-color: #4189C7;
1717
color: white;
1818
}

‎templates/Angular2Spa/package.json‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,15 @@
1818
"webpack-hot-middleware": "^2.10.0"
1919
},
2020
"dependencies": {
21-
"@angular/common": "2.0.0-rc.1",
22-
"@angular/compiler": "2.0.0-rc.1",
23-
"@angular/core": "2.0.0-rc.1",
24-
"@angular/http": "2.0.0-rc.1",
25-
"@angular/platform-browser": "2.0.0-rc.1",
26-
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
27-
"@angular/platform-server": "2.0.0-rc.1",
28-
"@angular/router": "2.0.0-rc.1",
29-
"@angular/router-deprecated": "2.0.0-rc.1",
30-
"angular2-universal": "0.103.0",
21+
"@angular/common": "2.0.0-rc.3",
22+
"@angular/compiler": "2.0.0-rc.3",
23+
"@angular/core": "2.0.0-rc.3",
24+
"@angular/http": "2.0.0-rc.3",
25+
"@angular/platform-browser": "2.0.0-rc.3",
26+
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
27+
"@angular/platform-server": "2.0.0-rc.3",
28+
"@angular/router": "3.0.0-alpha.8",
29+
"angular2-universal": "^0.104.1",
3130
"aspnet-prerendering": "^1.0.2",
3231
"aspnet-webpack": "^1.0.1",
3332
"css": "^2.2.1",

‎templates/Angular2Spa/webpack.config.vendor.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ module.exports = {
2626
'@angular/http',
2727
'@angular/platform-browser',
2828
'@angular/platform-browser-dynamic',
29-
'@angular/router-deprecated',
29+
'@angular/router',
3030
'@angular/platform-server',
31-
'@angular/router-deprecated',
3231
]
3332
},
3433
output: {

0 commit comments

Comments
 (0)