From 8c65545cc83bd7fcc0f69c88bbbbce2862953a4e Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 19 May 2015 08:48:26 -0700 Subject: [PATCH] quick start updated --- public/docs/js/latest/quickstart.jade | 134 ++++++++++++------------- public/resources/css/module/_code.scss | 1 + 2 files changed, 65 insertions(+), 70 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 6bb6aa8725..495572c5cf 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -25,14 +25,14 @@ TypeScript type definitions are typically published in a repo called DefinitelyTyped. To fetch one of the type definitions to the local directory, we use the tsd package manager. - pre.prettyprint + code-example. $ npm install -g tsd $ tsd query angular2 --action install p. Next, create two empty files, index.html and app.ts, both at the root of the project: - pre.prettyprint + code-example. $ touch app.ts index.html // STEP 2 - Start the TypeScript compiler ########################## @@ -45,7 +45,7 @@ compiler in --watch mode, but it is also possible to do the translation in the browser as files are loaded, or configure your editor or IDE to do it. - pre.prettyprint + code-example. $ npm install -g typescript@^1.5.0-beta $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts @@ -54,12 +54,12 @@ h2#section-transpile 3. Import Angular p Inside of app.ts, import the type definitions from Angular: - pre.prettyprint - code /// <reference path="typings/angular2/angular2.d.ts" /> + code-example. + <reference path="typings/angular2/angular2.d.ts" > p Now your editor should be able to complete the available imports: - pre.prettyprint - code import {Component, View, bootstrap} from 'angular2/angular2'; + code-example. + import {Component, View, bootstrap} from 'angular2/angular2'; p. The above import statement uses ES6 module syntax to import three symbols from the Angular module. @@ -80,23 +80,22 @@ which is an ES6 class, and the decorators which tell Angular how to place the component into the page. - pre.prettyprint.linenums - code. - // Annotation section - @Component({ - selector: 'my-app' - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' - }) - // Component controller - class MyAppComponent { - name: string; + code-example(language="javascript" format="linenums"). + // Annotation section + @Component({ + selector: 'my-app' + }) + @View({ + template: '<h1>Hello {{ name }}</h1>' + }) + // Component controller + class MyAppComponent { + name: string; - constructor() { - this.name = 'Alice'; - } + constructor() { + this.name = 'Alice'; } + } .l-sub-section h3 @Component and @View annotations @@ -108,14 +107,13 @@ 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. - pre.prettyprint.linenums - code. - @Component({ - selector: 'my-app' // Defines the <my-app></my-app> tag - }) - @View({ - template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component - }) + code-example(language="javascript" format="linenums"). + @Component({ + selector: 'my-app' // Defines the <my-app></my-app> tag + }) + @View({ + template: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component + }) p. The annotations above specify an HTML tag of <my-app> @@ -128,14 +126,13 @@ The component controller is the backing of the component's template. This component controller uses TypeScript class syntax. - pre.prettyprint.linenums - code. - class MyAppComponent { - name: string; - constructor() { - this.name = 'Alice'; - } + code-example(language="javascript" format="linenums"). + class MyAppComponent { + name: string; + constructor() { + this.name = 'Alice'; } + } p. Templates read from their component controllers. Templates have access to any properties @@ -158,8 +155,8 @@ At the bottom of app.ts, call the bootstrap() function to load your new component into its page: - pre.prettyprint.linenums - code bootstrap(MyAppComponent); + code-example(language="javaScript"). + bootstrap(MyAppComponent); p. @@ -178,22 +175,21 @@ include the traceur-runtime and the Angular bundle. Instantiate the my-app component in the body. - pre.prettyprint.linenums - code. - <!-- index.html --> - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script> - </head> - <body> + code-example(language="html" format="linenums"). + <!-- index.html --> + <html> + <head> + <title>Angular 2 Quickstart</title> + <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> + <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script> + </head> + <body> - <!-- The app component created in app.ts --> - <my-app></my-app> + <!-- The app component created in app.ts --> + <my-app></my-app> - </body> - </html> + </body> + </html> // STEP 7 - Declare the HTML ########################## .l-main-section @@ -215,22 +211,20 @@ Add the System.js dependency in the <head> tag, so that it looks like: - pre.prettyprint.linenums - code. - <head> - <title>Angular 2 Quickstart</title> - <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> - <script src="https://jspm.io/system@0.16.js"></script> - <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script> - </head> + code-example(language="html" format="linenums"). + <head> + <title>Angular 2 Quickstart</title> + <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script> + <script src="https://jspm.io/system@0.16.js"></script> + <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script> + </head> p. Add the following module-loading code: - pre.prettyprint.linenums - code. - <my-app></my-app> - <script>System.import('app');</script> + code-example(language="html" format="linenums"). + <my-app></my-app> + <script>System.import('app');</script> // STEP 8 - Run a local server ########################## @@ -247,11 +241,11 @@ sudo npm ...) For example: - pre.prettyprint.code. - # From the directory that contains index.html: - npm install -g http-server # Or sudo npm install -g http-server - http-server # Creates a server at localhost:8080 - # In a browser, visit localhost:8080/index.html + code-example. + # From the directory that contains index.html: + npm install -g http-server # Or sudo npm install -g http-server + http-server # Creates a server at localhost:8080 + # In a browser, visit localhost:8080/index.html // WHAT'S NEXT... ########################## diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index 063a788e55..19cbf5607c 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -50,6 +50,7 @@ code { background: none; font-size: 15px; + padding: 0px; } ol {