diff --git a/public/_includes/_docs-nav.jade b/public/_includes/_docs-nav.jade
index e6e1da15cf..a6e1c0215b 100644
--- a/public/_includes/_docs-nav.jade
+++ b/public/_includes/_docs-nav.jade
@@ -2,10 +2,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
.side-nav-search
input(type="search" placeholder="SEARCH DOCS...")
-
ul.side-nav-primary
for page, slug in public.docs[current.path[1]][current.path[2]]._data
- if slug == "index"
- li Docs Home
- else
- li #{page.title}
+ name = page.menuTitle || page.title
+ selected = current.path[3] == slug ? 'is-selected':''
+
+ li #{name}
diff --git a/public/docs/js/_quickstart.jade b/public/docs/js/_quickstart.jade
index cbc7eb102f..3c77962fcf 100644
--- a/public/docs/js/_quickstart.jade
+++ b/public/docs/js/_quickstart.jade
@@ -1,83 +1,77 @@
-
-//- if lang == 'js'
-//- h2 I like JavaScript
-//- else if lang == 'dart'
-//- h2 I like Dart
-
-// STEP 1 - Install Angular ##########################
+// STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix
i.number.icon-number.large
-
+
.c11
header
-
+
h3#section-install-angular Install Angular
- p
- b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
+ p
+ 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
+ | For the sake of this quickstart we recommend using the
a(href="https://github.com/davideast/conscious") es6-shim GitHub repository
|. This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers.
-
- p
+
+ p
| Clone the repository inside of aleady existing project.
-
+
pre
- 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
h4 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 ##########################
+ | 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 ##########################
.content-block.content-number.clearfix
i.number.icon-number2.large
-
+
.c11
header
-
+
h3#section-transpile 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.
-
- p Using the ES6 module syntax you can import the required modules from Angular2.
+ | Create a file named app.es6 at the root of the project. The .es6 extension signifies that the file uses ES6 syntax.
+
+ p 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 modules from Angular. These modules load at runtime.
-
-// STEP 3 - Create a component ##########################
+
+// STEP 3 - Create a component ##########################
.content-block.content-number.clearfix
i.number.icon-number3.large
-
+
.c11
header
-
+
h3#section-angular-create-account Create a component
p
| Components are custom HTML elements. Angular uses components to empower HTML. Components structure and represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
-
+
pre
code <app></app>
-
+
p A component consists of two parts; the annotation section and the component controller.
-
+
pre
code
| import {Component, Template, bootstrap} from 'angular2/angular2';
|
| // Annotation Section
- | @Component({
+ | @Component({
| selector: 'app'
| })
| @Template({
@@ -91,19 +85,18 @@
| this.name = "Alice";
| }
| }
-
+
section.docs-sub-section
h4 Component Annotations
-
+
+ p A component annotation provides meta-data about the component. An annotation can always identified by its at-sign — @.
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.
+ | 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
code
- | @Component({
+ | @Component({
| selector: 'app'
| })
| @Template({
@@ -114,7 +107,7 @@
p
| The component created above has a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>.
.clear
-
+
section.docs-sub-section
h4 Component Controller
p
@@ -132,38 +125,38 @@
| 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 }}.
.clear
-// STEP 4 - Bootstrap ##########################
+// STEP 4 - Bootstrap ##########################
.content-block.content-number.clearfix
i.number.icon-number4.large
-
+
.c11
header
-
+
h3#section-transpile Bootstrap
p
- | The last step to load the component on the page.
-
+ | The last step to load the component on the page.
+
section.docs-sub-section
h4 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.
-
+
code
pre bootstrap(AppComponent);
.clear
-
-// STEP 5 - Declare the HTML ##########################
+
+// STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix
i.number.icon-number5.large
.c11
header
-
+
h3#section-angular-create-account 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.
-
+
code
- pre
+ pre
| <html>
| <head>
| <title>Angular 2 Quickstart</title>
@@ -176,13 +169,13 @@
|
| </body>
| </html>
-
+
section.docs-sub-section
h4 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
+ | 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
+ 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:
@@ -190,9 +183,9 @@
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.
-
+
code
- pre
+ pre
| <html>
| <head>
| <title>Angular 2 Quickstart</title>
@@ -216,17 +209,17 @@
| </script>
| </body>
| </html>
- .clear
-
+ .clear
+
p
| Run the root of your project on a local server.
.content-block.content-number.clearfix
i.number.icon-number6.large
-
+
.c11
header
-
+
h3#section-transpile Extra-credit
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 6e28d2d519..09e9fd5ccb 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -1,22 +1,28 @@
{
"index": {
+ "icon": "home",
"title": "Angular Docs",
+ "menuTitle": "Docs Home",
"banner": "Angular 2 is currently in Alpha Preview. We reccomend using Angular 1.X for production applications."
},
"quickstart": {
+ "icon": "query-builder",
"title": "5 Min Quickstart"
},
"resources": {
+ "icon": "play-circle-fill",
"title": "Angular Resources"
},
"api": {
+ "icon": "book",
"title": "API Proposal"
},
"help": {
+ "icon": "chat",
"title": "Help & Support"
}
}
\ No newline at end of file
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index 38c4aeb6d8..9a7947bd66 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -37,12 +37,32 @@
> a {
line-height: $unit * 6;
- padding: 0px ($unit * 2);
+ padding: 0px ($unit * 2) 0px ($unit * 6);
color: $metal;
font-size: 14px;
text-transform: uppercase;
text-align: left;
font-weight: 400;
+ position: relative;
+
+ &.is-selected {
+ background: $fog;
+ color: $regal;
+
+ .side-nav-icon {
+ color: $regal;
+ }
+ }
+ }
+
+ .side-nav-icon {
+ position: absolute;
+ top: 0px;
+ left: 16px;
+ z-index: $layer-1;
+ font-size: 19px;
+ color: $cloud;
+ line-height: 47px;
}
}
}