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

copy of js docs

Browse Source
This commit is contained in:
Kathy Walrath 2015-03-02 14:46:31 -08:00
parent cf4cf8503c
commit d6f6fbb921
6 changed files with 369 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/docs/dart/latest/_data.json Normal file
View File

@ -0,0 +1,29 @@
{
"index": {
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> 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 <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
},
"api": {
"icon": "book",
"title": "API Proposal"
},
"help": {
"icon": "chat",
"title": "Help & Support"
}
}

14
public/docs/dart/latest/api.jade Normal file
View File

@ -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
<a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
These versions of Angular are production ready and available today.

33
public/docs/dart/latest/help.jade Normal file
View File

@ -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. <a href="http://plnkr.co/edit/rQvx8CXtmkCKR89jWn8T">Use this template</a>.
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

30
public/docs/dart/latest/index.jade Normal file
View File

@ -0,0 +1,30 @@
div.c4
md-card
md-card-content
h3.text-headline.text-uppercase <span class="icon-query-builder"></span> 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 <span class="icon-play-circle-outline"></span> 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 <span class="icon-book"></span> 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

243
public/docs/dart/latest/quickstart.jade Normal file
View File

@ -0,0 +1,243 @@
// STEP 1 - Install Angular ##########################
.l-main-section
h2#section-install-angular 1. Install Angular
p.
<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.
p.
For the sake of this quickstart we recommend using the
<a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
This repository will provide a faster start. <code>es6-shim</code> 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 <code>app.es6</code> at the root of the project.
The <code>.es6</code> 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 &lt;app&gt;&lt;/app&gt;
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: `
&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>.
// 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 <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.
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 <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.
pre.prettyprint.linenums
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;
<!-- -->
&lt;!-- The app component created in app.es6 --&gt;
&lt;app&gt;&lt;/app&gt;
<!-- -->
&lt;/body&gt;
&lt;/html&gt;
.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.
&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;
&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;
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.

20
public/docs/dart/latest/resources.jade Normal file
View File

@ -0,0 +1,20 @@
.l-main-section
h2 Victor Savkin's blog posts
ul
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change Detection</a>
li <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Dependency Injection</a>
.l-main-section
h2 David East's Intro Todo App
ul
li <span class="icon-play-circle-outline"></span> <a href="https://developers.google.com/experts/all/technology/angular-js">Building a Todo App</a> (video)
.l-main-section
h2 <span class="icon-play-circle-outline"></span> More Videos
ul
li <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">ng-europe playlist of videos</a> on Angular 2 and future of Angular
li Hejlsberg's <a href="https://www.youtube.com/watch?v=Ut694dsIa8w">talk on TypeScript</a> from December
li Coming soon: <a href="http://www.ng-conf.org/">playlist of video from ng-conf 2015</a>