47 lines
3.0 KiB
Plaintext
47 lines
3.0 KiB
Plaintext
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';
|
|
|
|
@Component({
|
|
selector: 'my-app',
|
|
template: '<h1>My First Angular 2 App</h1>'
|
|
})
|
|
class AppComponent {}
|
|
|
|
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
|