diff --git a/public/_data.json b/public/_data.json index 261b31c3db..6d23c5ef31 100644 --- a/public/_data.json +++ b/public/_data.json @@ -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": { diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 5e977af870..12f0fc6fc6 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -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}
#{subtitle} .hero-cta a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" diff --git a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.html b/public/docs/_examples/homepage-hello-world/ts/src/hello_world.html new file mode 100644 index 0000000000..13af8fb34e --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/src/hello_world.html @@ -0,0 +1,7 @@ + + + + +
+ +

Hello {{yourName}}!

\ No newline at end of file diff --git a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts new file mode 100644 index 0000000000..9d4fd95a9b --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts @@ -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 = ''; +} diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.html b/public/docs/_examples/homepage-hello-world/ts/src/index.html new file mode 100644 index 0000000000..024a077757 --- /dev/null +++ b/public/docs/_examples/homepage-hello-world/ts/src/index.html @@ -0,0 +1,38 @@ + + + + + + Angular 2 QuickStart + + + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/public/docs/_examples/homepage-todo/ts/src/index.html b/public/docs/_examples/homepage-todo/ts/src/index.html new file mode 100644 index 0000000000..3535c324a1 --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/src/index.html @@ -0,0 +1,39 @@ + + + + + + Angular 2 QuickStart + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/homepage-todo/ts/src/todo.ts b/public/docs/_examples/homepage-todo/ts/src/todo.ts new file mode 100644 index 0000000000..57070dc72c --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/src/todo.ts @@ -0,0 +1,6 @@ +// #docregion +// Declare an interaface for type safety +export interface Todo { + text: string, + done: boolean +} diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_app.ts b/public/docs/_examples/homepage-todo/ts/src/todo_app.ts new file mode 100644 index 0000000000..a67ebddec5 --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/src/todo_app.ts @@ -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: ` +

Todo

+ {{remaining}} of {{todos.length}} remaining + [ archive ] + + + `, + 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); + } +} diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_form.ts b/public/docs/_examples/homepage-todo/ts/src/todo_form.ts new file mode 100644 index 0000000000..29117525ff --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/src/todo_form.ts @@ -0,0 +1,25 @@ +// #docregion +import {Component, Output, EventEmitter} from 'angular2/core'; +import {Todo} from './todo'; + +@Component({ + selector: 'todo-form', + template: ` +
+ + +
` +}) +export class TodoForm { + @Output() newTask = new EventEmitter(); + task: string = ''; + + addTodo() { + if (this.task) { + this.newTask.next({text:this.task, done:false}); + } + this.task = ''; + } +} + diff --git a/public/docs/_examples/homepage-todo/ts/src/todo_list.ts b/public/docs/_examples/homepage-todo/ts/src/todo_list.ts new file mode 100644 index 0000000000..d059b6ab1f --- /dev/null +++ b/public/docs/_examples/homepage-todo/ts/src/todo_list.ts @@ -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: ` + ` +}) +export class TodoList { + @Input() todos: Todo[]; +} diff --git a/public/index.jade b/public/index.jade index 810a9360a0..e48267a7f1 100644 --- a/public/index.jade +++ b/public/index.jade @@ -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 wealth of essential features 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 QuickStart Guide. - .c6 - code-example(language="javascript" format="linenums" showcase="true"). - @Component({ - selector: 'my-app', - template: '<h1>Hi {{ name }}</h1>' - }) + @Component({ + selector: 'my-app', + template: '<h1>My First Angular 2 App</h1>' + }) + 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 in the open 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