JS Quickstart.
This commit is contained in:
parent
906f631f92
commit
c1aa128527
|
@ -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 <code>npm</code>.
|
||||
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 <code>es6-shim</code> GitHub repository for a faster start. The <code>es6-shim</code> 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 <code>app.es6</code>. 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
|
||||
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 <code>Component</code> 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 <code>Component</code> with the HTML tag of <code>app</code>.
|
||||
|
||||
pre
|
||||
code <hello></hello>
|
||||
|
||||
p A <code>Component</code> 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 <code>Component</code> annotation tells Angular what the HTML tag will be for your component. Whereas the <code>Template</code> annotations tells Angular what template to apply to your component.
|
||||
| sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector.
|
||||
p
|
||||
| The <code>Template</code> 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 <code>url</code> 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 <code>Component</code> created above will have a HTML tag of <code><app></app></code> and a template of <code><h1>Hello</h1></code>.
|
||||
| The <code>Component</code> created above will have a HTML tag of <code><app></app></code> and a template of <code><h1>Hello {{ name }}</h1></code>.
|
||||
.clear
|
||||
|
||||
section.docs-sub-section
|
||||
|
@ -102,28 +113,41 @@
|
|||
| this.name = "Alice";
|
||||
| }
|
||||
| }
|
||||
p
|
||||
| In the template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>.
|
||||
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 <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>.
|
||||
.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 <code>bootstrap</code> function
|
||||
.c6
|
||||
p
|
||||
| Angular provides a <code>bootstrap</code> function that renders your component to the page.
|
||||
| Angular provides a <code>bootstrap</code> function that renders your component to the page. The <code>bootstrap</code> 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 <code>index.html</code> file.
|
||||
|
||||
code
|
||||
pre <app></app>
|
||||
.clear
|
||||
|
||||
.content-block.content-number.clearfix
|
||||
i.number.icon-number6.large
|
||||
|
|
Loading…
Reference in New Issue