From d6f6fbb9218ca75596f62c12993032da391351d8 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Mon, 2 Mar 2015 14:46:31 -0800 Subject: [PATCH 1/6] copy of js docs --- public/docs/dart/latest/_data.json | 29 +++ public/docs/dart/latest/api.jade | 14 ++ public/docs/dart/latest/help.jade | 33 ++++ public/docs/dart/latest/index.jade | 30 +++ public/docs/dart/latest/quickstart.jade | 243 ++++++++++++++++++++++++ public/docs/dart/latest/resources.jade | 20 ++ 6 files changed, 369 insertions(+) create mode 100644 public/docs/dart/latest/_data.json create mode 100644 public/docs/dart/latest/api.jade create mode 100644 public/docs/dart/latest/help.jade create mode 100644 public/docs/dart/latest/index.jade create mode 100644 public/docs/dart/latest/quickstart.jade create mode 100644 public/docs/dart/latest/resources.jade diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json new file mode 100644 index 0000000000..155fe09c17 --- /dev/null +++ b/public/docs/dart/latest/_data.json @@ -0,0 +1,29 @@ +{ + "index": { + "icon": "home", + "title": "Angular Docs", + "menuTitle": "Docs Home", + "banner": "Angular 2 is currently in Alpha Preview. We reccomend using Angular 1.X for production applications." + }, + + "quickstart": { + "icon": "query-builder", + "title": "5 Min Quickstart" + }, + + "resources": { + "icon": "play-circle-fill", + "title": "Angular Resources", + "banner": "Angular 2 is currently in Alpha Preview. For Angular 1.X Resources please visit Angularjs.org." + }, + + "api": { + "icon": "book", + "title": "API Proposal" + }, + + "help": { + "icon": "chat", + "title": "Help & Support" + } +} \ No newline at end of file diff --git a/public/docs/dart/latest/api.jade b/public/docs/dart/latest/api.jade new file mode 100644 index 0000000000..e652be232b --- /dev/null +++ b/public/docs/dart/latest/api.jade @@ -0,0 +1,14 @@ +.l-main-section + h2 Developer Preview + + p. + The Angular 2.0 API is currently in active development and not production ready. + This page will showcase a preview of proposed methods to help further the discussion + in the development community. + + .l-sub-section + h3 Angular 1.X for Production + p. + If you're building a production app today, please + use Angular 1.X. + These versions of Angular are production ready and available today. diff --git a/public/docs/dart/latest/help.jade b/public/docs/dart/latest/help.jade new file mode 100644 index 0000000000..2ad2430887 --- /dev/null +++ b/public/docs/dart/latest/help.jade @@ -0,0 +1,33 @@ +.l-main-section + h2 Get Help Using Angular + + p. + We have an incredible community of developers who are passionate about solving problems. + We reccomend some of the following methods to get help with Angular. + + + .l-sub-section + h3 Angular Google Group + + ul + li Search the archive first, it's likely that your question was already answered. + li To avoid the spam moderation queue, don't include code directly in your email. (See #3) + li Linking to a live code example that demonstrates your problem or question will get you an answer faster. Use this template. + li If you get help, help others. Good karma rulez! + + a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) View the Google Group + + .l-sub-section + h3 Angular Chat Room + + p Talk in real time with other Angular developers. + + a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) View the Chat Room + + + .l-sub-section + h3 Report an Issue + + p If your run into an issue or have a feature request, you can create a new issue on our github repostitory. + + a(href="https://github.com/angular/angular.js/issues" class="button button-primary" md-button) Report an Issue diff --git a/public/docs/dart/latest/index.jade b/public/docs/dart/latest/index.jade new file mode 100644 index 0000000000..1e87776524 --- /dev/null +++ b/public/docs/dart/latest/index.jade @@ -0,0 +1,30 @@ + +div.c4 + md-card + md-card-content + h3.text-headline.text-uppercase Quickstart + p.text-body Learn in 5 minutes + + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart + + +div.c4 + md-card + md-card-content + h3.text-headline.text-uppercase Resources + p.text-body Preview of v2.0 + + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources + + +div.c4 + md-card + md-card-content + h3.text-headline.text-uppercase API Preview + p.text-body Proposal for v2.0 API + + footer + a(href="/docs/#{current.path[1]}/#{current.path[2]}/api.html" class="button" md-button) View API + diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade new file mode 100644 index 0000000000..6deedf14fe --- /dev/null +++ b/public/docs/dart/latest/quickstart.jade @@ -0,0 +1,243 @@ +// STEP 1 - Install Angular ########################## +.l-main-section + h2#section-install-angular 1. Install Angular + + p. + Angular is still unpackaged and in alpha. This quickstart does not + reflect the final build process for Angular. The following setup is for those who + want to try out Angular while it is in alpha. + + p. + For the sake of this quickstart we recommend using the + 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. + + pre.prettyprint.linenums + code git clone https://github.com/davideast/concious.git es6-shim + + .l-sub-section + h3 A word on ES6 + p. + Angular builds on top of ES6, the new specification of the JavaScript language. + Not all ES6 features are available in all browsers. The following es6-shim + repository allows you to use ES6 in the browser today. + + p. + Angular is available on npm. Configuring Angular to run ES6 in the browser + requires a build process, detailed here. + + p. + The es6-shim package includes Angular and dependencies needed to compile + ES6 in the browser. 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 + + p. + Create a file named app.es6 at the root of the project. + The .es6 extension signifies that the file uses ES6 syntax. + Using the ES6 module syntax you can import the required modules from Angular2. + + pre.prettyprint.linenums + code import {Component, Template, bootstrap} from 'angular2/angular2'; + + p The above import statement will import the three modules from Angular. These modules load at runtime. + + + +// STEP 3 - Create a component ########################## +.l-main-section + + h2#section-angular-create-account 3. Create a component + + p. + Components are custom HTML elements. Angular uses components to empower HTML. + Components structure and repre.prettyprint.linenumssent the UI. This quickstart + demonstrates the process of creating a component. This component will have the tag of app. + + pre.prettyprint.linenums + code <app></app> + + p A component consists of two parts; the annotation section and the component controller. + + pre.prettyprint.linenums + code. + import {Component, Template, bootstrap} from 'angular2/angular2'; + + // Annotation Section + @Component({ + selector: 'app' + }) + @Template({ + inline: ` + <h1>Hello {{ name }}</h1> + ` + }) + // Component Controller + class AppComponent { + constructor() { + this.name = "Alice"; + } + } + + .l-sub-section + h3 Component Annotations + + p. + A component annotation provides meta-data about the component. + An annotation can always identified by its at-sign — @. + p. + The @Component annotation defines the HTML tag for the component. + The selector property specifies the tag. The selector property is a CSS selector. + + p. + The @Template annotation defines the template to apply to the + component. This component uses an inline template, but external templates are + available as well. To use an external template specify a url property + and give it the path to the html file. + + pre.prettyprint.linenums + code. + @Component({ + selector: 'app' + }) + @Template({ + inline: ` + <h1>Hello {{ name }}</h1> + ` + }) + + p. + The component created above has a HTML tag of <app></app> + and a template of <h1>Hello {{ name }}</h1>. + + .l-sub-section + h3 Component Controller + + p. + The component controller is the backing of the component's template. A component + controller uses ES6 class syntax. + + pre.prettyprint.linenums + code + class AppComponent { + constructor() { + this.name = "Alice"; + } + } + + p. + Templates read from their component controllers. Templates have access to any properties + or functions placed on the component controller. + + p. + The template above binds to a name property through the {{ }} + syntax.The body of the constructor assigns "Alice" to the name property. When the + template renders, Alice will appear instead of {{ name }}. + + + +// STEP 4 - Bootstrap ########################## +.l-main-section + h2#section-transpile 4. Bootstrap + + p The last step to load the component on the page. + + .l-sub-section + h3 The bootstrap function + p. + Angular provides a bootstrap function that renders a + component to the page. The bootstrap function takes a + component as a parameter. Any child components inside of the parent + component will render as well. + + pre.prettyprint.linenums + code bootstrap(AppComponent); + + + +// STEP 5 - Declare the HTML ########################## +.l-main-section + + h2#section-angular-create-account 5. Declare the HTML + + p. + Create an index.html file at the root of the project. + Include the es6-shim.js file in the head tag. + Now, declare the app component the body. The es6-shim must + load before any application code. + + pre.prettyprint.linenums + code. + <html> + <head> + <title>Angular 2 Quickstart</title> + <script src="/es6-shim/dist/es6-shim.js"></script> + </head> + <body> + + <!-- The app component created in app.es6 --> + <app></app> + + </body> + </html> + + .l-sub-section + h3 Load the component module + p. + The last step is to load the module for the app component. + The es6-shim file comes packaged with the System library. + Most browsers today do not support ES6 module loading. System + provides module loading functionality to these browsers. + + p. + To load the needed modules, System needs to know where to + load the files from. The paths property in System specifies + the location of the files. + + p Tell System about three paths: + ol + li Angular - The Angular framework. + li Runtime assertions - Optional assertions for runtime type checking. + li The app component created above - The component to display on the page. + + pre.prettyprint.linenums + code. + <html> + <head> + <title>Angular 2 Quickstart</title> + <script src="/es6-shim/dist/es6-shim.js"></script> + </head> + <body> + + <!-- The app component created in app.es6 --> + <app></app> + + <script> + // Rewrite the paths to load the files + System.paths = { + 'angular2/*':'/es6-shim/angular2/*.js', + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', + 'app': 'app.es6' + }; + + // Kick off the application + System.import('app'); + </script> + </body> + </html> + + p Run the root of your project on a local server. + + + +// WHAT'S NEXT... ########################## +.l-main-section + h2#section-transpile Great Job! Next Step... + + p Learn some template syntax for extra-credit. diff --git a/public/docs/dart/latest/resources.jade b/public/docs/dart/latest/resources.jade new file mode 100644 index 0000000000..53d5a2302e --- /dev/null +++ b/public/docs/dart/latest/resources.jade @@ -0,0 +1,20 @@ +.l-main-section + h2 Victor Savkin's blog posts + ul + li Change Detection + li Functional programming + li Dependency Injection + +.l-main-section + h2 David East's Intro Todo App + ul + li Building a Todo App (video) + +.l-main-section + h2 More Videos + ul + li ng-europe playlist of videos on Angular 2 and future of Angular + li Hejlsberg's talk on TypeScript from December + li Coming soon: playlist of video from ng-conf 2015 + + From 8a998d2eb15211d124cfd0f798fb7bbb5e3d0d61 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Mon, 2 Mar 2015 14:50:14 -0800 Subject: [PATCH 2/6] fix typo in js _data.json file --- public/docs/js/latest/_data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 155fe09c17..ef0ce55dad 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -3,7 +3,7 @@ "icon": "home", "title": "Angular Docs", "menuTitle": "Docs Home", - "banner": "Angular 2 is currently in Alpha Preview. We reccomend using Angular 1.X for production applications." + "banner": "Angular 2 is currently in Alpha Preview. We recommend using Angular 1.X for production applications." }, "quickstart": { @@ -26,4 +26,4 @@ "icon": "chat", "title": "Help & Support" } -} \ No newline at end of file +} From 55072f00a4c4fd1046e5a5ec1198ba187106ab17 Mon Sep 17 00:00:00 2001 From: David East Date: Mon, 2 Mar 2015 16:53:46 -0800 Subject: [PATCH 3/6] QS revisions. --- public/docs/js/latest/quickstart.jade | 63 +++++++++++++++------------ 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 6deedf14fe..e2bfe52d1f 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -39,14 +39,15 @@ h2#section-transpile 2. Import Angular p. - Create a file named app.es6 at the root of the project. + This quickstart will consist of two files, an index.html and a + app.es6. Both of these files will be at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; - p The above import statement will import the three modules from Angular. These modules load at runtime. + p The above import statement will import three modules from Angular. These modules load at runtime. @@ -58,20 +59,19 @@ p. Components are custom HTML elements. Angular uses components to empower HTML. Components structure and repre.prettyprint.linenumssent the UI. This quickstart - demonstrates the process of creating a component. This component will have the tag of app. - - pre.prettyprint.linenums - code <app></app> + demonstrates the process of creating a component. This component will have the tag of app, + <my-app></my-app>. p A component consists of two parts; the annotation section and the component controller. pre.prettyprint.linenums code. + // app.es6 import {Component, Template, bootstrap} from 'angular2/angular2'; // Annotation Section @Component({ - selector: 'app' + selector: 'my-app' }) @Template({ inline: ` @@ -79,11 +79,14 @@ ` }) // Component Controller - class AppComponent { + class MyAppComponent { constructor() { this.name = "Alice"; } } + + // Render the app to the page + bootstrap(MyAppComponent); .l-sub-section h3 Component Annotations @@ -92,11 +95,13 @@ A component annotation provides meta-data about the component. An annotation can always identified by its at-sign — @. p. - The @Component annotation defines the HTML tag for the component. + The @Component annotation defines the HTML tag for the component. The @Component + annotation is imported in the first line of app.es6. The selector property specifies the tag. The selector property is a CSS selector. p. - The @Template annotation defines the template to apply to the + The @Template annotation defines the template to apply to the The @Template + annotation is imported in the first line of app.es6. component. This component uses an inline template, but external templates are available as well. To use an external template specify a url property and give it the path to the html file. @@ -104,17 +109,15 @@ pre.prettyprint.linenums code. @Component({ - selector: 'app' + selector: 'app' // Defines the <my-app></my-app> tag }) @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` + inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component }) p. The component created above has a HTML tag of <app></app> - and a template of <h1>Hello {{ name }}</h1>. + and a template of <h1>Hello {{ name }}</h1>. .l-sub-section h3 Component Controller @@ -125,11 +128,11 @@ pre.prettyprint.linenums code - class AppComponent { - constructor() { - this.name = "Alice"; - } - } + | class MyAppComponent { + | constructor() { + | this.name = "Alice"; + | } + | } p. Templates read from their component controllers. Templates have access to any properties @@ -157,7 +160,7 @@ component will render as well. pre.prettyprint.linenums - code bootstrap(AppComponent); + code bootstrap(MyAppComponent); @@ -174,6 +177,7 @@ pre.prettyprint.linenums code. + <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> @@ -182,7 +186,7 @@ <body> <!-- The app component created in app.es6 --> - <app></app> + <my-app></my-app> </body> </html> @@ -190,7 +194,7 @@ .l-sub-section h3 Load the component module p. - The last step is to load the module for the app component. + The last step is to load the module for the my-app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers. @@ -204,10 +208,11 @@ ol li Angular - The Angular framework. li Runtime assertions - Optional assertions for runtime type checking. - li The app component created above - The component to display on the page. + li The my-app component created above - The component to display on the page. pre.prettyprint.linenums code. + <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> @@ -215,15 +220,15 @@ </head> <body> - <!-- The app component created in app.es6 --> - <app></app> + <!-- The my-app component created in app.es6 --> + <my-app></my-app> <script> // Rewrite the paths to load the files System.paths = { - 'angular2/*':'/es6-shim/angular2/*.js', - 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', - 'app': 'app.es6' + 'angular2/*':'/es6-shim/angular2/*.js', // Angular + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions + 'app': 'app.es6' // The my-app component }; // Kick off the application From c9f6c832b4b5f94228f4d33dc4771caffaae5746 Mon Sep 17 00:00:00 2001 From: David East Date: Mon, 2 Mar 2015 17:05:31 -0800 Subject: [PATCH 4/6] QS revisions. --- public/docs/js/latest/quickstart.jade | 30 +++++++++++++-------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index e2bfe52d1f..706dad05e0 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -18,19 +18,18 @@ code git clone https://github.com/davideast/concious.git es6-shim .l-sub-section - h3 A word on ES6 + h3 The es6-shim p. Angular builds on top of ES6, the new specification of the JavaScript language. - Not all ES6 features are available in all browsers. The following es6-shim - repository allows you to use ES6 in the browser today. - - p. - Angular is available on npm. Configuring Angular to run ES6 in the browser - requires a build process, detailed here. + ES6 is not widely supported in all browsers today. The following es6-shim + repository allows you to use ES6 in the browser. p. The es6-shim package includes Angular and dependencies needed to compile - ES6 in the browser. Think of the es6-shim repository as package rather than a new project. + ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. + + p. + Think of the es6-shim repository as package rather than a new project. @@ -42,7 +41,10 @@ This quickstart will consist of two files, an index.html and a app.es6. Both of these files will be at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. - Using the ES6 module syntax you can import the required modules from Angular2. + + p This quickstart will create a component that renders "Hello Alice" to the page. + + p Using the ES6 module syntax you can import the required modules from Angular2. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; @@ -74,9 +76,7 @@ selector: 'my-app' }) @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` + inline: `<h1>Hello {{ name }}</h1>` }) // Component Controller class MyAppComponent { @@ -170,10 +170,8 @@ h2#section-angular-create-account 5. Declare the HTML p. - Create an index.html file at the root of the project. - Include the es6-shim.js file in the head tag. - Now, declare the app component the body. The es6-shim must - load before any application code. + Inside of the index.html, include the es6-shim.js file in the head tag. + Now, declare the app component the body. The es6-shim must load before any application code. pre.prettyprint.linenums code. From b892275c2bc08ac461b4458ee32bebc02b538095 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Mon, 2 Mar 2015 18:42:31 -0800 Subject: [PATCH 5/6] Latest Dart info (still needs work) --- public/docs/dart/latest/_data.json | 6 +- public/docs/dart/latest/api.jade | 3 +- public/docs/dart/latest/help.jade | 2 +- public/docs/dart/latest/quickstart.jade | 279 +++++++++++------------- 4 files changed, 131 insertions(+), 159 deletions(-) diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index 155fe09c17..710417c4f1 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -3,7 +3,7 @@ "icon": "home", "title": "Angular Docs", "menuTitle": "Docs Home", - "banner": "Angular 2 is currently in Alpha Preview. We reccomend using Angular 1.X for production applications." + "banner": "Angular 2 is currently in Alpha Preview. We recommend using AngularDart 1.X for production applications." }, "quickstart": { @@ -14,7 +14,7 @@ "resources": { "icon": "play-circle-fill", "title": "Angular Resources", - "banner": "Angular 2 is currently in Alpha Preview. For Angular 1.X Resources please visit Angularjs.org." + "banner": "Angular 2 is currently in Alpha Preview. For AngularDart 1.X please visit angulardart.org." }, "api": { @@ -26,4 +26,4 @@ "icon": "chat", "title": "Help & Support" } -} \ No newline at end of file +} diff --git a/public/docs/dart/latest/api.jade b/public/docs/dart/latest/api.jade index e652be232b..f39b9e7df7 100644 --- a/public/docs/dart/latest/api.jade +++ b/public/docs/dart/latest/api.jade @@ -10,5 +10,4 @@ h3 Angular 1.X for Production p. If you're building a production app today, please - use Angular 1.X. - These versions of Angular are production ready and available today. + use AngularDart 1.X. diff --git a/public/docs/dart/latest/help.jade b/public/docs/dart/latest/help.jade index 2ad2430887..20a37e8028 100644 --- a/public/docs/dart/latest/help.jade +++ b/public/docs/dart/latest/help.jade @@ -3,7 +3,7 @@ p. We have an incredible community of developers who are passionate about solving problems. - We reccomend some of the following methods to get help with Angular. + We recommend some of the following methods to get help with Angular. .l-sub-section diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 6deedf14fe..36edf1c728 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -1,144 +1,143 @@ +p. + These instructions assume that you already have the Dart SDK + and any tools you like to use with Dart. + If not, go + download Dart. + Then return here. + // STEP 1 - Install Angular ########################## .l-main-section h2#section-install-angular 1. Install Angular p. - Angular is still unpackaged and in alpha. This quickstart does not - reflect the final build process for Angular. The following setup is for those who - want to try out Angular while it is in alpha. - - p. - For the sake of this quickstart we recommend using the - 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. + In a new directory, create a pubspec.yaml file. + Add angular2 and browser as dependencies, + and add the angular2 transformer: + [PENDING: if the transformer isn't working in time, + remove it and use reflection in Dartium instead. + Perhaps require Dart 1.9.] pre.prettyprint.linenums - code git clone https://github.com/davideast/concious.git es6-shim - - .l-sub-section - h3 A word on ES6 - p. - Angular builds on top of ES6, the new specification of the JavaScript language. - Not all ES6 features are available in all browsers. The following es6-shim - repository allows you to use ES6 in the browser today. - - p. - Angular is available on npm. Configuring Angular to run ES6 in the browser - requires a build process, detailed here. - - p. - The es6-shim package includes Angular and dependencies needed to compile - ES6 in the browser. Think of the es6-shim repository as package rather than a new project. + code. + name: hello_world + version: 0.0.1 + dependencies: + angular2: ">=2.0.0-alpha.6 <3.0.0" + browser: any + transformers: + - angular2 + p. + In the same directory, run pub get + to install the angular2 and browser packages + (along with the packages they depend on): + pre.prettyprint.linenums + code. + > pub get + Resolving dependencies... (7.3s) + + angular2 2.0.0-alpha.6 + + browser 0.10.0+2 + + path 1.3.3 + + stack_trace 1.2.3 + Changed 4 dependencies! + p. + PENDING: Create template? Link to pub/pubspec docs? + Is browser really needed? + TODO: make this an invisible note. // STEP 2 - Import Angular ########################## .l-main-section h2#section-transpile 2. Import Angular p. - Create a file named app.es6 at the root of the project. - The .es6 extension signifies that the file uses ES6 syntax. - Using the ES6 module syntax you can import the required modules from Angular2. + Under the same directory, create a web directory. + Create a file under web named main.dart. + Edit web/main.dart to import the angular2 library: pre.prettyprint.linenums - code import {Component, Template, bootstrap} from 'angular2/angular2'; - - p The above import statement will import the three modules from Angular. These modules load at runtime. + code import 'package:angular2/angular2.dart'; - -// STEP 3 - Create a component ########################## +// STEP 3 - Define a component ########################## .l-main-section - h2#section-angular-create-account 3. Create a component + h2#section-angular-create-account 3. Define a component p. - Components are custom HTML elements. Angular uses components to empower HTML. - Components structure and repre.prettyprint.linenumssent the UI. This quickstart - demonstrates the process of creating a component. This component will have the tag of app. + A component is a custom HTML element. + In this step, you create a component that has the tag <app>. + The Dart code for a component consists of a class + with annotations that describe the component. - pre.prettyprint.linenums - code <app></app> - - p A component consists of two parts; the annotation section and the component controller. + p. + Update web/main.dart to contain the following code, + which defines the app component: pre.prettyprint.linenums code. - import {Component, Template, bootstrap} from 'angular2/angular2'; + import 'package:angular2/angular2.dart'; - // Annotation Section - @Component({ - selector: 'app' - }) + @Component( + selector: 'app' + ) @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` + inline: '<h1>Hello {{ name }}</h1>' }) - // Component Controller class AppComponent { - constructor() { - this.name = "Alice"; - } + String name = 'Alice'; } .l-sub-section - h3 Component Annotations + h3 Annotations p. - A component annotation provides meta-data about the component. - An annotation can always identified by its at-sign — @. - p. - The @Component annotation defines the HTML tag for the component. - The selector property specifies the tag. The selector property is a CSS selector. + The @Component annotation defines the HTML tag for the component. [PENDING: component controller?] + The selector property specifies the tag. The selector property is a CSS selector. [PENDING: huh?] p. The @Template annotation defines the template to apply to the component. This component uses an inline template, but external templates are - available as well. To use an external template specify a url property - and give it the path to the html file. + available as well. To use an external template, specify a url property + and give it the path to the HTML file. pre.prettyprint.linenums code. - @Component({ - selector: 'app' - }) + @Component( + selector: 'app' + ) @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` + inline: '<h1>Hello {{ name }}</h1>' }) p. - The component created above has a HTML tag of <app></app> - and a template of <h1>Hello {{ name }}</h1>. + The annotations above specify an HTML tag of <app></app> + and a template of <h1>Hello {{ name }}</h1>. + + p TODO: make double-mustaches work in text (they do work in listings) .l-sub-section - h3 Component Controller + h3 The template and the component controller p. - The component controller is the backing of the component's template. A component - controller uses ES6 class syntax. + A template has access to all the public properties and methods + of its component controller. + [PENDING: Do we really want to use the term "component controller"? + If so, set it up beforehand. + In the original text, what does "the backing" mean, and is it + important that we keep it?] pre.prettyprint.linenums - code + code. class AppComponent { - constructor() { - this.name = "Alice"; - } + String name = 'Alice'; } - p. - Templates read from their component controllers. Templates have access to any properties - or functions placed on the component controller. - p. The template above binds to a name property through the {{ }} syntax.The body of the constructor assigns "Alice" to the name property. When the - template renders, Alice will appear instead of {{ name }}. + template renders, Alice appears instead of {{ name }}. + [TODO: fix double mustaches] @@ -146,20 +145,20 @@ .l-main-section h2#section-transpile 4. Bootstrap - p The last step to load the component on the page. - - .l-sub-section - h3 The bootstrap function - p. - Angular provides a bootstrap function that renders a - component to the page. The bootstrap function takes a - component as a parameter. Any child components inside of the parent - component will render as well. - - pre.prettyprint.linenums - code bootstrap(AppComponent); - + p. + At the bottom of web/main.dart, + add a main() function + that calls Angular's bootstrap() function. + The argument to bootstrap() is the name of the app class + you defined above: + pre.prettyprint.linenums + code. + main() { + bootstrap(AppComponent); + } + p. + [PENDING: change/remove line numbers. They should start at 12.] // STEP 5 - Declare the HTML ########################## .l-main-section @@ -167,77 +166,51 @@ h2#section-angular-create-account 5. Declare the HTML p. - Create an index.html file at the root of the project. - Include the es6-shim.js file in the head tag. - Now, declare the app component the body. The es6-shim must - load before any application code. + Create a file named web/index.html that contains + the following code, + which loads main.dart and instantiates the app component: pre.prettyprint.linenums code. - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="/es6-shim/dist/es6-shim.js"></script> - </head> - <body> - - <!-- The app component created in app.es6 --> - <app></app> - - </body> - </html> - - .l-sub-section - h3 Load the component module - p. - The last step is to load the module for the app component. - The es6-shim file comes packaged with the System library. - Most browsers today do not support ES6 module loading. System - provides module loading functionality to these browsers. - - p. - To load the needed modules, System needs to know where to - load the files from. The paths property in System specifies - the location of the files. - - p Tell System about three paths: - ol - li Angular - The Angular framework. - li Runtime assertions - Optional assertions for runtime type checking. - li The app component created above - The component to display on the page. - - pre.prettyprint.linenums - code. - <html> + <!doctype html> + <html> <head> <title>Angular 2 Quickstart</title> - <script src="/es6-shim/dist/es6-shim.js"></script> </head> - <body> + <body> + <app></app> + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> + p. + [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Fix!] - <!-- The app component created in app.es6 --> - <app></app> +// STEP 5 - Build and run ########################## +.l-main-section - <script> - // Rewrite the paths to load the files - System.paths = { - 'angular2/*':'/es6-shim/angular2/*.js', - 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', - 'app': 'app.es6' - }; + h2#section-angular-run-app 5. Build and run your app - // Kick off the application - System.import('app'); - </script> - </body> - </html> - - p Run the root of your project on a local server. + p. + You have many options. + One is to run the pub serve + command in the directory + that contains your app's pubspec.yaml file: + pre.prettyprint.linenums + code. + > pub serve + Serving helloworld on http://localhost:8080 + p. + In the browser, go to the index file—for example, + localhost:8080/web/index.html. + [PENDING: This isn't working right now. Fix!] // WHAT'S NEXT... ########################## .l-main-section h2#section-transpile Great Job! Next Step... - p Learn some template syntax for extra-credit. + p. + Learn some template syntax for extra credit. + [PENDING: really?] From c1fd3477fe7e8ab12a801ab40b3d1d8076dffe48 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Mon, 2 Mar 2015 18:43:37 -0800 Subject: [PATCH 6/6] fix a couple of js quick start typos --- public/docs/js/latest/quickstart.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 6deedf14fe..253710693c 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -57,7 +57,7 @@ p. Components are custom HTML elements. Angular uses components to empower HTML. - Components structure and repre.prettyprint.linenumssent the UI. This quickstart + Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app. pre.prettyprint.linenums @@ -89,7 +89,7 @@ h3 Component Annotations p. - A component annotation provides meta-data about the component. + A component annotation provides metadata about the component. An annotation can always identified by its at-sign — @. p. The @Component annotation defines the HTML tag for the component.