honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates homepage to include plunker demos

This commit is contained in:
Robert Messerle 2015-12-14 20:31:40 -08:00 committed by Naomi Black
parent e8644676ae
commit c5637fcfde
11 changed files with 238 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/_data.json
View File

@ -1,7 +1,8 @@
{
"index": {
"hero": "home",
"title": "Angular is a development platform for building mobile and desktop applications"
"title": "One framework.",
"subtitle": "Mobile and desktop."
},
"features": {

2
public/_includes/_hero-home.jade
View File

@ -1,6 +1,6 @@
header(class="background-sky")
.hero.background-lon-paper.is-large
h1.text-headline.hero-logo #{title}
h1.text-headline.hero-logo #{title}<br>#{subtitle}
.hero-cta
a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain"

7
public/docs/_examples/homepage-hello-world/ts/src/hello_world.html Normal file
View File

@ -0,0 +1,7 @@
<!-- #docregion -->
<label>Name:</label>
<!-- data-bind to the input element; store value in yourName -->
<input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
<hr>
<!-- conditionally display `yourName` -->
<h1 [hidden]="!yourName">Hello {{yourName}}!</h1>

15
public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts Normal file
View File

@ -0,0 +1,15 @@
// #docregion
import {Component} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'src/hello_world.html'
})
export class HelloWorld {
// Declaring the variable for binding with initial value
yourName: string = '';
}

38
public/docs/_examples/homepage-hello-world/ts/src/index.html Normal file
View File

@ -0,0 +1,38 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.52/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/hello_world').then(function(src) {
ng.bootstrap(src.HelloWorld);
});
});
</script>
</head>
<!-- 4. Display the application -->
<body>
<hello-world>Loading...</hello-world>
</body>
</html>

39
public/docs/_examples/homepage-todo/ts/src/index.html Normal file
View File

@ -0,0 +1,39 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.52/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/todo_app').then(function(src) {
ng.bootstrap(src.TodoApp);
});
});
</script>
</head>
<!-- 4. Display the application -->
<body>
<todo class="container" style="display: block">Loading...</todo>
</body>
</html>

6
public/docs/_examples/homepage-todo/ts/src/todo.ts Normal file
View File

@ -0,0 +1,6 @@
// #docregion
// Declare an interaface for type safety
export interface Todo {
text: string,
done: boolean
}

39
public/docs/_examples/homepage-todo/ts/src/todo_app.ts Normal file
View File

@ -0,0 +1,39 @@
// #docregion
import {Component} from 'angular2/core';
import {Todo} from './todo';
import {TodoList} from './todo_list';
import {TodoForm} from './todo_form';
@Component({
selector: 'todo',
template: `
<h2>Todo</h2>
<span>{{remaining}} of {{todos.length}} remaining</span>
[ <a href="javascript: false" (click)="archive()">archive</a> ]
<todo-list [todos]="todos"></todo-list>
<todo-form (newTask)="addTask($event)"></todo-form>`,
directives: [TodoList, TodoForm]
})
export class TodoApp {
todos: Todo[] = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}
];
get remaining(): number {
return this.todos.reduce((count, todo: Todo) => count + todo.done, 0);
}
archive(): void {
var oldTodos = this.todos;
this.todos = [];
oldTodos.forEach((todo: Todo) => {
if (!todo.done) this.todos.push(todo);
});
}
addTask(task: Todo) {
this.todos.push(task);
}
}

25
public/docs/_examples/homepage-todo/ts/src/todo_form.ts Normal file
View File

@ -0,0 +1,25 @@
// #docregion
import {Component, Output, EventEmitter} from 'angular2/core';
import {Todo} from './todo';
@Component({
selector: 'todo-form',
template: `
<form (ngSubmit)="addTodo()">
<input type="text" [(ngModel)]="task" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>`
})
export class TodoForm {
@Output() newTask = new EventEmitter<Todo>();
task: string = '';
addTodo() {
if (this.task) {
this.newTask.next({text:this.task, done:false});
}
this.task = '';
}
}

23
public/docs/_examples/homepage-todo/ts/src/todo_list.ts Normal file
View File

@ -0,0 +1,23 @@
// #docregion
import {Component, Input} from 'angular2/core';
import {Todo} from './todo';
@Component({
selector: 'todo-list',
styles: [`
.done-true {
text-decoration: line-through;
color: grey;
}`
],
template: `
<ul class="unstyled">
<li *ngFor="var todo of todos">
<input type="checkbox" [(ngModel)]="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>`
})
export class TodoList {
@Input() todos: Todo[];
}

74
public/index.jade
View File

@ -1,40 +1,46 @@
.grid-fluid.l-space-bottom-8
.c7
h3.text-headline Build Incredible Applications
p.text-body Angular is a development platform for creating applications using modern web standards. Angular includes a <a href="/features.html">wealth of essential features</a> such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
.c5.text-center
img(src="/resources/images/logos/html5/html5.png" alt="Modern Web Standards")
include _includes/_util-fns
div(layout='row' style='margin: 0 -24px')
div(flex=33 style='padding:0 24px')
h3.text-headline Fast
p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead.
div(flex=33 style='padding:0 24px')
h3.text-headline Mobile
p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance.
div(flex=33 style='padding:0 24px')
h3.text-headline Flexible
p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures.
br
div
h3.text-headline Basics
code-example(language='ts' format='linenums').
import {bootstrap, Component} from 'angular2/angular2';
.grid-fluid.l-space-bottom-8
.c6
h3.text-headline Start Quick, Build Fast
p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components. Get started in just minutes with our <a href="/docs/ts/latest/quickstart.html">QuickStart Guide</a>.
.c6
code-example(language="javascript" format="linenums" showcase="true").
@Component({
selector: 'my-app',
template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'
template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;'
})
class AppComponent {}
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Ali';
}
}
.grid-fluid.l-space-bottom-8
.c7
h3.text-headline Powered by the Open Source Community
p.text-body Angular is built by you, for you. Our community shapes Angular's direction: core contributions come from big companies, and small ones from students and independent experts. We do our work <a href="https://github.com/angular/angular.js">in the open</a> so that you can either help Angular improve or extend and modify what we've built.
.c5.text-center
img(src="/resources/images/logos/license/open-source.png" alt="Open Source Initiative")
.grid-fluid.text-center
.c12
h3.text-headline Loved by Millions of Developers
p.text-body Join millions of developers who use Angular. Ramp up in minutes, and build an app today.
!= partial("/_includes/_cta-bar")
bootstrap(AppComponent);
br
div
h3.text-headline Structure your app
p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below.
p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
p(style='text-align:right')
md-button.md-primary(href='http://plnkr.co/edit/hjHrTZw8HvkzAGhGiJhu?p=preview' target='_blank')
span.icon-open-in-new
| Edit on Plunker
+makeTabs('../docs/_fragments/homepage-hello-world/ts/src/index.html,../docs/_fragments/homepage-hello-world/ts/src/hello_world.html,../docs/_fragments/homepage-hello-world/ts/src/hello_world.ts', null, 'index.html,hello_world.html,hello_world.ts')
br
div
h3.text-headline Structuring apps with components
p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates.
p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
p(style='text-align:right')
md-button.md-primary(href='http://plnkr.co/edit/UHEUnL8jpUoZBw3TaqWT?p=preview' target='_blank')
span.icon-open-in-new
| Edit on Plunker
+makeTabs('../docs/_fragments/homepage-todo/ts/src/index.html,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts', null, 'index.html,todo.ts,todo_app.ts,todo_form.ts,todo_list.ts')
br