From 249cd8c2ec4df65e06f1586bcc3bd134f64c6552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Rodr=C3=ADguez?= Date: Mon, 24 Apr 2017 20:23:45 +0200 Subject: [PATCH] docs(aio): remove _blank target (#16205) --- aio/content/guide/aot-compiler.md | 7 ++-- aio/content/guide/architecture.md | 6 +-- aio/content/guide/browser-support.md | 24 ++++++------ aio/content/guide/cb-index.md | 43 +++++++++++++++++++++ aio/content/guide/change-log.md | 6 +-- aio/content/guide/deployment.md | 16 ++++---- aio/content/guide/http.md | 16 ++++---- aio/content/guide/i18n.md | 22 +++++------ aio/content/guide/ngmodule.md | 8 ++-- aio/content/guide/npm-packages.md | 6 +-- aio/content/guide/quickstart.md | 2 +- aio/content/guide/reactive-forms.md | 6 +-- aio/content/guide/router.md | 12 +++--- aio/content/guide/security.md | 10 ++--- aio/content/guide/setup-systemjs-anatomy.md | 10 ++--- aio/content/guide/structural-directives.md | 4 +- aio/content/guide/styleguide.md | 8 ++-- aio/content/guide/template-syntax.md | 2 +- aio/content/guide/testing.md | 12 +++--- aio/content/guide/ts-to-js.md | 4 +- aio/content/guide/upgrade.md | 4 +- aio/content/guide/visual-studio-2015.md | 4 +- aio/content/guide/webpack.md | 2 +- 23 files changed, 139 insertions(+), 95 deletions(-) create mode 100644 aio/content/guide/cb-index.md diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index 3299f207d3..996658dec3 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -43,7 +43,7 @@ the components and templates must be converted to executable JavaScript by the _
- Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. + Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016.
@@ -582,7 +582,7 @@ Now AOT-compile the app and launch it with the `lite-server`: It's fascinating to see what the generated JavaScript bundle looks like after Rollup. The code is minified, so you won't learn much from inspecting the bundle directly. -But the source-map-explorer +But the source-map-explorer tool can be quite revealing. Install it: @@ -601,7 +601,8 @@ The `source-map-explorer` analyzes the source map generated with the bundle and showing exactly which application and Angular modules and classes are included in the bundle. Here's the map for _Tour of Heroes_. - + +
toh-pt6-bundle
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index d840bd34ce..2f8c5613c1 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -91,7 +91,7 @@ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work. - + Learn more about decorators on the web. @@ -169,7 +169,7 @@ Other JavaScript modules use *import statements* to access public objects from o -Learn more about the JavaScript module system on the web. +Learn more about the JavaScript module system on the web. @@ -759,4 +759,4 @@ by implementing the lifecycle hook interfaces. > [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework -using the _Angular Testing Platform_. \ No newline at end of file +using the _Angular Testing Platform_. diff --git a/aio/content/guide/browser-support.md b/aio/content/guide/browser-support.md index 30c1a626fb..909e5f662f 100644 --- a/aio/content/guide/browser-support.md +++ b/aio/content/guide/browser-support.md @@ -202,8 +202,8 @@ Angular supports most recent browsers. This includes the following specific vers Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, -using SauceLabs and -Browserstack. +using SauceLabs and +Browserstack. @@ -353,7 +353,7 @@ Here are the features which may require additional polyfills: - Date , currency , decimal and percent pipes + Date , currency , decimal and percent pipes @@ -371,7 +371,7 @@ Here are the features which may require additional polyfills: - NgClass on SVG elements + NgClass on SVG elements @@ -433,7 +433,7 @@ Below are the polyfills which are used to test the framework itself. They are a - ES6 + ES6 @@ -449,7 +449,7 @@ Below are the polyfills which are used to test the framework itself. They are a - classList + classList @@ -465,7 +465,7 @@ Below are the polyfills which are used to test the framework itself. They are a - Intl + Intl @@ -481,7 +481,7 @@ Below are the polyfills which are used to test the framework itself. They are a - Web Animations + Web Animations @@ -497,7 +497,7 @@ Below are the polyfills which are used to test the framework itself. They are a - Typed Array + Typed Array @@ -513,7 +513,7 @@ Below are the polyfills which are used to test the framework itself. They are a - Blob + Blob @@ -529,7 +529,7 @@ Below are the polyfills which are used to test the framework itself. They are a - FormData + FormData @@ -547,4 +547,4 @@ Below are the polyfills which are used to test the framework itself. They are a \* Figures are for minified and gzipped code, -computed with the closure compiler. \ No newline at end of file +computed with the closure compiler. diff --git a/aio/content/guide/cb-index.md b/aio/content/guide/cb-index.md new file mode 100644 index 0000000000..c3ab1a67eb --- /dev/null +++ b/aio/content/guide/cb-index.md @@ -0,0 +1,43 @@ +@title +Cookbook + +@intro +A collection of recipes for common Angular application scenarios. + +@description + + +The *Cookbook* offers answers to common implementation questions. + +Each cookbook page is a collection of recipes focused on a particular Angular feature or application challenge +such as data binding, cross-component interaction, and communicating with a remote server via HTTP. + + +
+ + + +The cookbook is just getting started. Many more recipes are on the way. + + +
+ + + +Each cookbook links to a live sample with every recipe included. + +Recipes are deliberately brief and code-centric. +Each recipe links to a relevant page of the [Developer Guide](guide) or the +[API Reference](api) where you can learn more about +the purpose, context, and design choices behind the code snippets. + +## Feedback + +Post *documentation* requests and comments as + +issues on the angular.io github repository. +Fixes (small ones) are greatly appreciated as + +pull requests. + +Post issues with *Angular itself* to the [angular](https://github.com/angular/angular) github repository. diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md index 9c4c20a852..843f7b3228 100644 --- a/aio/content/guide/change-log.md +++ b/aio/content/guide/change-log.md @@ -39,7 +39,7 @@ It helps clearly separate app code from setup and configuration files. All samples now have a `src/` folder at the project root. The former `app/` folder moves under `src/`. Read about moving your existing project to this structure in - + the QuickStart repo update instructions. Notably: @@ -154,7 +154,7 @@ re-explains `[(ngModel)]` in terms of the basic `[()]` syntax. This change supports ES6 developers and aligns better with typical Angular libraries. It does not affect the module's API but it does affect how you load and import it. -See the change note +See the change note in the `in-memory-web-api` repo. ## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19) @@ -201,7 +201,7 @@ This library is also useful to you during early development before you have a se The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm. The new "angular-in-memory-web-api" has new features. -Read about them on github. +Read about them on github. ## "Style Guide" with _NgModules_ (2016-09-27) diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md index 1a15e3289c..d1e1b96cab 100644 --- a/aio/content/guide/deployment.md +++ b/aio/content/guide/deployment.md @@ -154,7 +154,7 @@ Notice the `paths` key: In the standard SystemJS config, the `npm` path points to the `node_modules/`. In this server config, it points to -https://unpkg.com, +https://unpkg.com, a site that hosts _npm packages_, and loads them from the web directly. There are other service providers that do the same thing. @@ -290,13 +290,13 @@ and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglifi ### Webpack (and AOT) -Webpack 2 is another +Webpack 2 is another great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application. The "[Webpack: an introduction](guide/webpack "Webpack: an introduction")" guide will get you started using webpack with Angular. Consider configuring _Webpack_ with the official - + Angular Ahead-of-Time Webpack Plugin. This plugin transpiles the TypeScript application code, bundles lazy loaded `NgModules` separately, @@ -315,10 +315,10 @@ _Tree shaking_ is a _dead code elimination_ technique that removes entire export If a library exports something that the application doesn't import, a tree shaking tool removes it from the code base. Tree shaking was popularized by -Rollup, a popular tool with an ecosystem of +Rollup, a popular tool with an ecosystem of plugins for bundling, minification, and uglification. Learn more about tree shaking and dead code elmination in - + this post by rollup-creator, Rich Harris. @@ -349,7 +349,7 @@ You can waste a lot of time and money optimizing something that has no tangible You should measure the app's actual behavior when running in the environments that are important to you. The - + Chrome DevTools Network Performance page is a good place to start learning about measuring performance. The [WebPageTest](https://www.webpagetest.org/) tool is another good choice @@ -611,7 +611,7 @@ and to ### Requesting services from a different server (CORS) Angular developers may encounter a - + cross-origin resource sharing error when making a service request (typically a data service request). to a server other than the application's own host server. Browsers forbid such requests unless the server permits them explicitly. @@ -619,7 +619,7 @@ Browsers forbid such requests unless the server permits them explicitly. There isn't anything the client application can do about these errors. The server must be configured to accept the application's requests. Read about how to enable CORS for specific servers at -enable-cors.org. +enable-cors.org. {@a next-steps} diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md index 49247f9eb7..c9751b1e6f 100644 --- a/aio/content/guide/http.md +++ b/aio/content/guide/http.md @@ -318,7 +318,7 @@ Alternatively, you can temporarily target a JSON file by changing the endpoint U {@a rxjs} If you are familiar with asynchronous methods in modern JavaScript, you might expect the `get` method to return a -promise. +promise. You'd expect to chain a call to `then()` and extract the heroes. Instead you're calling a `map()` method. Clearly this is not a promise. @@ -332,9 +332,9 @@ and `map()` is one of the RxJS *operators*. ## RxJS library -RxJS +RxJS is a third party library, endorsed by Angular, that implements the -asynchronous Observable pattern. +asynchronous Observable pattern. All of the Developer Guide samples have installed the RxJS npm package because Observables are used widely in Angular applications. @@ -962,13 +962,13 @@ processes that stream _before_ calling the service. -* debounceTime +* debounceTime waits for the user to stop typing for at least 300 milliseconds. -* distinctUntilChanged +* distinctUntilChanged ensures that the service is called only when the new search term is different from the previous search term. -* The switchMap +* The switchMap calls the `WikipediaService` with a fresh, debounced search term and coordinates the stream(s) of service response. The role of `switchMap` is particularly important. @@ -1104,11 +1104,11 @@ it substitutes the Angular _in-memory web api_ simulator for the actual XHR back The in-memory web api is not part of Angular _proper_. It's an optional service in its own -angular-in-memory-web-api +angular-in-memory-web-api library installed with npm (see `package.json`). See the -README file +README file for configuration options, default behaviors, and limitations. diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index 615fc15ea5..570d67ea2c 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -275,11 +275,11 @@ and write something like: `other {a wolf pack}`. This syntax conforms to the -ICU Message Format +ICU Message Format that derives from the -Common Locale Data Repository (CLDR), +Common Locale Data Repository (CLDR), which specifies the -pluralization rules. +pluralization rules. @@ -295,7 +295,7 @@ These text alternatives require translation too. You can handle this with a `select` translation. A `select` also follows the -ICU message syntax. +ICU message syntax. You choose among alternative translation based on a string value instead of a number. The following format message in the component template binds to the component's `gender` @@ -351,7 +351,7 @@ Windows users may have to quote the command like this: `"./node_modules/.bin/ng- By default, the tool generates a translation file named **`messages.xlf`** in the -XML Localisation Interchange File Format (XLIFF, version 1.2). +XML Localisation Interchange File Format (XLIFF, version 1.2). {@a other-formats} @@ -360,7 +360,7 @@ By default, the tool generates a translation file named **`messages.xlf`** in th ### Other translation formats You can generate a file named **`messages.xmb`** in the -XML Message Bundle (XMB) format +XML Message Bundle (XMB) format by adding the `--i18nFormat=xmb` flag. @@ -452,7 +452,7 @@ such as internationalization files, there. Localization and internationalization are -different but closely related terms. +different but closely related terms. @@ -460,7 +460,7 @@ Localization and internationalization are This cookbook follows that suggestion. It has a `locale` folder under the `src/`. Assets within the folder carry a filename extension that matches a language-culture code from a -well-known codeset. +well-known codeset. Make a copy of the `messages.xlf` file, put it in the `locale` folder and rename it `messages.es.xlf`for the Spanish language translation. @@ -472,7 +472,7 @@ Do the same for each target language. ### Translate text nodes In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations using one of the -many XLIFF file editors. +many XLIFF file editors. This sample file is easy to translate without a special editor or knowledge of Spanish. Open `messages.es.xlf` and find the first `` section: @@ -652,7 +652,7 @@ You provide the Angular compiler with three new pieces of information: * The translation file. * The translation file format. - * The _Locale ID_ + * The _Locale ID_ (`es` or `en-US` for instance). _How_ you provide this information depends upon whether you compile with @@ -852,4 +852,4 @@ they don't tell you what the new `id`s should be. **Commit all translation message files to source control**, especially the English source `messages.xlf`. The difference between the old and the new `messages.xlf` file - help you find and update `id` changes across your translation files. \ No newline at end of file + help you find and update `id` changes across your translation files. diff --git a/aio/content/guide/ngmodule.md b/aio/content/guide/ngmodule.md index a0dd3a137d..2a140d2c41 100644 --- a/aio/content/guide/ngmodule.md +++ b/aio/content/guide/ngmodule.md @@ -87,9 +87,9 @@ Modules are a great way to organize an application and extend it with capabiliti Many Angular libraries are modules (such as `FormsModule`, `HttpModule`, and `RouterModule`). Many third-party libraries are available as NgModules (such as -Material Design, -Ionic, -AngularFire2). +Material Design, +Ionic, +AngularFire2). NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a @@ -1555,4 +1555,4 @@ You made it! You can examine and download the complete source for this final ver Now that you understand NgModules, you may be interested in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page -with its ready answers to specific design and implementation questions. \ No newline at end of file +with its ready answers to specific design and implementation questions. diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md index 5597e0367c..7279e273c5 100644 --- a/aio/content/guide/npm-packages.md +++ b/aio/content/guide/npm-packages.md @@ -8,7 +8,7 @@ Recommended npm packages, and how to specify package dependencies. Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. -These packages are maintained and installed with the Node Package Manager (npm). +These packages are maintained and installed with the Node Package Manager (npm).
@@ -16,7 +16,7 @@ These packages are maintained and installed with the Node Package Manager ( + Get them now if they're not already installed on your machine. **Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher** @@ -32,7 +32,7 @@ you already have projects running on your machine that use other versions of nod -During [Setup](guide/setup), a package.json +During [Setup](guide/setup), a package.json file is installed with a comprehensive starter set of packages as specified in the `dependencies` and `devDependencies` sections. diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md index fdd3f18221..3350ea057e 100644 --- a/aio/content/guide/quickstart.md +++ b/aio/content/guide/quickstart.md @@ -61,7 +61,7 @@ In the example, change the component class's `name` property from `'Angular'` to

- This example is written in TypeScript, a superset of JavaScript. Angular + This example is written in TypeScript, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how.

diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index d0e2bd1659..f9d6eec5a4 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -266,7 +266,7 @@ you need `[formControl]="name"` in the template on the ``. Disregard the `form-control` _CSS_ class. It belongs to the -Bootstrap CSS library, +Bootstrap CSS library, not Angular. It _styles_ the form but in no way impacts the logic of the form. @@ -421,7 +421,7 @@ to look for a `FormControl` called `name`. Disregard the `form-group` _CSS_ class. It belongs to the -Bootstrap CSS library, +Bootstrap CSS library, not Angular. Like the `form-control` class, it _styles_ the form but in no way impacts its logic. @@ -1479,4 +1479,4 @@ The key files of the final version are as follows: You can download the complete source for all steps in this guide -from the Reactive Forms Demo live example. \ No newline at end of file +from the Reactive Forms Demo live example. diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 3df9936e07..15fba11de6 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -620,7 +620,7 @@ Begin with a simple version of the app that navigates between two empty views. ### Set the *<base href>* The router uses the browser's -history.pushState +history.pushState for navigation. Thanks to `pushState`, you can make in-app URL paths look the way you want them to look, e.g. `localhost:3000/crisis-center`. The in-app URLs can be indistinguishable from server URLs. @@ -643,7 +643,7 @@ older hash (#) style, if necessary. You must **add a -<base href> element** +<base href> element** to the app's `index.html` for `pushState` routing to work. The browser uses the `` value to prefix *relative* URLs when referencing CSS files, scripts, and images. @@ -2370,7 +2370,7 @@ and decide later if the differences are worthwhile. In keeping with the -*Separation of Concerns* principle, +*Separation of Concerns* principle, changes to the *Crisis Center* won't affect the `AppModule` or any other feature's component. @@ -4084,7 +4084,7 @@ This is a strictly local URL. The browser shouldn't send this URL to the server and should not reload the page. Modern HTML5 browsers support -history.pushState, +history.pushState, a technique that changes a browser's location and history without triggering a server page request. The router can compose a "natural" URL that is indistinguishable from one that would otherwise require a page load. @@ -4159,11 +4159,11 @@ resort to hash routes. ### HTML5 URLs and the *<base href>* While the router uses the -HTML5 pushState +HTML5 pushState style by default, you *must* configure that strategy with a **base href**. The preferred way to configure the strategy is to add a -<base href> element +<base href> element tag in the `` of the `index.html`. diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index 82c06012c7..632bb9baad 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -334,13 +334,13 @@ Or you can implement and provide an entirely custom `XSRFStrategy`: For information about CSRF at the Open Web Application Security Project (OWASP), see -Cross-Site Request Forgery (CSRF) and -Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet. +Cross-Site Request Forgery (CSRF) and +Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet. The Stanford University paper -Robust Defenses for Cross-Site Request Forgery is a rich source of detail. +Robust Defenses for Cross-Site Request Forgery is a rich source of detail. See also Dave Smith's easy-to-understand -talk on XSRF at AngularConnect 2016. +talk on XSRF at AngularConnect 2016.

@@ -374,4 +374,4 @@ post](https://security.googleblog.com/2011/05/website-security-for-webmasters.ht Angular applications must follow the same security principles as regular web applications, and must be audited as such. Angular-specific APIs that should be audited in a security review, such as the [_bypassSecurityTrust_](guide/security#bypass-security-apis) methods, are marked in the documentation -as security sensitive. \ No newline at end of file +as security sensitive. diff --git a/aio/content/guide/setup-systemjs-anatomy.md b/aio/content/guide/setup-systemjs-anatomy.md index 0ad5ea13f2..41d77e945b 100644 --- a/aio/content/guide/setup-systemjs-anatomy.md +++ b/aio/content/guide/setup-systemjs-anatomy.md @@ -79,7 +79,7 @@ If you do, this page can help you understand their purpose. _End-to-end_ (e2e) tests of the application, written in Jasmine and run by the - protractor + protractor e2e test runner. Initialized with an e2e test for the "Hello Angular" sample. @@ -176,7 +176,7 @@ If you do, this page can help you understand their purpose. - Configuration for the karma + Configuration for the karma test runner described in the [Testing](guide/testing) guide. @@ -191,7 +191,7 @@ If you do, this page can help you understand their purpose. - Script to run karma + Script to run karma with SystemJS as described in the [Testing](guide/testing) guide. @@ -243,7 +243,7 @@ If you do, this page can help you understand their purpose. Contains command scripts for running the application, running tests, and more. Enter `npm run` for a listing. Read more about them. + title="npm scripts for Angular documentation samples">Read more about them. @@ -258,7 +258,7 @@ If you do, this page can help you understand their purpose. Configuration for the - protractor + protractor _end-to-end_ (e2e) test runner. diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index b94c7d334e..1c56bd8c6d 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -696,7 +696,7 @@ Here's how you might begin: The directive's _selector_ is typically the directive's **attribute name** in square brackets, `[myUnless]`. The brackets define a CSS -attribute selector. +attribute selector. The directive _attribute name_ should be spelled in _lowerCamelCase_ and begin with a prefix. Don't use `ng`. That prefix belongs to Angular. @@ -845,4 +845,4 @@ You learned * that the Angular desugars [asterisk (*) syntax](guide/structural-directives#asterisk) into a ``. * how that works for the `NgIf`, `NgFor` and `NgSwitch` built-in directives. * about the [_microsyntax_](guide/structural-directives#microsyntax) that expands into a [``](guide/structural-directives#template). -* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`. \ No newline at end of file +* to write a [custom structural directive](guide/structural-directives#unless), `UnlessDirective`. diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md index 7922a73653..6e3b11ab18 100644 --- a/aio/content/guide/styleguide.md +++ b/aio/content/guide/styleguide.md @@ -102,7 +102,7 @@ The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent t ## Single responsibility Apply the -single responsibility principle (SRP) +single responsibility principle (SRP) to all components, services, and other symbols. This helps make the app cleaner, easier to read and maintain, and more testable. @@ -1915,7 +1915,7 @@ It is rarely worth the effort to change them at the risk of breaking existing co -**Why?** TypeScript guidelines +**Why?** TypeScript guidelines discourage the `I` prefix. @@ -2326,7 +2326,7 @@ in a single file than as multiple files. Be wary of this loophole. A flat structure is easy to scan. On the other hand, -psychologists believe +psychologists believe that humans start to struggle when the number of adjacent interesting things exceeds nine. So when a folder has ten or more files, it may be time to create subfolders. @@ -4932,4 +4932,4 @@ Useful tools and tips for Angular.

-Back to top \ No newline at end of file +Back to top diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index 0b6f66d29f..1b3721e6db 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -2220,7 +2220,7 @@ For example, you could replace the `` switch case with the follow A **template reference variable** is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a -web component. +web component. Use the hash symbol (#) to declare a reference variable. The `#phone` declares a `phone` variable on an `` element. diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index af87ed6b9d..a16cfab7a1 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -284,7 +284,7 @@ There are two fast paths to getting started with unit testing. 1. Start a new project following the instructions in [Setup](guide/setup "Setup"). 1. Start a new project with the -Angular CLI. +Angular CLI. Both approaches install npm packages, files, and scripts pre-configured for applications built in their respective modalities. @@ -636,7 +636,7 @@ A query predicate receives a `DebugElement` and returns `true` if the element me The **`By`** class is an Angular testing utility that produces useful predicates. Its `By.css` static method produces a -standard CSS selector +standard CSS selector predicate that filters the same way as a jQuery selector. Finally, the setup assigns the DOM element from the `DebugElement` **`nativeElement`** property to `el`. @@ -1509,7 +1509,7 @@ Make that easy by encapsulating the _click-triggering_ process in a helper such The first parameter is the _element-to-click_. If you wish, you can pass a custom event object as the second parameter. The default is a (partial) -left-button mouse event object +left-button mouse event object accepted by many handlers including the `RouterLink` directive. @@ -1811,7 +1811,7 @@ Notable features of this stub are: * The stub implements only two of the `ActivatedRoute` capabilities: `params` and `snapshot.params`. -* _BehaviorSubject_ +* _BehaviorSubject_ drives the stub's `params` _Observable_ and returns the same value to every `params` subscriber until it's given a new value. * The `HeroDetailComponent` chains its expressions to this stub `params` _Observable_ which is now under the tester's control. @@ -2533,7 +2533,7 @@ A few techniques are noteworthy: * The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_. -* The `:not` pseudo-class +* The `:not` pseudo-class in `By.css('h2:not([highlight])')` helps find `

` elements that _do not_ have the directive. `By.css('*:not([highlight])')` finds _any_ element that does not have the directive. @@ -2855,7 +2855,7 @@ Here's a summary of the stand-alone functions, in order of likely utility: The curious, dedicated reader might enjoy this lengthy blog post, "_Tasks, microtasks, queues and schedules_". + >_Tasks, microtasks, queues and schedules_". diff --git a/aio/content/guide/ts-to-js.md b/aio/content/guide/ts-to-js.md index 3d6667cfc8..6311a0fc82 100644 --- a/aio/content/guide/ts-to-js.md +++ b/aio/content/guide/ts-to-js.md @@ -45,7 +45,7 @@ code shown in this cookbook.** ## _TypeScript_ to _ES6_ to _ES5_ _TypeScript_ -is a typed superset of _ES6 JavaScript_. +is a typed superset of _ES6 JavaScript_. _ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers. The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features. @@ -409,7 +409,7 @@ that prepares a toggle-button label for the next clicked state: This _TypeScript_ "getter" property is transpiled to an _ES5_ defined property. + title="Defined Properties">defined property. The _ES5 DSL_ does not support _defined properties_ directly but you can still create them by extracting the "class" prototype and adding the _defined property_ in raw JavaScript like this: diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 49d51025f5..61ba76df2f 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -524,7 +524,7 @@ will result in the same thing: Now introduce Angular to the project. Inspired by instructions in [the Setup](guide/setup), you can selectively copy in material from the -QuickStart github repository. +QuickStart github repository. Next, create an `app.module.ts` file and add the following `NgModule` class: @@ -1803,7 +1803,7 @@ so let's do that next. #### Why declare _angular_ as _angular.IAngularStatic_? `@types/angular` is declared as a UMD module, and due to the way -UMD typings +UMD typings work, once you have an ES6 `import` statement in a file all UMD typed modules must also be imported via `import` statements instead of being globally available. diff --git a/aio/content/guide/visual-studio-2015.md b/aio/content/guide/visual-studio-2015.md index 84bca27861..bd2a308c27 100644 --- a/aio/content/guide/visual-studio-2015.md +++ b/aio/content/guide/visual-studio-2015.md @@ -48,7 +48,7 @@ Visual Studio 2015, follow these steps: If you prefer a `File | New Project` experience and are using **ASP.NET Core**, then consider the _experimental_ -ASP.NET Core + Angular template for Visual Studio 2015. +ASP.NET Core + Angular template for Visual Studio 2015. Note that the resulting code does not map to the docs. Adjust accordingly. @@ -329,4 +329,4 @@ It's faster to run without the debugger by pressing `Ctrl-F5`. The default browser opens and displays the QuickStart sample application. Try editing any of the project files. Save and refresh the browser to -see the changes. \ No newline at end of file +see the changes. diff --git a/aio/content/guide/webpack.md b/aio/content/guide/webpack.md index c3dc236581..0c5e3ed05a 100644 --- a/aio/content/guide/webpack.md +++ b/aio/content/guide/webpack.md @@ -783,7 +783,7 @@ Webpack techniques covered in this guide. The app.component.html displays this downloadable Angular logo - + . Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac) on the image and download it to that folder.