diff --git a/.idea/codeStyleSettings.xml b/.idea/codeStyleSettings.xml new file mode 100644 index 0000000000..c4c954319c --- /dev/null +++ b/.idea/codeStyleSettings.xml @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 4aab0348ed..925419e690 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -2,7 +2,7 @@ "_listtype": "ordered", "setup": { - "title": "Setup" + "title": "Getting Started" }, "displaying-data": { diff --git a/public/docs/js/latest/guide/setup-example1.png b/public/docs/js/latest/guide/setup-example1.png new file mode 100644 index 0000000000..c67857149f Binary files /dev/null and b/public/docs/js/latest/guide/setup-example1.png differ diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index 1f3ff1cc71..16075d759b 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -1,26 +1,161 @@ -p. - 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. +.l-main-section + p. + Mission: By the end of this chapter, you should be able to get an Angular 2 component to appear on + the page. + + .l-sub-section + h3#section-examples Examples: + ul + li + a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript + li + a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5 .l-main-section - h2#section-create-project 1. Create a project + h2#section-install-or-plunker Install Angular or Use Plunker + p There are four steps to create any Angular app: + ul + li Create an entry point HTML file where users will start + li Load the Angular library at the top of the file + li Make a root component for your application + li Bootstrap Angular p. - The goal of this quickstart is to create a component that renders "Hello Alice" to the page. - To get started, create a new directory. + You can edit and test out your apps either though serving local files through a web server or through a service like + Plunker. + p. + For Plunker, just use the starter template to get going. If you're + serving local files, edit and save them and start a web server that serves files in that directory. If you have + Python installed, you can run a basic HTTP server from the root of your code directory with: + + pre.prettyprint.lang-bash + code python -m SimpleHTTPServer 8000 .l-main-section - h2#section-add-es6-shim 2. Clone the quickstart repository + h2#section-create-an-entry-point Create an entry point + p. + Create an index.html file and add the Angular library tags and a main.js file where + you'll build your first component. - p Within your project, clone the quickstart repository: + p. + In the <body>, add an element called <my-app> that will be the root of your + application. - pre.prettyprint - code git clone https://github.com/angular/quickstart.git + pre.prettyprint.lang-html + code. + //ES5 + <!DOCTYPE html> + <html> + <head> + <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script> + <script src="main.js"></script> + </head> + <body> + </body> + </html> + pre.prettyprint.lang-html + code. + //TypeScript + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + <script src="https://jspm.io/system@0.16.js"></script> + <script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script> + </head> + <body> + <my-app></my-app> + <script> + System.config({ + paths: { + '*': '*.js', + 'angular2/*': 'angular2/*', + } + }); + System.import('main'); + </script> + </body> + </html> +.callout.is-helpful + header Don't use code.angularjs.org in a live app + p. + This example serves the Angular library from code.angularjs.org. This is + fine for examples, but you'd want to serve it yourself or use a CDN for real deployment. -// WHAT'S NEXT... ########################## .l-main-section - h2#section-transpile Great job! We'll have the next steps out soon. + h2#section-set-up-the-starting-component Set up the starting component + + p. + In main.js, create a class called AppComponent, configure it to bind to the + <my-app> element in index.html, and call Angular's bootstrap() to kick + it all off like this: + + pre.prettyprint.lang-javascript + code. + //ES5 + function AppComponent() {} + + AppComponent.annotations = [ + new angular.Component({ + selector: 'my-app' + }), + new angular.View({ + template: '<h1>My first Angular 2 App</h1>' + }) + ]; + + document.addEventListener('DOMContentLoaded', function() { + angular.bootstrap(AppComponent); + }); + + pre.prettyprint.lang-typescript + code. + //TypeScript + import {Component, View, bootstrap} from 'angular2/angular2'; + + @Component({ + selector: 'my-app' + }) + @View({ + template: '<h1>My first Angular 2 App</h1>' + }) + class AppComponent { + } + + bootstrap(AppComponent); + +.l-main-section + h2#section-run-it Run it! + + p. + Open index.html through your web server or hit the Run button if using Plunker and + you should see: + div(align='center') + img(src='setup-example1.png') + +.l-main-section + h2#section-explanations Explanations + + p This basic Angular app contains the structure for any app you'll build. + + p. + You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top + level container for the rest of your application. You've named this one AppComponent, but there's + nothing special about the name and you can use whatever makes sense to you. + + p. + The root component's job is to give a location in the index.html file where your application will + render through it's element, in this case <my-app>. There is also nothing special about this + element name and you can pick it as you like. + + p. + The root component loads the initial template for the application that will load other components to perform + whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of + these in the following pages. + + p Exciting! Not excited yet? Let's move on to Displaying Data. + + diff --git a/public/docs/js/latest/guide/user-input-example1.png b/public/docs/js/latest/guide/user-input-example1.png new file mode 100644 index 0000000000..91e2dcfed1 Binary files /dev/null and b/public/docs/js/latest/guide/user-input-example1.png differ