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 -->
|
div(class="feature")
|
||||||
.grid-fluid.l-space-bottom-8
|
h3 Native
|
||||||
.c3.text-center
|
p(class="text-body") Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.
|
||||||
.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.
|
|
||||||
|
|
||||||
<!-- Simplicity -->
|
div(class="feature")
|
||||||
.grid-fluid.l-space-bottom-8
|
h3 Desktop
|
||||||
.c3.text-center
|
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.
|
||||||
.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.
|
|
||||||
|
|
||||||
|
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 -->
|
h2(class="text-headline") Productivity
|
||||||
.grid-fluid.l-space-bottom-8
|
div(class="feature-row")
|
||||||
.c3.text-center
|
div(class="feature")
|
||||||
.sticker <span class="sticker-icon icon-stay-current-portrait"></span>
|
h3 Templates
|
||||||
.c7
|
p(class="text-body") Quickly create UI views with simple and powerful template syntax.
|
||||||
h3.text-headline.text-uppercase Cross Platform
|
div(class="feature")
|
||||||
p.text-body.
|
h3 Angular CLI
|
||||||
Learning Angular 2 gives you the tools you need to build apps for desktop, mobile web,
|
p(class="text-body") Command line tools: start building fast, add components and tests, then instantly deploy.
|
||||||
Android, and iOS. Angular Universal provides for server-side rendering for fast initial
|
div(class="feature")
|
||||||
views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps.
|
h3 IDEs
|
||||||
Web worker support keeps your app UI fully responsive no matter how heavy the load.
|
p(class="text-body") Get intelligent code completion, instant errors and other feedback in popular editors and IDEs.
|
||||||
|
|
||||||
|
|
||||||
<!-- 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") 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")
|
!= partial("/_includes/_cta-bar")
|
||||||
|
|
|
||||||
|
|
@ -49,9 +49,10 @@
|
||||||
@import 'module/support';
|
@import 'module/support';
|
||||||
@import 'module/article-card';
|
@import 'module/article-card';
|
||||||
@import 'module/style-guide';
|
@import 'module/style-guide';
|
||||||
@import 'module/_press-kit';
|
|
||||||
@import 'module/resources';
|
@import 'module/resources';
|
||||||
@import 'module/home-promos';
|
@import 'module/home-promos';
|
||||||
|
@import 'module/press-kit';
|
||||||
|
@import 'module/features';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* PRINT STYLES
|
* 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