From da2d76352b993027a7be0d5eb7569551da94820d Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Tue, 3 Mar 2015 11:32:06 -0800 Subject: [PATCH] tweaks to quickstarts --- public/docs/dart/latest/quickstart.jade | 44 +++++++++++++++++-------- public/docs/js/latest/quickstart.jade | 30 ++++++++--------- 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 70db2dba5b..84d606a7c7 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -5,13 +5,22 @@ p. download Dart. Then return here. -// STEP 1 - Install Angular ########################## +// STEP 1 - Create a project ########################## .l-main-section - h2#section-install-angular 1. Install Angular + h2#section-install-angular 1. Create a project p. - In a new directory, create a pubspec.yaml file. - Add angular2 and browser as dependencies: + Create a new directory, and put a file named + pubspec.yaml file in it. + + pre.prettyprint + code. + > mkdir hello_world + > cd hello_world + > vim pubspec.yaml # Use your favorite editor! + + p. + In pubspec.yaml, add the angular2 and browser packages as dependencies: // [PENDING: if the transformer isn't working in time, // remove it and use reflection in Dartium instead. @@ -51,6 +60,13 @@ p. p. Still in the same directory, create a web directory. Create a file under web named main.dart. + + pre.prettyprint + code. + > mkdir web + > vim web/main.dart # Use your favorite editor! + + p. Edit web/main.dart to import the angular2 library and (for now) two reflection libraries: @@ -69,18 +85,18 @@ p. p. A component is a custom HTML element. - In this step, you create a component that has the tag <app>. + In this step, you create a component that has the tag <my-app>. The Dart code for a component consists of a class with annotations that describe the component. p. Update web/main.dart to add the following code, - which defines the app component: + which defines the my-app component: pre.prettyprint.linenums code. @Component( - selector: 'app' + selector: 'my-app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' @@ -109,15 +125,15 @@ p. pre.prettyprint.linenums code. @Component( - selector: 'app' + selector: 'my-app' ) @Template( inline: '<h1>Hello {{ name }}</h1>' ) p. - The annotations above specify an HTML tag of <app></app> - and a template of <h1>Hello {{ name }}</h1>. + The annotations above specify an HTML tag of <my-app></my-app> + and a template of <h1>Hello {{ name }}</h1>. // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing. @@ -130,7 +146,7 @@ p. The template above binds to a name property through the double-mustache syntax ({{ }}). The body of the constructor assigns "Alice" to the name property. When the - template renders, Alice appears instead of {{ name }}. + template renders, Alice appears instead of {{ name }}. // [PENDING: Do we really want to use the term "component controller"? @@ -178,7 +194,7 @@ p. p. Create a file named web/index.html that contains the following code, - which loads main.dart and instantiates the app component: + which loads main.dart and instantiates the my-app component: pre.prettyprint.linenums code. @@ -188,7 +204,7 @@ p. <title>Angular 2 Quickstart</title> </head> <body> - <app></app> + <my-app></my-app> <script type="application/dart" src="main.dart"></script> <script src="packages/browser/dart.js"></script> @@ -222,7 +238,7 @@ p. // WHAT'S NEXT... ########################## .l-main-section - h2#section-transpile Great Job! Next Step... + h2#section-transpile Great job! Next step... p. Learn some template syntax for extra credit. diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index cb68c916ba..9c7c58fbe9 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -12,15 +12,16 @@ es6-shim GitHub repository. This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. - p Clone the repository inside of aleady existing project. + p Clone the repository inside of already existing project. pre.prettyprint.linenums - code git clone https://github.com/davideast/concious.git es6-shim + code git clone https://github.com/davideast/conscious.git es6-shim .l-sub-section - h3 The es6-shim + h3 ES6 and es6-shim p. - Angular builds on top of ES6, the new specification of the JavaScript language. + Angular builds on top of ES6 (ECMAScript 6), + the new specification of the JavaScript language. ES6 is not widely supported in all browsers today. The following es6-shim repository allows you to use ES6 in the browser. @@ -32,7 +33,6 @@ Think of the es6-shim repository as package rather than a new project. - // STEP 2 - Import Angular ########################## .l-main-section h2#section-transpile 2. Import Angular @@ -52,7 +52,6 @@ p The above import statement will import three modules from Angular. These modules load at runtime. - // STEP 3 - Create a component ########################## .l-main-section @@ -75,12 +74,12 @@ selector: 'my-app' }) @Template({ - inline: `<h1>Hello {{ name }}</h1>` + inline: '<h1>Hello {{ name }}</h1>' }) // Component Controller class MyAppComponent { constructor() { - this.name = "Alice"; + this.name = 'Alice'; } } @@ -111,7 +110,7 @@ selector: 'app' // Defines the <my-app></my-app> tag }) @Template({ - inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component + inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component }) p. @@ -129,7 +128,7 @@ code. class MyAppComponent { constructor() { - this.name = "Alice"; + this.name = 'Alice'; } } @@ -203,9 +202,9 @@ p Tell System about three paths: ol - li Angular - The Angular framework. - li Runtime assertions - Optional assertions for runtime type checking. - li The my-app component created above - The component to display on the page. + li Angular: The Angular framework. + li Runtime assertions: Optional assertions for runtime type checking. + li The my-app component created above: The component to display on the page. pre.prettyprint.linenums code. @@ -237,9 +236,8 @@ p Run the root of your project on a local server. - // WHAT'S NEXT... ########################## .l-main-section - h2#section-transpile Great Job! Next Step... + h2#section-transpile Great job! Next step... - p Learn some template syntax for extra-credit. + p Learn some template syntax for extra credit.