angular-docs-cn/aio/content/marketing/features.html

111 lines
4.3 KiB
HTML
Raw Normal View History

<header class="marketing-banner">
2017-06-08 10:22:39 -04:00
<h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
</header>
refactor(docs-infra): use more consistent content width on marketing pages (#41051) Previously, each marketing page used a different limit for its content's width (if it had a limit at all) and implemented the width limiting in a different way. Besides resulting in an inconsistent UX, this also made it difficult to apply site-wide layout changes. This commit makes the limit for most marketing pages consistent and uses the same CSS class to make it easier to apply site-wide changes in the future. The chosen limit is slightly larger than that of docs pages (62.5em/1000px vs 50em/800px), because marketing pages have a different type of content and layout (i.e. images, multi-column layout, etc.). Finally, this commit also removes obsolete wrapper elements, CSS classes and CSS styles, that are no longer necessary after the changes. Notably, the homepage (`/`) and the "Contributors" page (`/about`) have remained unchanged, because the former has its own layout that is different from other marketing pages and the latter would offer a worse UX with a small content width limit (as the one used on other marketing pages). The content widths of the rest of the marketing pages change slightly as a result of the changes in this commit, but not in a way that would have a negative impact on UX. More specifically: | Page (URL) | Size before | Size after | |:--------------|------------:|-----------:| | `/contribute` | 880px | 1000px | | `/events` | unlimited | 1000px | | `/features` | 996px | 1000px | | `/presskit` | 800px | 1000px | | `/resources` | 800px | 1000px | PR Close #41051
2021-03-09 07:15:47 -05:00
<article class="center-layout">
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Cross Platform</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Progressive Web Apps</div>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
</div>
<div class="feature">
<div class="feature-title">Native</div>
<p class="text-body">Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.</p>
</div>
<div class="feature">
<div class="feature-title">Desktop</div>
<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 the ability to access native OS APIs.</p>
</div>
</div>
<hr>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Speed and Performance</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Code Generation</div>
<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.</p>
</div>
<div class="feature">
<div class="feature-title">Universal</div>
<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.</p>
</div>
<div class="feature">
<div class="feature-title">Code Splitting</div>
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
</div>
</div>
<hr>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Productivity</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Templates</div>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div>
refactor(docs-infra): use more consistent content width on marketing pages (#41051) Previously, each marketing page used a different limit for its content's width (if it had a limit at all) and implemented the width limiting in a different way. Besides resulting in an inconsistent UX, this also made it difficult to apply site-wide layout changes. This commit makes the limit for most marketing pages consistent and uses the same CSS class to make it easier to apply site-wide changes in the future. The chosen limit is slightly larger than that of docs pages (62.5em/1000px vs 50em/800px), because marketing pages have a different type of content and layout (i.e. images, multi-column layout, etc.). Finally, this commit also removes obsolete wrapper elements, CSS classes and CSS styles, that are no longer necessary after the changes. Notably, the homepage (`/`) and the "Contributors" page (`/about`) have remained unchanged, because the former has its own layout that is different from other marketing pages and the latter would offer a worse UX with a small content width limit (as the one used on other marketing pages). The content widths of the rest of the marketing pages change slightly as a result of the changes in this commit, but not in a way that would have a negative impact on UX. More specifically: | Page (URL) | Size before | Size after | |:--------------|------------:|-----------:| | `/contribute` | 880px | 1000px | | `/events` | unlimited | 1000px | | `/features` | 996px | 1000px | | `/presskit` | 800px | 1000px | | `/resources` | 800px | 1000px | PR Close #41051
2021-03-09 07:15:47 -05:00
<div class="feature">
<div class="feature-title">Angular CLI</div>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>
<div class="feature">
<div class="feature-title">IDEs</div>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div>
</div>
<hr>
</div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Full Development Story</div>
<img src="generated/images/marketing/features/feature-icon.svg" height="70px" alt="">
</div>
<div class="feature-row">
<div class="feature">
<div class="feature-title">Testing</div>
<p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save.</p>
</div>
2017-04-11 16:24:42 -04:00
refactor(docs-infra): use more consistent content width on marketing pages (#41051) Previously, each marketing page used a different limit for its content's width (if it had a limit at all) and implemented the width limiting in a different way. Besides resulting in an inconsistent UX, this also made it difficult to apply site-wide layout changes. This commit makes the limit for most marketing pages consistent and uses the same CSS class to make it easier to apply site-wide changes in the future. The chosen limit is slightly larger than that of docs pages (62.5em/1000px vs 50em/800px), because marketing pages have a different type of content and layout (i.e. images, multi-column layout, etc.). Finally, this commit also removes obsolete wrapper elements, CSS classes and CSS styles, that are no longer necessary after the changes. Notably, the homepage (`/`) and the "Contributors" page (`/about`) have remained unchanged, because the former has its own layout that is different from other marketing pages and the latter would offer a worse UX with a small content width limit (as the one used on other marketing pages). The content widths of the rest of the marketing pages change slightly as a result of the changes in this commit, but not in a way that would have a negative impact on UX. More specifically: | Page (URL) | Size before | Size after | |:--------------|------------:|-----------:| | `/contribute` | 880px | 1000px | | `/events` | unlimited | 1000px | | `/features` | 996px | 1000px | | `/presskit` | 800px | 1000px | | `/resources` | 800px | 1000px | PR Close #41051
2021-03-09 07:15:47 -05:00
<div class="feature">
<div class="feature-title">Animation</div>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>
2017-04-11 16:24:42 -04:00
refactor(docs-infra): use more consistent content width on marketing pages (#41051) Previously, each marketing page used a different limit for its content's width (if it had a limit at all) and implemented the width limiting in a different way. Besides resulting in an inconsistent UX, this also made it difficult to apply site-wide layout changes. This commit makes the limit for most marketing pages consistent and uses the same CSS class to make it easier to apply site-wide changes in the future. The chosen limit is slightly larger than that of docs pages (62.5em/1000px vs 50em/800px), because marketing pages have a different type of content and layout (i.e. images, multi-column layout, etc.). Finally, this commit also removes obsolete wrapper elements, CSS classes and CSS styles, that are no longer necessary after the changes. Notably, the homepage (`/`) and the "Contributors" page (`/about`) have remained unchanged, because the former has its own layout that is different from other marketing pages and the latter would offer a worse UX with a small content width limit (as the one used on other marketing pages). The content widths of the rest of the marketing pages change slightly as a result of the changes in this commit, but not in a way that would have a negative impact on UX. More specifically: | Page (URL) | Size before | Size after | |:--------------|------------:|-----------:| | `/contribute` | 880px | 1000px | | `/events` | unlimited | 1000px | | `/features` | 996px | 1000px | | `/presskit` | 800px | 1000px | | `/resources` | 800px | 1000px | PR Close #41051
2021-03-09 07:15:47 -05:00
<div class="feature">
<div class="feature-title">Accessibility</div>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div>
</div>
</div>
<div class="cta-bar announcement-bar">
<a class="button" href="start">Get Started</a>
</div>
2017-04-11 16:24:42 -04:00
</article>