feat(features: update features section)
This commit is contained in:
Eric Jimenez
Naomi Black
parent
f96c0c7d77
commit
c5309e9195
|
|
@ -1,132 +1,53 @@
|
|||
div
|
||||
div
|
||||
h2(class="text-headline") Cross Platform
|
||||
div(class="feature-row")
|
||||
div(class="feature")
|
||||
h3 Progressive Web App
|
||||
p(class="text-body") Use modern web platform capabilities to deliver app-like experiences. High performance, offline and zero-step installation.
|
||||
|
||||
<!-- Speed & Performance -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-av-timer"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Speed & Performance
|
||||
p.text-body.
|
||||
Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through
|
||||
server-side pre-rendering, offline compile for fast startup, and ultrafast change detection
|
||||
and view caching for smooth virtual scrolling and snappy view transitions.
|
||||
div(class="feature")
|
||||
h3 Native
|
||||
p(class="text-body") Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.
|
||||
|
||||
<!-- Simplicity -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon is-small icon-embed2"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Simple & Expressive
|
||||
p.text-body.
|
||||
Make your intention clear using natural, easy-to-write syntax.
|
||||
Reduce complexity for your team: new, structure-rich templates are
|
||||
readable and easy to understand at a glance.
|
||||
div(class="feature")
|
||||
h3 Desktop
|
||||
p(class="text-body") Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus ability to access native OS APIs.
|
||||
|
||||
h2(class="text-headline") Speed & Performance
|
||||
div(class="feature-row")
|
||||
div(class="feature")
|
||||
h3 Code generation
|
||||
p(class="text-body") Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines giving you all the benefits of hand-written code with the productivity of a framework.
|
||||
div(class="feature")
|
||||
h3 Universal
|
||||
p(class="text-body") Serve the first view of your application on node.js, .NET, PHP and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.
|
||||
div(class="feature")
|
||||
h3 Code Splitting
|
||||
p(class="text-body") Angular apps load quickly with the new Component Router that delivers automatic code-splitting so users only load code required to render the view they request.
|
||||
|
||||
<!-- Cross-Platform -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-stay-current-portrait"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Cross Platform
|
||||
p.text-body.
|
||||
Learning Angular 2 gives you the tools you need to build apps for desktop, mobile web,
|
||||
Android, and iOS. Angular Universal provides for server-side rendering for fast initial
|
||||
views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps.
|
||||
Web worker support keeps your app UI fully responsive no matter how heavy the load.
|
||||
|
||||
|
||||
<!-- Seamless Upgrade -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-web"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Seamless Upgrade from Angular 1
|
||||
p.text-body.
|
||||
Upgrade your Angular 1 application at your own pace by mixing in Angular 2 components,
|
||||
directives, pipes, services and more by using the ngUpgrade APIs.
|
||||
|
||||
|
||||
<!-- Flexible Development -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-favorite"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Flexible Development
|
||||
p.text-body.
|
||||
The choice of language is up to you. In addition to full support for
|
||||
ES5, TypeScript, and Dart, Angular 2 works equally well with ES2015 and other languages
|
||||
that compile to JavaScript.
|
||||
|
||||
|
||||
<!-- Routing -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-call-split"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Comprehensive Routing
|
||||
p.text-body.
|
||||
Design sophisticated views:
|
||||
map URL paths to application components,
|
||||
and use advanced features like nested and sibling routes.
|
||||
Angular 2 supports card stack navigation, animated transitions, and
|
||||
lazy loading for mobile users.
|
||||
If you already use routing from a prior version of Angular,
|
||||
you can easily migrate to Angular 2 routing.
|
||||
|
||||
|
||||
<!-- Dependency Injection -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-now-widgets"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Dependency Injection
|
||||
p.text-body.
|
||||
Angular 2 ships with powerful, yet simple-to-use dependency injection,
|
||||
allowing you to maintain modular applications without writing tedious glue code.
|
||||
Dependency injection helps you write tests
|
||||
by making it easy to inject test doubles.
|
||||
|
||||
<!-- Legacy Browsers -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-fast-forward"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Legacy Browser Support
|
||||
p.text-body.
|
||||
In addition to fully supporting latest versions of Chrome, Edge, Firefox, IE, and Safari,
|
||||
Angular 2 is also tested for older browsers including IE9+ and Android 4.1+.
|
||||
|
||||
|
||||
<!-- Animations -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-flip"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Animations
|
||||
p.text-body.
|
||||
[Under development] Tap directly into low-level animation support on
|
||||
mobile and desktop environments with easy-to-use Angular events.
|
||||
You can use CSS, JavaScript, and the Web Animations API to
|
||||
intelligently handle changes to animations in response to user events.
|
||||
Plan complex animation flows by sequencing the behavior of
|
||||
an entire website on a timeline.
|
||||
|
||||
|
||||
<!-- Internationalization & Accessibility -->
|
||||
.grid-fluid.l-space-bottom-8
|
||||
.c3.text-center
|
||||
.sticker <span class="sticker-icon icon-accessibility"></span>
|
||||
.c7
|
||||
h3.text-headline.text-uppercase Internationalization (I18N) & Accessibility
|
||||
p.text-body(ng-non-bindable).
|
||||
[Under development] Reach all your users.
|
||||
Use the familiar ICU message format in Angular interpolation syntax
|
||||
(<b>{{ }}</b>), including pluralization and gender rules.
|
||||
Automate message extraction, pseudo-localization, and translation updates.
|
||||
Generate static applications for each locale.
|
||||
Easily promote accessibility via screen readers and assistive devices by automatically
|
||||
generating appropriate ARIA attributes.
|
||||
|
||||
h2(class="text-headline") Productivity
|
||||
div(class="feature-row")
|
||||
div(class="feature")
|
||||
h3 Templates
|
||||
p(class="text-body") Quickly create UI views with simple and powerful template syntax.
|
||||
div(class="feature")
|
||||
h3 Angular CLI
|
||||
p(class="text-body") Command line tools: start building fast, add components and tests, then instantly deploy.
|
||||
div(class="feature")
|
||||
h3 IDEs
|
||||
p(class="text-body") Get intelligent code completion, instant errors and other feedback in popular editors and IDEs.
|
||||
|
||||
h2(class="text-headline") Full Development Story
|
||||
div(class="feature-row")
|
||||
div(class="feature")
|
||||
h3 Testing
|
||||
p(class="text-body") With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and stably.
|
||||
div(class="feature")
|
||||
h3 Animation
|
||||
p(class="text-body") Create high performance complex choreographies and animation timelines with very little code through Angular's intuitive API.
|
||||
div(class="feature")
|
||||
h3 Accessibility
|
||||
p(class="text-body") Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.
|
||||
|
||||
!= partial("/_includes/_cta-bar")
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@
|
|||
@import 'module/support';
|
||||
@import 'module/article-card';
|
||||
@import 'module/style-guide';
|
||||
@import 'module/_press-kit';
|
||||
@import 'module/resources';
|
||||
@import 'module/home-promos';
|
||||
@import 'module/press-kit';
|
||||
@import 'module/features';
|
||||
|
||||
/*
|
||||
* PRINT STYLES
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
.feature-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2.text-headline {
|
||||
font-size: 28px;
|
||||
margin-top: 10px;
|
||||
color: #37474F;
|
||||
}
|
||||
}
|
||||
|
||||
.features-desc {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
max-width: 350px;
|
||||
margin-bottom: $unit * 4;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue