honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Text formatting for quick start

Browse Source
This commit is contained in:
Alex Wolfe 2015-03-01 21:11:13 -08:00
parent 2561d8c718
commit 2ad3ae4add
2 changed files with 208 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
public/docs/js/_quickstart.jade
View File

@ -1,225 +1,244 @@
// STEP 1 - Install Angular ########################## // STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix .l-main-section
i.number.icon-number.large h2#section-install-angular Install Angular
.c11 p.
header <strong>Angular is still unpackaged and in alpha</strong>. 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.
h3#section-install-angular Install Angular p.
p For the sake of this quickstart we recommend using the
b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. <a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
| The following setup is for those who want to try out Angular while it is in alpha. This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
p
| For the sake of this quickstart we recommend using the
a(href="https://github.com/davideast/conscious") <code>es6-shim</code> GitHub repository
|. This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
p p Clone the repository inside of aleady existing project.
| Clone the repository inside of aleady existing project.
pre.prettyprint.linenums pre.prettyprint.linenums
code git clone https://github.com/davideast/concious.git es6-shim code git clone https://github.com/davideast/concious.git es6-shim
section.docs-sub-section .l-sub-section
h4 A word on ES6 h3 A word on ES6
p 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. 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 p.
| Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here. 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.
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 ########################## // STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix .l-main-section
i.number.icon-number2.large h2#section-transpile Import Angular
.c11 p.
header Create a file named <code>app.es6</code> at the root of the project.
The <code>.es6</code> extension signifies that the file uses ES6 syntax.
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';
p The above import statement will import the three modules from Angular. These modules load at runtime.
h3#section-transpile Import Angular
p
| Create a file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax.
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';
p
| The above import statement will import the three modules from Angular. These modules load at runtime.
// STEP 3 - Create a component ########################## // STEP 3 - Create a component ##########################
.content-block.content-number.clearfix .l-main-section
i.number.icon-number3.large
.c11 h2#section-angular-create-account Create a component
header
h3#section-angular-create-account Create a component p.
p Components are custom HTML elements. Angular uses components to empower HTML.
| 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. 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 pre.prettyprint.linenums
code &lt;app&gt;&lt;/app&gt; code &lt;app&gt;&lt;/app&gt;
p A component consists of two parts; the annotation section and the component controller. p A component consists of two parts; the annotation section and the component controller.
pre.prettyprint.linenums pre.prettyprint.linenums
code code.
| import {Component, Template, bootstrap} from 'angular2/angular2'; import {Component, Template, bootstrap} from 'angular2/angular2';
| <!-- -->
| // Annotation Section
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| `
| })
| // Component Controller
| class AppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
section.docs-sub-section // Annotation Section
h4 Component Annotations @Component({
selector: 'app'
})
@Template({
inline: `
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
})
// Component Controller
class AppComponent {
constructor() {
this.name = "Alice";
}
}
.l-sub-section
h3 Component Annotations
p.
A component annotation provides meta-data about the <code>component</code>.
An annotation can always identified by its at-sign — <code>@</code>.
p.
The <code>@Component</code> annotation defines the HTML tag for the component.
The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p.
The <code>@Template</code> 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 <code>url</code> property
and give it the path to the html file.
pre.prettyprint.linenums
code.
@Component({
selector: 'app'
})
@Template({
inline: `
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
})
p.
The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
.l-sub-section
h3 Component Controller
p.
The component controller is the backing of the component's template. A component
controller uses ES6 <code>class</code> 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 <code>name</code> property through the <code>{{ }}</code>
syntax.The body of the constructor assigns "Alice" to the name property. When the
template renders, Alice will appear instead of <code>{{ name }}</code>.
p A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
p
| The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p
| The <code>@Template</code> 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 <code>url</code> property and give it the path to the html file.
pre.prettyprint.linenums
code
| @Component({
| selector: 'app'
| })
| @Template({
| inline: `
| &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
| `
| })
p
| The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
.clear
section.docs-sub-section
h4 Component Controller
p
| The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> 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 <code>name</code> property through the <code>{{ }}</code> syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of <code>{{ name }}</code>.
.clear
// STEP 4 - Bootstrap ########################## // STEP 4 - Bootstrap ##########################
.content-block.content-number.clearfix .l-main-section
i.number.icon-number4.large h2#section-transpile Bootstrap
.c11 p The last step to load the component on the page.
header
h3#section-transpile Bootstrap .l-sub-section
p h3 The <code>bootstrap</code> function
| The last step to load the component on the page. p.
Angular provides a <code>bootstrap</code> function that renders a
component to the page. The <code>bootstrap</code> 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);
section.docs-sub-section
h4 The <code>bootstrap</code> function
p
| Angular provides a <code>bootstrap</code> function that renders a component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will render as well.
code
pre.prettyprint.linenums bootstrap(AppComponent);
.clear
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix .l-main-section
i.number.icon-number5.large
.c11
header
h3#section-angular-create-account Declare the HTML h2#section-angular-create-account Declare the HTML
p
| Create an <code>index.html</code> file at the root of the project. Include the <code>es6-shim.js</code> file in the <code>head</code> tag. Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
code p.
pre.prettyprint.linenums Create an <code>index.html</code> file at the root of the project.
| &lt;html&gt; Include the <code>es6-shim.js</code> file in the <code>head</code> tag.
| &lt;head&gt; Now, declare the app component the <code>body</code>. The es6-shim must
| &lt;title&gt;Angular 2 Quickstart&lt;/title&gt; load before any application code.
| &lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
| &lt;/head&gt;
| &lt;body&gt;
| <!-- -->
| &lt;!-- The app component created in app.es6 --&gt;
| &lt;app&gt;&lt;/app&gt;
| <!-- -->
| &lt;/body&gt;
| &lt;/html&gt;
section.docs-sub-section pre.prettyprint.linenums
h4 Load the component module code.
p &lt;html&gt;
| 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. &lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
<!-- -->
&lt;!-- The app component created in app.es6 --&gt;
&lt;app&gt;&lt;/app&gt;
<!-- -->
&lt;/body&gt;
&lt;/html&gt;
p .l-sub-section
| 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. 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 Tell System about three paths: p.
ol To load the needed modules, System needs to know where to
li Angular - The Angular framework. load the files from. The paths property in System specifies
li Runtime assertions - Optional assertions for runtime type checking. the location of the files.
li The app component created above - The component to display on the page.
code p Tell System about three paths:
pre.prettyprint.linenums ol
| &lt;html&gt; li Angular - The Angular framework.
| &lt;head&gt; li Runtime assertions - Optional assertions for runtime type checking.
| &lt;title&gt;Angular 2 Quickstart&lt;/title&gt; li The app component created above - The component to display on the page.
| &lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
| &lt;/head&gt;
| &lt;body&gt;
| <!-- -->
| &lt;!-- The app component created in app.es6 --&gt;
| &lt;app&gt;&lt;/app&gt;
| <!-- -->
| &lt;script&gt;
| // 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');
| &lt;/script&gt;
| &lt;/body&gt;
| &lt;/html&gt;
.clear
p pre.prettyprint.linenums
| Run the root of your project on a local server. code.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
.content-block.content-number.clearfix &lt;!-- The app component created in app.es6 --&gt;
i.number.icon-number6.large &lt;app&gt;&lt;/app&gt;
.c11 &lt;script&gt;
header // Rewrite the paths to load the files
System.paths = {
'angular2/*':'/es6-shim/angular2/*.js',
'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
'app': 'app.es6'
};
h3#section-transpile Extra-credit // Kick off the application
p System.import('app');
| Learn some template syntax for extra-credit. &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
p Run the root of your project on a local server.
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Extra-credit
p Learn some template syntax for extra-credit.

8
public/resources/css/base/_type.scss
View File

@ -10,6 +10,8 @@ body {
color: $platinum; color: $platinum;
} }
a { a {
color: $blueberry; color: $blueberry;
} }
@ -49,7 +51,7 @@ a {
.text-display-1, .text-display-1,
.docs-content h1 { .docs-content h1 {
margin: 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 34px; font-size: 34px;
font-weight: 400; font-weight: 400;
opacity: .54; opacity: .54;
@ -76,7 +78,9 @@ a {
.text-subhead, .text-subhead,
.text-body, .text-body,
.docs-content p { .docs-content p,
.docs-content ul,
.docs-content ol {
margin: 0px 0px ($unit * 2) 0px; margin: 0px 0px ($unit * 2) 0px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;