From c1aa1285277dd5bc2bd2fe928b9ad602be11704e Mon Sep 17 00:00:00 2001 From: David East Date: Sat, 28 Feb 2015 05:37:48 -0800 Subject: [PATCH] JS Quickstart. --- public/docs/_quickstart.jade | 78 +++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 27 deletions(-) diff --git a/public/docs/_quickstart.jade b/public/docs/_quickstart.jade index 9c78bbae6d..d5f7ee1f94 100644 --- a/public/docs/_quickstart.jade +++ b/public/docs/_quickstart.jade @@ -4,6 +4,7 @@ //- else if lang == 'dart' //- h2 I like Dart +// STEP 1 - Install Angular ########################## .content-block.content-number.clearfix i.number.icon-number.large @@ -12,43 +13,51 @@ h3#section-install-angular Install Angular p - | Install Angular from npm. + | To include Angular in your project you'll need to install the framework and its dependencies from npm. + b 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 for a faster start. The es6-shim repository includes all of the dependencies needed to write ES6 that compiles in the browser. Think of this repository as package rather than a new project. Clone the repository inside of aleady existing project. + pre + code git clone https://github.com/davideast/concious.git es6-shim + +// STEP 2 - Import Angular ########################## .content-block.content-number.clearfix i.number.icon-number2.large .c11 header - h3#section-transpile Transpile ES6 to ES5 + h3#section-transpile Import Angular p - | Angular is written in ES6 which needs to be transpiled to ES5 before reaching the browser. + | Create a new file named app.es6. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. + pre + code + | import {Component, Template, bootstrap} from 'angular2/angular2'; + p + | The above import statement will import the three basic pieces needed to create an Angular app. The import statement loads the modules dynamically at runtime. +// STEP 3 - Create a component ########################## .content-block.content-number.clearfix i.number.icon-number3.large .c11 header - h3#section-transpile Import Angular - p - | Using the ES6 module syntax you can import Angular2. - pre - code - | import {Component, Template, bootstrap} from 'angular2/angular2'; - p - | The above import statement will import the three basic pieces needed to create an Angular app. - - -.content-block.content-number.clearfix - i.number.icon-number4.large - - .c11 - header + // Angular is a component based framework. + // Components are custom HTML elements. + // Components are used to structure and represent the UI. h3#section-angular-create-account Create a component p - | Angular is a component based framework. Components are used to structure and represent the UI. A Component is made up of two parts; the annotation section and the component controller. + | Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a Component with the HTML tag of app. + + pre + code <hello></hello> + + p A Component is made up of two parts; the annotation section and the component controller. + pre code | import {Component, Template, bootstrap} from 'angular2/angular2'; @@ -75,7 +84,9 @@ code component | You can always identify an annotation by its code @ - | sign. The Component annotation tells Angular what the HTML tag will be for your component. Whereas the Template annotations tells Angular what template to apply to your component. + | sign. The Component annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the selector property. The selector property is just a CSS selector. + p + | The Template annotations tells Angular what template to apply to your 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 template. pre code | @Component({ @@ -83,11 +94,11 @@ | }) | @Template({ | inline: ` - | <h1>Hello</h1> + | <h1>Hello {{ name }}</h1> | ` | }) p - | The Component created above will have a HTML tag of <app></app> and a template of <h1>Hello</h1>. + | The Component created above will have a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. .clear section.docs-sub-section @@ -102,28 +113,41 @@ | this.name = "Alice"; | } | } - p - | In the template above binds to a name property through the {{ }} syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of {{ name }}. p | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template. + p + | In the template above binds to a name property through the {{ }} syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of {{ name }}. .clear .content-block.content-number.clearfix - i.number.icon-number5.large + i.number.icon-number4.large .c11 header h3#section-transpile Bootstrap p - | The last step to get your component to load on the page. + | The last step to get the component to load on the page. section.docs-sub-section h4 The bootstrap function .c6 p - | Angular provides a bootstrap function that renders your component to the page. + | Angular provides a bootstrap function that renders your component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will be rendered as well. + + code + pre bootstrap(App); .clear + + section.docs-sub-section + h4 Declare the HTML + .c6 + p + | Create a index.html file. + + code + pre <app></app> + .clear .content-block.content-number.clearfix i.number.icon-number6.large