Skip to content

Commit 5ee3ffa

Browse files
kwalrathkwalrath
authored
Update ng2 code lab to use quickstart template (#309)
Fixes #308
1 parent d3bcf52 commit 5ee3ffa

13 files changed

+151
-163
lines changed

‎src/_codelabs/ng2/0-setup.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ repo on GitHub contains several examples for this code lab.
6666
Each example corresponds to a completed step in this code lab:
6767

6868
[1-skeleton](https://github.com/dart-lang/one-hour-codelab/tree/master/ng2/1-skeleton)
69-
: Displays some text—a basic Angular 2 app.
69+
: Displays some text—a basic Angular app.
7070

7171
[2-blankbadge](https://github.com/dart-lang/one-hour-codelab/tree/master/ng2/2-blankbadge)
7272
: Displays a pirate name badge.

‎src/_codelabs/ng2/1-skeleton.md

Lines changed: 27 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,10 @@ the project folder is where you want it.
7272
change the name of the project from `untitled` to `pirate_badge`.
7373
</li>
7474

75-
<li markdown="1">Make sure that **Start Dartium in checked mode** is checked.
76-
</li>
77-
7875
<li markdown="1">Make sure that **Generate sample content** is checked.
7976
</li>
8077

81-
<li markdown="1">Select **Angular 2 Web Application** from the list.
78+
<li markdown="1">Select **Angular QuickStart Example** from the list.
8279

8380
The form should look similar to the following:
8481

@@ -201,7 +198,7 @@ Get familiar with the structure of a basic Angular app.
201198
In the **Project** view, on the left, expand the `pirate_badge` folder.
202199
Then expand the `lib` and `web` folders to see the following:
203200

204-
<img style="border:1px solid black" src="images/project-files.jpg" alt="The list of autocreated files.">
201+
<img style="border:1px solid black" src="images/project-files.png" alt="The list of autocreated files.">
205202
</div>
206203

207204
</div> <div class="col-md-5" markdown="1">
@@ -232,7 +229,6 @@ this code lab:
232229
pirate_badge/
233230
lib/
234231
app_component.dart
235-
app_component.html
236232
web/
237233
index.html
238234
main.dart
@@ -243,7 +239,6 @@ As you might expect,
243239
the `lib` directory contains library files. In an Angular app,
244240
component classes are generally created as library files.
245241
The `web` directory contains the main files for a web app.
246-
Double clicking a file opens that file in the editor view.
247242
</div>
248243

249244
</div> <div class="col-md-5" markdown="1">
@@ -332,13 +327,13 @@ main() {
332327
<!DOCTYPE html>
333328
<html>
334329
<head>
335-
<title>pirate_badge</title>
336-
330+
<title>Hello Angular</title>
331+
...
337332
<script defer src="main.dart" type="application/dart"></script>
338333
<script defer src="packages/browser/dart.js"></script>
339334
</head>
340335
<body>
341-
<my-app>Loading...</my-app>
336+
<my-app>Loading AppComponent content here ...</my-app>
342337
</body>
343338
</html>
344339
{% endprettify %}
@@ -375,8 +370,10 @@ main() {
375370
{% prettify dart %}
376371
import 'package:angular2/core.dart';
377372

378-
@Component(selector: 'my-app', templateUrl: 'app_component.html')
379-
class AppComponent {}
373+
@Component(selector: 'my-app', template: '<h1>Hello {% raw %}{{name}}{% endraw %}</h1>')
374+
class AppComponent {
375+
var name = 'Angular';
376+
}
380377
{% endprettify %}
381378
</div>
382379

@@ -391,43 +388,25 @@ class AppComponent {}
391388
component.
392389

393390
* The `@Component` constructor has two named parameters: `selector`
394-
and `templateUrl`.
391+
and `template`.
395392

396393
* The `selector` parameter specifies a CSS selector for this component.
397394
Angular creates and displays an instance of `AppComponent` when it
398395
encounters a `<my-app>` element in the HTML.
399396

400-
* The `templateUrl` parameter specifies the file that contains the view.
401-
To define the HTML _within_ the Dart file as a Dart string,
402-
use the `template` parameter instead.
403-
404-
&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
405-
</div> </div>
406-
407-
<hr>
408-
409-
<div class="trydart-step-details" markdown="1">
410-
### **app_component.html**
411-
</div>
412-
413-
<div class="row"> <div class="col-md-7" markdown="1">
414-
<div class="trydart-step-details" markdown="1">
415-
416-
{% prettify html %}
417-
<h1>My First Angular 2 App</h1>
418-
{% endprettify %}
419-
420-
</div>
421-
422-
</div> <div class="col-md-5" markdown="1">
423-
424-
<i class="fa fa-key key-header"> </i> <strong> Key information </strong>
397+
* The `template` parameter specifies the HTML that's inserted
398+
whenever a `<my-app>` element appears in the app.
399+
This simple component displays a title.
425400

426-
* This simple component displays a title.
401+
* The double curly braces, `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`,
402+
indicate an Angular interpolation binding expression.
403+
At runtime, Angular replaces `{% raw %}`{{name}}`{% endraw %}`
404+
with the value of the component's `name` property.
427405

428-
* This file is the template for the AppComponent class.
429-
This HTML is inserted whenever the `<my-app>` element
430-
appears in the app.
406+
* For any nontrivial template,
407+
use a `templateUrl` parameter instead of `template`,
408+
and put the template code in its own HTML file.
409+
The next step shows how to use `templateUrl`.
431410

432411
&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
433412
</div> </div>
@@ -443,12 +422,13 @@ class AppComponent {}
443422

444423
{% prettify yaml %}
445424
name: pirate_badge
446-
description: A Dart app that uses Angular 2
425+
description: QuickStart
447426
version: 0.0.1
448427
environment:
449-
sdk: '>=1.13.0 <2.0.0'
428+
sdk: '>=1.19.0 <2.0.0'
450429
dependencies:
451-
angular2: 2.0.0-beta.17
430+
angular2: ^2.2.0
431+
dev_dependencies:
452432
browser: ^0.10.0
453433
dart_to_js_script_rewriter: ^1.0.1
454434
transformers:
@@ -481,7 +461,7 @@ transformers:
481461
Transformers are listed and configured in
482462
the pubspec under the `transformers:` field.
483463

484-
* The Angular 2 transformer generates static structures that
464+
* The `angular2` transformer generates static structures that
485465
remove the need for reflection at runtime, making your app
486466
run more efficiently.
487467

@@ -532,7 +512,7 @@ and click the Dartium icon on the far right.
532512
WebStorm launches the app in a Dartium window.
533513
You should see something like the following:
534514

535-
<img style="border:1px solid black" src="images/first-ng2-app.png" alt="The skeleton app.">
515+
<img src="images/first-ng2-app.png" alt="The skeleton app.">
536516

537517
After you've run the app using the menu, WebStorm remembers.
538518
In the future, you can launch the app using the enabled **Run** button
@@ -633,7 +613,6 @@ check your code against the files in
633613
[1-skeleton](https://github.com/dart-lang/one-hour-codelab/tree/master/ng2/1-skeleton).
634614

635615
* [lib/app_component.dart](https://raw.githubusercontent.com/dart-lang/one-hour-codelab/master/ng2/1-skeleton/lib/app_component.dart)
636-
* [lib/app_component.html](https://raw.githubusercontent.com/dart-lang/one-hour-codelab/master/ng2/1-skeleton/lib/app_component.html)
637616
* [web/main.dart](https://raw.githubusercontent.com/dart-lang/one-hour-codelab/master/ng2/1-skeleton/web/main.dart)
638617
* [web/index.html](https://raw.githubusercontent.com/dart-lang/one-hour-codelab/master/ng2/1-skeleton/web/index.html)
639618
* [pubspec.yaml](https://raw.githubusercontent.com/dart-lang/one-hour-codelab/master/ng2/1-skeleton/pubspec.yaml)

0 commit comments

Comments
 (0)