diff --git a/public/docs/js/_quickstart.jade b/public/docs/js/_quickstart.jade deleted file mode 100644 index 6deedf14fe..0000000000 --- a/public/docs/js/_quickstart.jade +++ /dev/null @@ -1,243 +0,0 @@ -// STEP 1 - Install Angular ########################## -.l-main-section - h2#section-install-angular 1. Install Angular - - 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. - - p. - For the sake of this quickstart we recommend using the - es6-shim GitHub repository. - This repository will provide a faster start. es6-shim 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 app.es6 at the root of the project. - The .es6 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 <app></app> - - 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: ` - <h1>Hello {{ name }}</h1> - ` - }) - // Component Controller - class AppComponent { - constructor() { - this.name = "Alice"; - } - } - - .l-sub-section - h3 Component Annotations - - p. - A component annotation provides meta-data about the component. - An annotation can always identified by its at-sign — @. - p. - The @Component annotation defines the HTML tag for the component. - The selector property specifies the tag. The selector property is a CSS selector. - - p. - The @Template 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 url property - and give it the path to the html file. - - pre.prettyprint.linenums - code. - @Component({ - selector: 'app' - }) - @Template({ - inline: ` - <h1>Hello {{ name }}</h1> - ` - }) - - p. - The component created above has a HTML tag of <app></app> - and a template of <h1>Hello {{ name }}</h1>. - - .l-sub-section - h3 Component Controller - - p. - The component controller is the backing of the component's template. A component - controller uses ES6 class 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 name property through the {{ }} - syntax.The body of the constructor assigns "Alice" to the name property. When the - template renders, Alice will appear instead of {{ name }}. - - - -// 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 bootstrap function - p. - Angular provides a bootstrap function that renders a - component to the page. The bootstrap 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 index.html file at the root of the project. - Include the es6-shim.js file in the head tag. - Now, declare the app component the body. The es6-shim must - load before any application code. - - pre.prettyprint.linenums - code. - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="/es6-shim/dist/es6-shim.js"></script> - </head> - <body> - - <!-- The app component created in app.es6 --> - <app></app> - - </body> - </html> - - .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. - <html> - <head> - <title>Angular 2 Quickstart</title> - <script src="/es6-shim/dist/es6-shim.js"></script> - </head> - <body> - - <!-- The app component created in app.es6 --> - <app></app> - - <script> - // 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'); - </script> - </body> - </html> - - 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. diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index 09e9fd5ccb..155fe09c17 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -13,7 +13,8 @@ "resources": { "icon": "play-circle-fill", - "title": "Angular Resources" + "title": "Angular Resources", + "banner": "Angular 2 is currently in Alpha Preview. For Angular 1.X Resources please visit Angularjs.org." }, "api": { diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 12e53f91d3..6deedf14fe 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -1 +1,243 @@ -!= partial("../_quickstart", public.docs.js._data) \ No newline at end of file +// STEP 1 - Install Angular ########################## +.l-main-section + h2#section-install-angular 1. Install Angular + + 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. + + p. + For the sake of this quickstart we recommend using the + es6-shim GitHub repository. + This repository will provide a faster start. es6-shim 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 app.es6 at the root of the project. + The .es6 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 <app></app> + + 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: ` + <h1>Hello {{ name }}</h1> + ` + }) + // Component Controller + class AppComponent { + constructor() { + this.name = "Alice"; + } + } + + .l-sub-section + h3 Component Annotations + + p. + A component annotation provides meta-data about the component. + An annotation can always identified by its at-sign — @. + p. + The @Component annotation defines the HTML tag for the component. + The selector property specifies the tag. The selector property is a CSS selector. + + p. + The @Template 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 url property + and give it the path to the html file. + + pre.prettyprint.linenums + code. + @Component({ + selector: 'app' + }) + @Template({ + inline: ` + <h1>Hello {{ name }}</h1> + ` + }) + + p. + The component created above has a HTML tag of <app></app> + and a template of <h1>Hello {{ name }}</h1>. + + .l-sub-section + h3 Component Controller + + p. + The component controller is the backing of the component's template. A component + controller uses ES6 class 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 name property through the {{ }} + syntax.The body of the constructor assigns "Alice" to the name property. When the + template renders, Alice will appear instead of {{ name }}. + + + +// 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 bootstrap function + p. + Angular provides a bootstrap function that renders a + component to the page. The bootstrap 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 index.html file at the root of the project. + Include the es6-shim.js file in the head tag. + Now, declare the app component the body. The es6-shim must + load before any application code. + + pre.prettyprint.linenums + code. + <html> + <head> + <title>Angular 2 Quickstart</title> + <script src="/es6-shim/dist/es6-shim.js"></script> + </head> + <body> + + <!-- The app component created in app.es6 --> + <app></app> + + </body> + </html> + + .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. + <html> + <head> + <title>Angular 2 Quickstart</title> + <script src="/es6-shim/dist/es6-shim.js"></script> + </head> + <body> + + <!-- The app component created in app.es6 --> + <app></app> + + <script> + // 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'); + </script> + </body> + </html> + + 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. diff --git a/public/docs/js/latest/resources.jade b/public/docs/js/latest/resources.jade index 8044bddb5b..53d5a2302e 100644 --- a/public/docs/js/latest/resources.jade +++ b/public/docs/js/latest/resources.jade @@ -1,14 +1,20 @@ .l-main-section - h2 Victor Savkin's blog posts: + h2 Victor Savkin's blog posts ul - li Change Detection http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 + li Change Detection li Functional programming - li dependency injection http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 + li Dependency Injection + +.l-main-section + h2 David East's Intro Todo App + ul + li Building a Todo App (video) + +.l-main-section + h2 More Videos + ul + li ng-europe playlist of videos on Angular 2 and future of Angular + li Hejlsberg's talk on TypeScript from December + li Coming soon: playlist of video from ng-conf 2015 -Video: David East's intro to the todo app -GDEs: https://developers.google.com/experts/all/technology/angular-js -Other videos -ng-europe playlist of videos on angular 2 and future of angular https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ- -soon: playlist of video from ng-conf 2015 -Anders Hejlsberg's talk on TypeScript from December https://www.youtube.com/watch?v=Ut694dsIa8w diff --git a/public/resources/css/module/_bio-card.scss b/public/resources/css/module/_bio-card.scss index 81fa025e1d..7b24a73690 100644 --- a/public/resources/css/module/_bio-card.scss +++ b/public/resources/css/module/_bio-card.scss @@ -1,6 +1,11 @@ .bio-card { + max-width: 360px; + margin-bottom: $unit * 4; + overflow: hidden; + h3 { margin: 0; + white-space: nowrap; } .bio-card-twitter {