Skip to content

Commit d07ea04

Browse files
teropateropa
committed
docs(upgrade): update to Angular2 alpha.52 and TS 1.7.3
1 parent 180a141 commit d07ea04

File tree

12 files changed

+57
-56
lines changed

12 files changed

+57
-56
lines changed

‎public/docs/_examples/upgrade/ts/classes/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"description": "A tutorial application for AngularJS",
66
"repository": "https://github.com/angular/angular-phonecat",
77
"license": "MIT",
8+
"dependencies": {
9+
"systemjs": "0.19.6"
10+
},
811
"devDependencies": {
912
"karma": "^0.12.16",
1013
"karma-chrome-launcher": "^0.1.4",
@@ -14,7 +17,8 @@
1417
"http-server": "^0.6.1",
1518
"tmp": "0.0.23",
1619
"bower": "^1.3.1",
17-
"shelljs": "^0.2.6"
20+
"shelljs": "^0.2.6",
21+
"typescript": "1.7.3"
1822
},
1923
"scripts": {
2024
"postinstall": "bower install",
@@ -33,9 +37,5 @@
3337
"protractor": "protractor src/test/protractor-conf.js",
3438

3539
"tsc": "tsc -p src -w"
36-
},
37-
"dependencies": {
38-
"systemjs": "^0.19.6",
39-
"typescript": "^1.6.2"
4040
}
4141
}

‎public/docs/_examples/upgrade/ts/ng2_components/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
"description": "A tutorial application for AngularJS",
66
"repository": "https://github.com/angular/angular-phonecat",
77
"license": "MIT",
8+
"dependencies": {
9+
"angular2": "2.0.0-alpha.52",
10+
"systemjs": "0.19.6"
11+
},
812
"devDependencies": {
913
"karma": "^0.12.16",
1014
"karma-chrome-launcher": "^0.1.4",
@@ -14,7 +18,8 @@
1418
"http-server": "^0.6.1",
1519
"tmp": "0.0.23",
1620
"bower": "^1.3.1",
17-
"shelljs": "^0.2.6"
21+
"shelljs": "^0.2.6",
22+
"typescript": "1.7.3"
1823
},
1924
"scripts": {
2025
"postinstall": "bower install",
@@ -33,10 +38,5 @@
3338
"protractor": "protractor src/test/protractor-conf.js",
3439

3540
"tsc": "tsc -p src -w"
36-
},
37-
"dependencies": {
38-
"angular2": "2.0.0-alpha.50",
39-
"systemjs": "^0.19.6",
40-
"typescript": "^1.6.2"
4141
}
4242
}

‎public/docs/_examples/upgrade/ts/ng2_components/src/app/phone_detail/phone_detail.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div class="phone-images">
33
<img [src]="img"
44
class="phone"
5-
*ng-for="#img of phone?.images"
6-
[ng-class]="{active: mainImageUrl==img}">
5+
*ngFor="#img of phone?.images"
6+
[ngClass]="{active: mainImageUrl==img}">
77
</div>
88
<h1>{{phone?.name}}</h1>
99
<p>{{phone?.description}}</p>
1010
<ul class="phone-thumbs">
11-
<li *ng-for="#img of phone?.images">
11+
<li *ngFor="#img of phone?.images">
1212
<img [src]="img" (click)="setImage(img)">
1313
</li>
1414
</ul>
@@ -17,7 +17,7 @@ <h1>{{phone?.name}}</h1>
1717
<span>Availability and Networks</span>
1818
<dl>
1919
<dt>Availability</dt>
20-
<dd *ng-for="#availability of phone?.availability">{{availability}}</dd>
20+
<dd *ngFor="#availability of phone?.availability">{{availability}}</dd>
2121
</dl>
2222
</li>
2323
<li>
@@ -68,7 +68,7 @@ <h1>{{phone?.name}}</h1>
6868
<span>Size and Weight</span>
6969
<dl>
7070
<dt>Dimensions</dt>
71-
<dd *ng-for="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
71+
<dd *ngFor="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
7272
<dt>Weight</dt>
7373
<dd>{{phone?.sizeAndWeight?.weight}}</dd>
7474
</dl>

‎public/docs/_examples/upgrade/ts/ng2_components/src/app/phone_list/phone_list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<!--Sidebar content-->
55

66
<!-- #docregion controls -->
7-
Search: <input [(ng-model)]="query">
7+
Search: <input [(ngModel)]="query">
88
Sort by:
9-
<select [(ng-model)]="orderProp">
9+
<select [(ngModel)]="orderProp">
1010
<option value="name">Alphabetical</option>
1111
<option value="age">Newest</option>
1212
</select>
@@ -18,7 +18,7 @@
1818

1919
<!-- #docregion list -->
2020
<ul class="phones">
21-
<li *ng-for="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
21+
<li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
2222
class="thumbnail phone-listing">
2323
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
2424
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

‎public/docs/_examples/upgrade/ts/ng2_components/src/app/phone_list/phone_list_without_async.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<!--Sidebar content-->
55

