Changes to chapter 1 of the Dart guide
This commit is contained in:
parent
8e0e727f7d
commit
0fecfb8e98
|
@ -1,69 +1,59 @@
|
|||
.l-main-section
|
||||
h2#section-install Install Angular
|
||||
p There are four steps to create any Angular app:
|
||||
ol
|
||||
li Create an entry point HTML file where users will start
|
||||
li Load the Angular library at the top of the file
|
||||
li Make a root component for your application
|
||||
li Bootstrap Angular
|
||||
|
||||
p.
|
||||
Dart makes dependencies available to the application through the <code>pubspec.yaml</code> file.
|
||||
To use Angular2 in your app, include angular as a dependency. Here’s the minimal
|
||||
<code>pubspec.yaml</code> file for this sample:
|
||||
As long as you already
|
||||
<a href="https://www.dartlang.org/downloads/">have the Dart SDK</a>,
|
||||
getting started with Angular 2 is simple:
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
ol
|
||||
li Depend on the <b>angular2</b> pub package.
|
||||
li Create a Dart file that defines (directly or indirectly) a
|
||||
<b>root component</b> and <b>bootstraps</b> Angular.
|
||||
li Create an HTML file that uses the root component and points to the Dart file
|
||||
|
||||
p.
|
||||
You can use whichever editor or IDE you like,
|
||||
or just use the command-line tools that the Dart SDK provides.
|
||||
See <a href="http://www.dartlang.org/tools/">Dart Tools</a>
|
||||
for more information.
|
||||
|
||||
|
||||
h2#section-install Depend on angular2
|
||||
|
||||
p.
|
||||
To use Angular2 in your app, include angular2 as a dependency in
|
||||
your app's <b>pubspec.yaml</b> file. For example:
|
||||
|
||||
pre.prettyprint.lang-yaml
|
||||
code.
|
||||
# pubspec.yaml
|
||||
name: getting_started
|
||||
description: Dart version of Angular 2 example, Getting Started
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.20
|
||||
browser: any
|
||||
|
||||
p.
|
||||
The Dart Editor automatically downloads the packages your app depends on, along with any packages that they, in
|
||||
turn, depend on. If this download fails or you like using the command line, you can explicitly install packages.
|
||||
From Dart Editor, you can use <strong>Tools > Pub Get</strong>. From the command line (in the root directory of
|
||||
your app, assuming the Dart SDK is in your path), you can run <code>pub get</code>.
|
||||
|
||||
.l-main-section
|
||||
h2#section-create-an-entry-point Create an entry point
|
||||
p.
|
||||
In the <code>web/</code> directory for your app, create an <code>index.html</code> file and add the Angular library
|
||||
tags and a <code>main.dart</code> file where you'll build your first component.
|
||||
|
||||
p.
|
||||
In the <code><body></code>, add an element called <code><my-app></code> that will be the root of your
|
||||
application.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
//index.html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Run <b>pub get</b> to download the packages your app depends on.
|
||||
(<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
|
||||
typically run <code>pub get</code> for you.)
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2#section-set-up-the-starting-component Set up the starting component
|
||||
h2#section-set-up-the-starting-component Write the Dart code
|
||||
|
||||
p.
|
||||
In <code>main.dart</code>, create a class called <code>AppComponent</code>, configure it to bind to the
|
||||
<code><my-app></code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
|
||||
it all off like this:
|
||||
Next to your <code>pubspec.yaml</code> file,
|
||||
create a <code>web</code> subdirectory containing a Dart file
|
||||
(<code>main.dart</code>).
|
||||
Edit <code>main.dart</code>, adding a component class (<b>AppComponent</b>),
|
||||
configuring it to bind to the <code><my-app></code> element,
|
||||
and creating a top-level <code>main()</code> function that calls
|
||||
Angular's <code>bootstrap()</code> function.
|
||||
|
||||
pre.prettyprint.lang-dart
|
||||
code.
|
||||
//main.dart
|
||||
// web/main.dart
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/src/reflection/reflection.dart' show reflector;
|
||||
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
|
||||
|
@ -83,13 +73,59 @@
|
|||
}
|
||||
|
||||
.l-main-section
|
||||
h2#section-run-it Run it!
|
||||
h2#section-create-an-entry-point Create an HTML file
|
||||
p.
|
||||
In the <code>web/</code> directoryapp, create an HTML file (<code>index.html</code>).
|
||||
Edit <code>index.html</code> to add a <code><my-app></code> element
|
||||
and call <code>main.dart</code>.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
<!-- web/index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
.l-main-section
|
||||
h2#section-run-it Run the app!
|
||||
|
||||
p.
|
||||
Now run the app. In Dart Editor’s Files view, select <code>index.html</code>, right-click, and choose <strong>Run
|
||||
in Dartium</strong>.
|
||||
Now run the app. How you do this depends on your tools.
|
||||
|
||||
ul
|
||||
li.
|
||||
If you're using <b>Dart Editor</b>,
|
||||
right-click <b>web/index.html</b>,
|
||||
and choose <b>Open in Dartium</b>.
|
||||
This starts a web server
|
||||
and opens your app in Dartium,
|
||||
an experimental version of the Chromium browser that contains the Dart VM.
|
||||
|
||||
li.
|
||||
If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>,
|
||||
right-click <b>web/index.html</b>,
|
||||
and choose <b>Run 'index.html'</b>.
|
||||
|
||||
li.
|
||||
If you're using the command line and don't have Dartium,
|
||||
serve the app using <code>pub serve</code>,
|
||||
and then run it by visiting <b>http://localhost:8080</b> in a browser.
|
||||
Generating the JavaScript takes a few seconds when you first visit the page,
|
||||
and the generated JavaScript is currently large.
|
||||
The generated JavaScript will be smaller once
|
||||
Angular's transformer becomes available.
|
||||
|
||||
p.
|
||||
You should see something like this:
|
||||
|
||||
You should see:
|
||||
div(align='center')
|
||||
img(src='setup-example1.png')
|
||||
|
||||
|
@ -98,21 +134,48 @@
|
|||
|
||||
p This basic Angular app contains the structure for any app you'll build.
|
||||
|
||||
p.
|
||||
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
|
||||
level container for the rest of your application. You've named this one <code>AppComponent</code>, but there's
|
||||
nothing special about the name and you can use whatever makes sense to you.
|
||||
.l-sub-section
|
||||
h3 It's all a tree
|
||||
|
||||
p.
|
||||
You can think of an Angular app as a tree of components.
|
||||
The root component acts as the top-level container for the rest of your application.
|
||||
You've named this one <code>AppComponent</code>, but there's
|
||||
nothing special about the name; you can use whatever makes sense to you.
|
||||
|
||||
p.
|
||||
The root component's job is to give a location in the HTML file where
|
||||
your application can
|
||||
render through its element—in this case, <code><my-app></code>.
|
||||
There's nothing special about the HTML filename or the element name;
|
||||
you can pick whatever you like.
|
||||
|
||||
p.
|
||||
The root component loads the initial template for the application,
|
||||
which loads other components to perform
|
||||
whatever functions your application needs—menu bars, views, forms, and so on.
|
||||
We'll walk through examples of all of
|
||||
these in the following pages.
|
||||
|
||||
.l-sub-section
|
||||
h3 @Component and @View annotations
|
||||
|
||||
p.
|
||||
A component annotation describes details about the component.
|
||||
An annotation can be identified by its at-sign (<code>@</code>).
|
||||
p.
|
||||
The <code>@Component</code> annotation defines the HTML tag for
|
||||
the component by specifying the component's CSS selector.
|
||||
p.
|
||||
The <code>@View</code> annotation defines the HTML that
|
||||
represents the component.
|
||||
The component you wrote uses an inline template,
|
||||
but you can also have an external template.
|
||||
To use an external template,
|
||||
specify a <code>templateUrl</code> property and
|
||||
give it the path to the HTML file.
|
||||
|
||||
|
||||
p.
|
||||
The root component's job is to give a location in the <code>index.html</code> file where your application will
|
||||
render through it's element, in this case <code><my-app></code>. There is also nothing special about this
|
||||
element name and you can pick it as you like.
|
||||
|
||||
p.
|
||||
The root component loads the initial template for the application that will load other components to perform
|
||||
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
|
||||
these in the following pages.
|
||||
|
||||
p Exciting! Not excited yet? Let's move on to <a href="displaying-data.html">Displaying Data</a>.
|
||||
|
||||
|
||||
Exciting! Not excited yet?
|
||||
Let's move on to <a href="displaying-data.html">Displaying Data</a>.
|
||||
|
|
Loading…
Reference in New Issue