added make-example
This commit is contained in:
Jay Traband
YuCheng Hu
parent
24948fde50
commit
d8ad38137b
|
|
@ -23,6 +23,14 @@
|
|||
// we will almost certainly never go 10 or 11 deep but ...
|
||||
- var pathToFrags = "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
|
||||
|
||||
mixin makeExample(path, fileName, title)
|
||||
- var extn = getExtn(fileName);
|
||||
- var extPath = pathToFrags + path + "/";
|
||||
if (title)
|
||||
.example-title #{title}
|
||||
code-example(language="#{extn}" format="linenums")
|
||||
!= getFrag(extPath + fileName + ".md")
|
||||
|
||||
mixin makeTabs(path, fileNames, tabNames)
|
||||
- fileNames = fileNames.split(",");
|
||||
- tabNames = tabNames.split(",")
|
||||
|
|
@ -32,7 +40,6 @@ mixin makeTabs(path, fileNames, tabNames)
|
|||
- var tabName = tabNames[index].trim();
|
||||
- var fileName = fileNames[index].trim();
|
||||
- var extn = getExtn(fileName);
|
||||
// - var extPath = pathToFrags + (path.length ? path + "/" : "");
|
||||
- var extPath = pathToFrags + path + "/";
|
||||
code-pane(language="#{extn}" name="#{tabName}" format="linenums")
|
||||
!= getFrag(extPath + fileName + ".md")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
include ../../../../_includes/_util-fns
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Install Angular2
|
||||
There are four steps to create any Angular app:
|
||||
|
||||
1. Create an entry point HTML file where users will start
|
||||
1. Load the Angular library at the top of the file
|
||||
1. Make a root component for your application
|
||||
1. Bootstrap Angular
|
||||
|
||||
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
|
||||
|
||||
When 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
|
||||
|
||||
.callout.is-helpful
|
||||
header Typescript vs ES5
|
||||
:markdown
|
||||
Although we work through the examples in TypeScript, you can also use
|
||||
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
|
||||
version. Note that in ES5, you'd want to name your files `.js` rather than
|
||||
`.ts`.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Create an entry point
|
||||
Create an `index.html` file and add the Angular library tags and a `main.ts` file where
|
||||
you'll build your first component.
|
||||
|
||||
In the `<body>`, add an element called `<my-app>` that will be the root of your
|
||||
application.
|
||||
|
||||
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
|
||||
|
||||
+makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript')
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't use code.angularjs.org in a live app
|
||||
:markdown
|
||||
This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
|
||||
fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Set up the starting component
|
||||
|
||||
In `main.ts`, 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:
|
||||
|
||||
+makeTabs("gettingstarted", "ts/main.ts, js/main.js", "TypeScript, JavaScript")
|
||||
|
||||
.callout.is-helpful
|
||||
header Annotations vs Decorators
|
||||
:markdown
|
||||
If you are transpiling using a tool that translates the `@` symbols to
|
||||
annotations (for example Traceur), you will need to import the annotation versions of
|
||||
Component and View. That can be easily achieved using
|
||||
`import {ComponentAnnotation as Component, ViewAnnotation as View}`.
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Run it!
|
||||
|
||||
Open `index.html` through your web server and you should see:
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")
|
||||
|
||||
.l-main-section
|
||||
:markdown
|
||||
## Explanations
|
||||
|
||||
This basic Angular app contains the structure for any app you'll build.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### It's all a tree
|
||||
|
||||
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.
|
||||
|
||||
The root component's job is to give a location in the `index.html` file where your application will
|
||||
render through its element, in this case `<my-app>`. There is also nothing special about this
|
||||
element name; you can pick it as you like.
|
||||
|
||||
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.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### @Component and @View annotations
|
||||
|
||||
A component annotation describes details about the component. An annotation can be identified by its at-sign (`@`).
|
||||
|
||||
The `@Component` annotation defines the HTML tag for the component by specifying the component's CSS selector.
|
||||
|
||||
The `@View` annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.
|
||||
|
||||
.l-sub-section
|
||||
:markdown
|
||||
### import vs. window.angular
|
||||
|
||||
The main difference between the ES5 and TypeScript versions is the loading of modules.
|
||||
|
||||
**TypeScript**<br/>
|
||||
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
|
||||
|
||||
**Javascript**<br/>
|
||||
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
|
||||
|
||||
+makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript')
|
||||
|
||||
+makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')
|
||||
|
|
@ -2,20 +2,13 @@
|
|||
* BASE FILES
|
||||
*
|
||||
*/
|
||||
|
||||
@import 'options';
|
||||
|
||||
@import 'base/colors';
|
||||
@import 'base/reset';
|
||||
@import 'base/mixins';
|
||||
@import 'base/type';
|
||||
|
||||
|
||||
@import 'state';
|
||||
@import 'layout/layout';
|
||||
@import 'theme';
|
||||
@import 'angular';
|
||||
@import "translate";
|
||||
@import "blog";
|
||||
@import 'base/reset';
|
||||
@import 'base/type';
|
||||
|
||||
|
||||
/*
|
||||
|
|
@ -23,8 +16,6 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@import 'module/announcement-bar';
|
||||
@import 'module/badge';
|
||||
@import 'module/main-nav';
|
||||
@import 'module/side-nav';
|
||||
@import 'module/jump-nav';
|
||||
|
|
@ -34,11 +25,8 @@
|
|||
@import 'module/banner';
|
||||
@import 'module/cta-bar';
|
||||
@import 'module/buttons';
|
||||
@import 'module/form';
|
||||
@import 'module/table';
|
||||
@import 'module/code';
|
||||
@import 'module/code-shell';
|
||||
@import 'module/heading-code';
|
||||
@import 'module/code-box';
|
||||
@import 'module/sticker';
|
||||
@import 'module/bio-card';
|
||||
|
|
@ -46,27 +34,14 @@
|
|||
@import 'module/alert';
|
||||
@import 'module/callout';
|
||||
@import 'module/images';
|
||||
@import 'module/lists';
|
||||
@import 'module/card';
|
||||
@import 'module/hover-card';
|
||||
@import 'module/modal';
|
||||
@import 'module/search';
|
||||
@import 'module/shadow';
|
||||
@import 'module/showcase';
|
||||
@import 'module/statement';
|
||||
@import 'module/symbol';
|
||||
@import 'module/api';
|
||||
@import 'module/cheatsheet';
|
||||
@import 'module/filetree';
|
||||
@import 'module/support';
|
||||
@import 'module/article-card';
|
||||
@import 'module/style-guide';
|
||||
@import 'module/resources';
|
||||
@import 'module/home-promos';
|
||||
@import 'module/press-kit';
|
||||
@import 'module/features';
|
||||
@import 'module/docs-landing';
|
||||
@import 'module/embedded-plunker';
|
||||
@import 'module/example-title';
|
||||
|
||||
|
||||
/*
|
||||
* PRINT STYLES
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
.example-title {
|
||||
@extend .alert;
|
||||
|
||||
color: $snow;
|
||||
padding: 0 ($unit * 2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-color: $blueberry;
|
||||
background: $blueberry;
|
||||
// temporary hack to remove space between example title and code-example
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
Loading…
Reference in New Issue