66
<!-- #docregion controls -->
7-
Search: <input [(ng-model)]="query">
7+
Search: <input [(ngModel)]="query">
88
Sort by:
9-
<select [(ng-model)]="orderProp">
9+
<select [(ngModel)]="orderProp">
1010
<option value="name">Alphabetical</option>
1111
<option value="age">Newest</option>
1212
</select>
@@ -18,7 +18,7 @@
1818

1919
<!-- #docregion list -->
2020
<ul class="phones">
21-
<li *ng-for="#phone of phones | phoneFilter:query | orderBy:orderProp"
21+
<li *ngFor="#phone of phones | phoneFilter:query | orderBy:orderProp"
2222
class="thumbnail phone-listing">
2323
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
2424
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

‎public/docs/_examples/upgrade/ts/ng2_components/src/app/phone_list/phone_list_without_pipes.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<!--Sidebar content-->
55

66
<!-- #docregion controls -->
7-
Search: <input [(ng-model)]="query">
7+
Search: <input [(ngModel)]="query">
88
Sort by:
9-
<select [(ng-model)]="orderProp">
9+
<select [(ngModel)]="orderProp">
1010
<option value="name">Alphabetical</option>
1111
<option value="age">Newest</option>
1212
</select>
@@ -18,7 +18,7 @@
1818

1919
<!-- #docregion list -->
2020
<ul class="phones">
21-
<li *ng-for="#phone of phones | filter:query | orderBy:orderProp"
21+
<li *ngFor="#phone of phones | filter:query | orderBy:orderProp"
2222
class="thumbnail phone-listing">
2323
<a href="#/phones/{{phone.id}}" class="thumb"><img [src]="phone.imageUrl"></a>
2424
<a href="#/phones/{{phone.id}}" class="name">{{phone.name}}</a>

‎public/docs/_examples/upgrade/ts/ng2_final/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
"description": "A tutorial application for AngularJS",
66
"repository": "https://github.com/angular/angular-phonecat",
77
"license": "MIT",
8+
"dependencies": {
9+
"angular2": "2.0.0-alpha.52",
10+
"systemjs": "0.19.6"
11+
},
812
"devDependencies": {
913
"karma": "^0.12.16",
1014
"karma-chrome-launcher": "^0.1.4",
@@ -14,7 +18,8 @@
1418
"http-server": "^0.6.1",
1519
"tmp": "0.0.23",
1620
"bower": "^1.3.1",
17-
"shelljs": "^0.2.6"
21+
"shelljs": "^0.2.6",
22+
"typescript": "1.7.3"
1823
},
1924
"scripts": {
2025
"postinstall": "bower install",
@@ -33,10 +38,5 @@
3338
"protractor": "protractor src/test/protractor-conf.js",
3439

3540
"tsc": "tsc -p src -w"
36-
},
37-
"dependencies": {
38-
"angular2": "2.0.0-alpha.50",
39-
"systemjs": "^0.19.6",
40-
"typescript": "^1.6.2"
4141
}
4242
}

‎public/docs/_examples/upgrade/ts/ng2_final/src/app/phone_detail/phone_detail.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div class="phone-images">
33
<img [src]="img"
44
class="phone"
5-
*ng-for="#img of phone?.images"
6-
[ng-class]="{active: mainImageUrl==img}">
5+
*ngFor="#img of phone?.images"
6+
[ngClass]="{active: mainImageUrl==img}">
77
</div>
88
<h1>{{phone?.name}}</h1>
99
<p>{{phone?.description}}</p>
1010
<ul class="phone-thumbs">
11-
<li *ng-for="#img of phone?.images">
11+
<li *ngFor="#img of phone?.images">
1212
<img [src]="img" (click)="setImage(img)">
1313
</li>
1414
</ul>
@@ -17,7 +17,7 @@ <h1>{{phone?.name}}</h1>
1717
<span>Availability and Networks</span>
1818
<dl>
1919
<dt>Availability</dt>
20-
<dd *ng-for="#availability of phone?.availability">{{availability}}</dd>
20+
<dd *ngFor="#availability of phone?.availability">{{availability}}</dd>
2121
</dl>
2222
</li>
2323
<li>
@@ -68,7 +68,7 @@ <h1>{{phone?.name}}</h1>
6868
<span>Size and Weight</span>
6969
<dl>
7070
<dt>Dimensions</dt>
71-
<dd *ng-for="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
71+
<dd *ngFor="#dim of phone?.sizeAndWeight?.dimensions">{{dim}}</dd>
7272
<dt>Weight</dt>
7373
<dd>{{phone?.sizeAndWeight?.weight}}</dd>
7474
</dl>

‎public/docs/_examples/upgrade/ts/ng2_final/src/app/phone_list/phone_list.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<!--Sidebar content-->
55

66
<!-- #docregion controls -->
7-
Search: <input [(ng-model)]="query">
7+
Search: <input [(ngModel)]="query">
88
Sort by:
9-
<select [(ng-model)]="orderProp">
9+
<select [(ngModel)]="orderProp">
1010
<option value="name">Alphabetical</option>
1111
<option value="age">Newest</option>
1212
</select>
@@ -18,10 +18,10 @@
1818

