From b3d8bea11c5695c5b3a0b995c7dcd8f4fbb2b2ab Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Wed, 4 Mar 2015 16:21:24 -0800 Subject: [PATCH 1/3] Copyedit of JS quick start --- public/docs/dart/latest/quickstart.jade | 10 +- public/docs/js/latest/quickstart.jade | 157 +++++++++++++----------- 2 files changed, 86 insertions(+), 81 deletions(-) diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 50b56e6f77..08a0633261 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -52,7 +52,6 @@ p. will be higher than alpha 6. That's fine. // PENDING: Update once 1.9 is on stable channel. - // TODO: Convert the above to a callout. // STEP 2 - Import Angular ########################## @@ -152,16 +151,11 @@ p. of its component controller. The template above binds to a name property through the double-mustache syntax ({{ ... }}). + p. The component controller assigns "Alice" to the name property. When the template renders, "Hello Alice" appears instead of "Hello {{ name }}". - - // [PENDING: Do we really want to use the term "component controller"? - // If so, set it up beforehand. - // In the original text, what does "the backing" mean, and is it - // important that we keep it?] - pre.prettyprint code. class AppComponent { @@ -264,4 +258,4 @@ p. to get the latest version of Angular 2. - // [PENDING: really?] Perhaps point to dartlang.org. + // [PENDING: Perhaps point to dartlang.org.] diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index d6927a1b72..6d472f8366 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -20,7 +20,7 @@ p. .l-main-section h2#section-add-es6-shim 2. Add the es6-shim - p. Within your project, clone the es6-shim repository: + p Within your project, clone the es6-shim repository: pre.prettyprint code git clone https://github.com/davideast/conscious.git es6-shim @@ -28,7 +28,7 @@ p. p. For the sake of this quickstart we recommend using the es6-shim GitHub repository. - This repository will provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. + This repository provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. .l-sub-section h3 ES6, AtScript, and the es6-shim @@ -36,19 +36,22 @@ p. h4 AtScript p. Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification - of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular. + of the JavaScript language. This quickstart features AtScript, but Angular + doesn't require you to write AtScript. h4 ES6 p. - AtScript compiles to ES6. ES6 is not widely supported in all browsers today. + AtScript compiles to ES6, which is not widely supported in all browsers today. The es6-shim repository allows you to use ES6 or AtScript in the browser. h4 es6-shim p. - The es6-shim package includes Angular and dependencies needed to compile - ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. - Think of the es6-shim repository as package rather than a project. + The es6-shim package includes Angular and dependencies + (such as Traceur) needed to compile + ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. + Think of the es6-shim repository as a package rather than a project. + // PENDING: "Think of ... as a package" could be clearer. // STEP 2 - Import Angular ########################## @@ -56,20 +59,24 @@ p. h2#section-transpile 2. Import Angular p. - Create two files for this quickstart, an index.html and a - app.es6. Both of these files will be at the root of the project. - The .es6 extension signifies that the file uses ES6 syntax. + Create two files, index.html and + app.es6, both at the root of the project: - pre.prettyprint.linenums - code touch index.html - | touch app.es6 + pre.prettyprint + code. + touch index.html + touch app.es6 - p Inside of app.es6, use the ES6 module syntax you can import the required modules from Angular. + .alert.is-helpful The .es6 extension signifies that the file uses ES6 syntax. + + p Inside of app.es6, import the required modules from Angular: pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; - p The above import statement will import three modules from Angular. These modules load at runtime. + p. + The above import statement uses ES6 module syntax to import three modules from Angular. + These modules load at runtime. // STEP 3 - Create a component ########################## @@ -78,24 +85,23 @@ p. h2#section-angular-create-account 3. Define a component p. - Components structure and represent the UI. This quickstart demonstrates the process of creating a component. - The component will have an HTML tag named app, - <my-app></my-app>. + Components structure and represent the UI. This quickstart demonstrates the process of creating a component + that has an HTML tag named <my-app>. p. - A component consists of two parts; the annotation section + A component consists of two parts, the annotation section and the component controller. pre.prettyprint.linenums code. - // Annotation Section + // Annotation section @Component({ selector: 'my-app' }) @Template({ inline: '<h1>Hello {{ name }}</h1>' }) - // Component Controller + // Component controller class MyAppComponent { constructor() { this.name = 'Alice'; @@ -103,20 +109,20 @@ p. } .l-sub-section - h3 Component Annotations + h3 Component annotations p. A component annotation provides metadata about the component. - An annotation can always identified by its at-sign (@). + An annotation can be identified by its at-sign (@). p. - The @Component annotation defines the HTML tag for the component. - The selector property is a CSS selector which specifies the HTML tag for the component. - + The @Component annotation defines + the HTML tag for the component by specifying the component's CSS selector. p. - The @Template annotation defines the template to apply to the component. - This component uses an inline template, but external templates are - available as well. To use an external template specify a url property - and give it the path to the html file. + The @Template annotation defines the HTML that + represents the component. This component uses an inline template, + but you can also have an external template. To use an external template, + specify a url property + and give it the path to the HTML file. pre.prettyprint.linenums code. @@ -128,11 +134,11 @@ p. }) p. - The component created above has a HTML tag of <my-app></my-app> - and a template of <h1>Hello {{ name }}</h1>. + The annotations above specify an HTML tag of <my-app> + and a template of <h1>Hello {{ name }}</h1>. .l-sub-section - h3 Component Controller + h3 The template and the component controller p. The component controller is the backing of the component's template. A component @@ -151,9 +157,11 @@ p. or functions placed on the component controller. p. - The template above binds to a name property through the {{ }} - syntax.The body of the constructor assigns "Alice" to the name property. When the - template renders, Alice will appear instead of {{ name }}. + The template above binds to a name property through + the double-mustache syntax ({{ ... }}). + The body of the constructor assigns "Alice" to the name property. When the + template renders, "Hello Alice" appears instead of + "Hello {{ name }}". @@ -161,17 +169,18 @@ p. .l-main-section h2#section-transpile 4. Bootstrap - p The last step to load the component on the page. At the bottom of app.es6 call the bootstrap() function. + p. + At the bottom of app.es6, call the bootstrap() function + to load your new component into its page: pre.prettyprint.linenums code bootstrap(MyAppComponent); p. - Angular provides a bootstrap function that renders a - component to the page. The bootstrap function takes a - component as a parameter. Any child components inside of the parent - component will render as well. + The bootstrap() function takes a + component as a parameter, enabling the component + (as well as any child components it contains) to render. // STEP 5 - Declare the HTML ########################## @@ -180,8 +189,9 @@ p. h2#section-angular-create-account 5. Declare the HTML p. - Inside of the index.html, include the es6-shim.js file in the head tag. - Now, declare the app component the body. The es6-shim must load before any application code. + Inside the head tag of index.html, include the es6-shim.js file. + (The es6-shim code must load before any application code.) + Then instantiate the my-app component in the body. pre.prettyprint.linenums code. @@ -202,53 +212,54 @@ p. // STEP 6 - Declare the HTML ########################## .l-main-section - h2#section-load-component-module 5. Load the component + h2#section-load-component-module 6. Load the component p. - The last step is to load the module for the my-app component. - The es6-shim file comes packaged with the System library. We'll - use System to load the component we created above. + The last step is to load the module for the my-app component. + To do this, we'll use the System library, + which is included in es6-shim. .l-sub-section h3 System.js p. - System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System - provides module loading functionality to these browsers. + System is a third-party open-source library that + adds ES6 module loading functionality to browsers. p. - To load the needed modules, System needs to know where to - load the files from. The paths property in System specifies - the location of the files. + Add the following module-loading code to index.html: - p Tell System about three paths: - ol - li Angular: The Angular framework. - li Runtime assertions: Optional assertions for runtime type checking. - li The my-app component created above: The component to display on the page. + pre.prettyprint.linenums + code. + <my-app></my-app> - pre.prettyprint.linenums - code. - <my-app></my-app> + <script> + // Rewrite the paths to load the files + System.paths = { + 'angular2/*':'/es6-shim/angular2/*.js', // Angular + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions + 'app': 'app.es6' // The my-app component + }; - <script> - // Rewrite the paths to load the files - System.paths = { - 'angular2/*':'/es6-shim/angular2/*.js', // Angular - 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions - 'app': 'app.es6' // The my-app component - }; + // Kick off the application + System.import('app'); + </script> - // Kick off the application - System.import('app'); - </script> + p. + The System.paths property above specifies + the paths to the following modules: + ul + li The Angular framework + li Optional assertions for runtime type checking + li The component to display on the page -// STEP 6 - Declare the HTML ########################## + +// STEP 6 - Run a local server ########################## .l-main-section - h2#section-load-component-module 5. Run a local server - + h2#section-load-component-module 6. Run a local server + // PENDING: add directions (or at least hints) here // WHAT'S NEXT... ########################## .l-main-section From 9cc3d7141a3bc2658281ab04e288d814e0cc6b0e Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Wed, 4 Mar 2015 16:31:09 -0800 Subject: [PATCH 2/3] Revert "Copyedit of JS quick start" This reverts commit d56ede4e53fe99d0f867e4f7f9480b9ea2de38ce. --- public/docs/dart/latest/quickstart.jade | 10 +- public/docs/js/latest/quickstart.jade | 157 +++++++++++------------- 2 files changed, 81 insertions(+), 86 deletions(-) diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 08a0633261..50b56e6f77 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -52,6 +52,7 @@ p. will be higher than alpha 6. That's fine. // PENDING: Update once 1.9 is on stable channel. + // TODO: Convert the above to a callout. // STEP 2 - Import Angular ########################## @@ -151,11 +152,16 @@ p. of its component controller. The template above binds to a name property through the double-mustache syntax ({{ ... }}). - p. The component controller assigns "Alice" to the name property. When the template renders, "Hello Alice" appears instead of "Hello {{ name }}". + + // [PENDING: Do we really want to use the term "component controller"? + // If so, set it up beforehand. + // In the original text, what does "the backing" mean, and is it + // important that we keep it?] + pre.prettyprint code. class AppComponent { @@ -258,4 +264,4 @@ p. to get the latest version of Angular 2. - // [PENDING: Perhaps point to dartlang.org.] + // [PENDING: really?] Perhaps point to dartlang.org. diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 6d472f8366..d6927a1b72 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -20,7 +20,7 @@ p. .l-main-section h2#section-add-es6-shim 2. Add the es6-shim - p Within your project, clone the es6-shim repository: + p. Within your project, clone the es6-shim repository: pre.prettyprint code git clone https://github.com/davideast/conscious.git es6-shim @@ -28,7 +28,7 @@ p. p. For the sake of this quickstart we recommend using the es6-shim GitHub repository. - This repository provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. + This repository will provides a faster start than building from npm. The es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. .l-sub-section h3 ES6, AtScript, and the es6-shim @@ -36,22 +36,19 @@ p. h4 AtScript p. Angular is built with AtScript. AtScript is an extension of ES6 (ECMAScript 6), the new specification - of the JavaScript language. This quickstart features AtScript, but Angular - doesn't require you to write AtScript. + of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular. h4 ES6 p. - AtScript compiles to ES6, which is not widely supported in all browsers today. + AtScript compiles to ES6. ES6 is not widely supported in all browsers today. The es6-shim repository allows you to use ES6 or AtScript in the browser. h4 es6-shim p. - The es6-shim package includes Angular and dependencies - (such as Traceur) needed to compile - ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. - Think of the es6-shim repository as a package rather than a project. + The es6-shim package includes Angular and dependencies needed to compile + ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. + Think of the es6-shim repository as package rather than a project. - // PENDING: "Think of ... as a package" could be clearer. // STEP 2 - Import Angular ########################## @@ -59,24 +56,20 @@ p. h2#section-transpile 2. Import Angular p. - Create two files, index.html and - app.es6, both at the root of the project: + Create two files for this quickstart, an index.html and a + app.es6. Both of these files will be at the root of the project. + The .es6 extension signifies that the file uses ES6 syntax. - pre.prettyprint - code. - touch index.html - touch app.es6 + pre.prettyprint.linenums + code touch index.html + | touch app.es6 - .alert.is-helpful The .es6 extension signifies that the file uses ES6 syntax. - - p Inside of app.es6, import the required modules from Angular: + p Inside of app.es6, use the ES6 module syntax you can import the required modules from Angular. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; - p. - The above import statement uses ES6 module syntax to import three modules from Angular. - These modules load at runtime. + p The above import statement will import three modules from Angular. These modules load at runtime. // STEP 3 - Create a component ########################## @@ -85,23 +78,24 @@ p. h2#section-angular-create-account 3. Define a component p. - Components structure and represent the UI. This quickstart demonstrates the process of creating a component - that has an HTML tag named <my-app>. + Components structure and represent the UI. This quickstart demonstrates the process of creating a component. + The component will have an HTML tag named app, + <my-app></my-app>. p. - A component consists of two parts, the annotation section + A component consists of two parts; the annotation section and the component controller. pre.prettyprint.linenums code. - // Annotation section + // Annotation Section @Component({ selector: 'my-app' }) @Template({ inline: '<h1>Hello {{ name }}</h1>' }) - // Component controller + // Component Controller class MyAppComponent { constructor() { this.name = 'Alice'; @@ -109,20 +103,20 @@ p. } .l-sub-section - h3 Component annotations + h3 Component Annotations p. A component annotation provides metadata about the component. - An annotation can be identified by its at-sign (@). + An annotation can always identified by its at-sign (@). p. - The @Component annotation defines - the HTML tag for the component by specifying the component's CSS selector. + The @Component annotation defines the HTML tag for the component. + The selector property is a CSS selector which specifies the HTML tag for the component. + p. - The @Template annotation defines the HTML that - represents the component. This component uses an inline template, - but you can also have an external template. To use an external template, - specify a url property - and give it the path to the HTML file. + The @Template annotation defines the template to apply to the component. + This component uses an inline template, but external templates are + available as well. To use an external template specify a url property + and give it the path to the html file. pre.prettyprint.linenums code. @@ -134,11 +128,11 @@ p. }) p. - The annotations above specify an HTML tag of <my-app> - and a template of <h1>Hello {{ name }}</h1>. + The component created above has a HTML tag of <my-app></my-app> + and a template of <h1>Hello {{ name }}</h1>. .l-sub-section - h3 The template and the component controller + h3 Component Controller p. The component controller is the backing of the component's template. A component @@ -157,11 +151,9 @@ p. or functions placed on the component controller. p. - The template above binds to a name property through - the double-mustache syntax ({{ ... }}). - The body of the constructor assigns "Alice" to the name property. When the - template renders, "Hello Alice" appears instead of - "Hello {{ name }}". + The template above binds to a name property through the {{ }} + syntax.The body of the constructor assigns "Alice" to the name property. When the + template renders, Alice will appear instead of {{ name }}. @@ -169,18 +161,17 @@ p. .l-main-section h2#section-transpile 4. Bootstrap - p. - At the bottom of app.es6, call the bootstrap() function - to load your new component into its page: + p The last step to load the component on the page. At the bottom of app.es6 call the bootstrap() function. pre.prettyprint.linenums code bootstrap(MyAppComponent); p. - The bootstrap() function takes a - component as a parameter, enabling the component - (as well as any child components it contains) to render. + Angular provides a bootstrap function that renders a + component to the page. The bootstrap function takes a + component as a parameter. Any child components inside of the parent + component will render as well. // STEP 5 - Declare the HTML ########################## @@ -189,9 +180,8 @@ p. h2#section-angular-create-account 5. Declare the HTML p. - Inside the head tag of index.html, include the es6-shim.js file. - (The es6-shim code must load before any application code.) - Then instantiate the my-app component in the body. + Inside of the index.html, include the es6-shim.js file in the head tag. + Now, declare the app component the body. The es6-shim must load before any application code. pre.prettyprint.linenums code. @@ -212,54 +202,53 @@ p. // STEP 6 - Declare the HTML ########################## .l-main-section - h2#section-load-component-module 6. Load the component + h2#section-load-component-module 5. Load the component p. - The last step is to load the module for the my-app component. - To do this, we'll use the System library, - which is included in es6-shim. + The last step is to load the module for the my-app component. + The es6-shim file comes packaged with the System library. We'll + use System to load the component we created above. .l-sub-section h3 System.js p. - System is a third-party open-source library that - adds ES6 module loading functionality to browsers. + System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System + provides module loading functionality to these browsers. p. - Add the following module-loading code to index.html: + To load the needed modules, System needs to know where to + load the files from. The paths property in System specifies + the location of the files. - pre.prettyprint.linenums - code. - <my-app></my-app> + p Tell System about three paths: + ol + li Angular: The Angular framework. + li Runtime assertions: Optional assertions for runtime type checking. + li The my-app component created above: The component to display on the page. - <script> - // Rewrite the paths to load the files - System.paths = { - 'angular2/*':'/es6-shim/angular2/*.js', // Angular - 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions - 'app': 'app.es6' // The my-app component - }; + pre.prettyprint.linenums + code. + <my-app></my-app> - // Kick off the application - System.import('app'); - </script> + <script> + // Rewrite the paths to load the files + System.paths = { + 'angular2/*':'/es6-shim/angular2/*.js', // Angular + 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions + 'app': 'app.es6' // The my-app component + }; - p. - The System.paths property above specifies - the paths to the following modules: - ul - li The Angular framework - li Optional assertions for runtime type checking - li The component to display on the page + // Kick off the application + System.import('app'); + </script> - -// STEP 6 - Run a local server ########################## +// STEP 6 - Declare the HTML ########################## .l-main-section - h2#section-load-component-module 6. Run a local server + h2#section-load-component-module 5. Run a local server + - // PENDING: add directions (or at least hints) here // WHAT'S NEXT... ########################## .l-main-section From 0ed816b2bc17304281e8fbaf88b134653652105d Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Wed, 4 Mar 2015 17:20:40 -0800 Subject: [PATCH 3/3] copyedit of Features page --- public/features.jade | 73 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 62 insertions(+), 11 deletions(-) diff --git a/public/features.jade b/public/features.jade index f4f8dd234f..5ebdde851d 100644 --- a/public/features.jade +++ b/public/features.jade @@ -5,7 +5,12 @@ .sticker .c7 h3.text-headline.text-uppercase Mobile First - p.text-body Modular library design and mobile-specific routing keep things lean so users on low-bandwidth networks don't need to wait. First-class support for touch event gestures. Responsive, cross-device, material design UI components. Tuned for performance and low-memory usage on mobile platforms. + p.text-body. + Angular's modular library design and mobile-specific routing help keep + your app's code lean, so users on low-bandwidth networks don't need to wait. + Other mobile-first features include first-class support for touch event gestures, + tuning for performance and low-memory usage on mobile platforms, and + material design UI components with responsive, cross-device support. @@ -14,7 +19,11 @@ .sticker .c7 h3.text-headline.text-uppercase Future Ready - p.text-body Angular 2 is written in written in ECMAScript 6, with the addition of types and annotations. ES6 allows us to benefit from the best of JavaScript, while writing clean and easy-to-read code. + p.text-body. + Angular 2 is written in written in ECMAScript 6 (ES6), + with the addition of types and annotations. + ES6 allows Angular to benefit from the best of JavaScript, + while maintaining clean and easy-to-read code. @@ -23,7 +32,11 @@ .sticker .c7 h3.text-headline.text-uppercase Flexible Development - p.text-body In addition to full support for ES6 and TypeScript, Angular 2 works equally well with today's ES5, Dart, CoffeeScript, and other languages that compile to JavaScript. The choice of language is up to you. + p.text-body. + The choice of language is up to you. + In addition to providing full support for ES6 and TypeScript, + Angular 2 works equally well with today's ES5, Dart, CoffeeScript, + and other languages that compile to JavaScript. @@ -32,7 +45,13 @@ .sticker .c7 h3.text-headline.text-uppercase Speed & Performance - p.text-body Change detection is now 5x faster thanks to internal change detection tuned for top performance in modern JavaScript engines. If your application uses data structures that imply change guarantees (like immutables and observables), Angular 2 will make use of them to help speed up your application. + p.text-body. + Change detection is now 5x faster, + thanks to internal change detection + that's been tuned for top performance in modern JavaScript engines. + If you use data structures that imply change guarantees + (like immutables and observables), Angular 2 can use those guarantees + to speed up your application. @@ -41,7 +60,10 @@ .sticker .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. + 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. @@ -50,7 +72,14 @@ .sticker .c7 h3.text-headline.text-uppercase Comprehensive Routing - p.text-body Design sophisticated views: map URL paths to application components, use advanced features like nested and sibling routes. Support for card stack navigation, animated transitions, and lazy loading for mobile users. Easy migration from routing in prior versions of Angular. + 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. @@ -59,7 +88,13 @@ .sticker .c7 h3.text-headline.text-uppercase Animations - p.text-body Directly tap into to low-level animation support on mobile and desktop environments with easy-to-use Angular events. Make use of 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. + p.text-body. + 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. @@ -68,7 +103,11 @@ .sticker .c7 h3.text-headline.text-uppercase Hierarchical 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 aids you when writing tests, by making it easy to inject test doubles. + 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. @@ -77,7 +116,13 @@ .sticker .c7 h3.text-headline.text-uppercase Support for Web Components - p.text-body Angular 2 plays nicely with web components built using other libraries (Polymer, X-Tag and others), allowing you to pass data into them as easily as if they were written in Angular. Angular components use web standards (e.g. shadow DOM and the HTML5 template tag) in browsers that support them. + p.text-body. + Angular 2 plays nicely with web components built using other libraries + (Polymer, X-Tag, and others), allowing you to pass data into them + as easily as if they were written in Angular. + Angular components use web standards + (such as shadow DOM and the HTML5 template tag) + in browsers that support them. @@ -86,8 +131,14 @@ .sticker .c7 h3.text-headline.text-uppercase Internationalization (I18N) & Accessibility - p.text-body(ng-non-bindable) Reach all your users. Use familiar ICU message format in Angular interpolation syntax ({{ }}), including pluralization and gender rules. Automate message extraction, pseudolocalization, and translation updates. Generate static applications for each locale. Easily promote accessibility via screen readers and assistive devices by automatically generating appropriate ARIA attributes. + p.text-body(ng-non-bindable). + Reach all your users. + Use the familiar ICU message format in Angular interpolation syntax + ({{ }}), 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. -!= partial("/_includes/_cta-bar") \ No newline at end of file +!= partial("/_includes/_cta-bar")