From 0fecfb8e98f59f05997fb49613877badbd4bf2f6 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Wed, 22 Apr 2015 11:16:38 -0700 Subject: [PATCH] Changes to chapter 1 of the Dart guide --- public/docs/dart/latest/guide/setup.jade | 195 +++++++++++++++-------- 1 file changed, 129 insertions(+), 66 deletions(-) diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index 70d3aa4a81..448645a201 100644 --- a/public/docs/dart/latest/guide/setup.jade +++ b/public/docs/dart/latest/guide/setup.jade @@ -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 pubspec.yaml file. - To use Angular2 in your app, include angular as a dependency. Here’s the minimal - pubspec.yaml file for this sample: + As long as you already + have the Dart SDK, + getting started with Angular 2 is simple: - pre.prettyprint.lang-dart + ol + li Depend on the angular2 pub package. + li Create a Dart file that defines (directly or indirectly) a + root component and bootstraps 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 Dart Tools + 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 pubspec.yaml 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 Tools > Pub Get. From the command line (in the root directory of - your app, assuming the Dart SDK is in your path), you can run pub get. - -.l-main-section - h2#section-create-an-entry-point Create an entry point - p. - In the web/ directory for your app, create an index.html file and add the Angular library - tags and a main.dart file where you'll build your first component. - - p. - In the <body>, add an element called <my-app> 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 pub get to download the packages your app depends on. + (Dart-savvy editors and IDEs + typically run pub get 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 main.dart, create a class called AppComponent, configure it to bind to the - <my-app> element in index.html, and call Angular's bootstrap() to kick - it all off like this: + Next to your pubspec.yaml file, + create a web subdirectory containing a Dart file + (main.dart). + Edit main.dart, adding a component class (AppComponent), + configuring it to bind to the <my-app> element, + and creating a top-level main() function that calls + Angular's bootstrap() 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 web/ directoryapp, create an HTML file (index.html). + Edit index.html to add a <my-app> element + and call main.dart. + + 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 index.html, right-click, and choose Run - in Dartium. + Now run the app. How you do this depends on your tools. + + ul + li. + If you're using Dart Editor, + right-click web/index.html, + and choose Open in Dartium. + 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 WebStorm or IntelliJ IDEA, + right-click web/index.html, + and choose Run 'index.html'. + + li. + If you're using the command line and don't have Dartium, + serve the app using pub serve, + and then run it by visiting http://localhost:8080 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 AppComponent, 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 AppComponent, 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, <my-app>. + 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 (@). + p. + The @Component annotation defines the HTML tag for + the component by specifying the component's CSS selector. + p. + The @View 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 templateUrl property and + give it the path to the HTML file. + p. - The root component's job is to give a location in the index.html file where your application will - render through it's element, in this case <my-app>. 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 Displaying Data. - - + Exciting! Not excited yet? + Let's move on to Displaying Data.