1919
<!-- #docregion list -->
2020
<ul class="phones">
21-
<li *ng-for="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
21+
<li *ngFor="#phone of phones | async | phoneFilter:query | orderBy:orderProp"
2222
class="thumbnail phone-listing">
23-
<a [router-link]="['/Phone', {phoneId: phone.id}]" class="thumb"><img [src]="phone.imageUrl"></a>
24-
<a [router-link]="['/Phone', {phoneId: phone.id}]" class="name">{{phone.name}}</a>
23+
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="thumb"><img [src]="phone.imageUrl"></a>
24+
<a [routerLink]="['/Phone', {phoneId: phone.id}]" class="name">{{phone.name}}</a>
2525
<p>{{phone.snippet}}</p>
2626
</li>
2727
</ul>

‎public/docs/_examples/upgrade/ts/ng2_initial/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
"description": "A tutorial application for AngularJS",
66
"repository": "https://github.com/angular/angular-phonecat",
77
"license": "MIT",
8+
"dependencies": {
9+
"angular2": "2.0.0-alpha.52",
10+
"systemjs": "0.19.6"
11+
},
812
"devDependencies": {
913
"karma": "^0.12.16",
1014
"karma-chrome-launcher": "^0.1.4",
@@ -14,7 +18,8 @@
1418
"http-server": "^0.6.1",
1519
"tmp": "0.0.23",
1620
"bower": "^1.3.1",
17-
"shelljs": "^0.2.6"
21+
"shelljs": "^0.2.6",
22+
"typescript": "1.7.3"
1823
},
1924
"scripts": {
2025
"postinstall": "bower install",
@@ -33,10 +38,5 @@
3338
"protractor": "protractor src/test/protractor-conf.js",
3439

3540
"tsc": "tsc -p src -w"
36-
},
37-
"dependencies": {
38-
"angular2": "^2.0.0-alpha.50",
39-
"systemjs": "^0.19.6",
40-
"typescript": "^1.6.2"
4141
}
4242
}

‎public/docs/_examples/upgrade/ts/typescript-conversion/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
"description": "A tutorial application for AngularJS",
66
"repository": "https://github.com/angular/angular-phonecat",
77
"license": "MIT",
8+
"dependencies": {
9+
"systemjs": "0.19.6"
10+
},
811
"devDependencies": {
912
"karma": "^0.12.16",
1013
"karma-chrome-launcher": "^0.1.4",
@@ -14,7 +17,8 @@
1417
"http-server": "^0.6.1",
1518
"tmp": "0.0.23",
1619
"bower": "^1.3.1",
17-
"shelljs": "^0.2.6"
20+
"shelljs": "^0.2.6",
21+
"typescript": "1.7.3"
1822
},
1923
"scripts": {
2024
"postinstall": "bower install",
@@ -33,9 +37,5 @@
3337
"protractor": "protractor src/test/protractor-conf.js",
3438

3539
"tsc": "tsc -p src -w"
36-
},
37-
"dependencies": {
38-
"systemjs": "^0.19.6",
39-
"typescript": "^1.6.2"
4040
}
4141
}

‎public/docs/ts/latest/upgrade/tutorial.jade

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,8 @@ include ../../../../_includes/_util-fns
103103

104104
Let's begin by installing the SystemJS and TypeScript packages to the project:
105105
```
106-
npm i systemjs typescript --save
106+
npm i systemjs --save
107+
npm i typescript --save-dev
107108
```
108109

109110
The Angular 1 framework doesn't come with built-in TypeScript type definitions.
@@ -798,12 +799,12 @@ include ../../../../_includes/_util-fns
798799

799800
:marked
800801
We now also need to convert the template of this component into Angular 2 syntax.
801-
In the search controls we need to use Angular 2 syntax for the two `ng-model`s
802+
In the search controls we need to use Angular 2 syntax for the two `ngModel`s
802803

803804
+makeExample('upgrade/ts/ng2_components/src/app/phone_list/phone_list_without_pipes.html', 'controls', 'src/app/phone_list/phone_list.html')
804805

805806
:marked
806-
In the list we need to replace the `ng-repeat` with an `*ng-for`. For the images,
807+
In the list we need to replace the `ng-repeat` with an `*ngFor`. For the images,
807808
we can replace `ng-src` with the standard `src`, but will use a property binding.
808809
Note that we're also adding a `name` CSS class for the phone name. This is something
809810
we'll need for our Protractor tests:
@@ -958,7 +959,7 @@ include ../../../../_includes/_util-fns
958959
magically evaluated as an expression. In Angular 2 we always specify
959960
in the template when an attribute's value is a property expression, as opposed
960961
to a literal string.
961-
* We've replaced `ng-repeat`s with `*ng-for`s.
962+
* We've replaced `ng-repeat`s with `*ngFor`s.
962963
* We've replace `ng-click` with an event binding for the standard `click`.
963964
* In all references to `phone`, we're using the elvis operator `?.` for
964965
safe property navigation. We need it because when the component first loads,

0 commit comments

Comments
 (0)