From 7a27cd262f660cc012288227bb5cd242f2e5a305 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Tue, 9 Mar 2021 14:15:49 +0200 Subject: [PATCH] refactor(docs-infra): simplify code snippet indentation in the "Cheat sheet" guide (#41051) Previously, the indentation of code snippets in the "Cheat sheet" guide was done using `
` elements (for line breaks) and ` ` HTML entities (for space). This was laborious and put the onus on the author to remember to use these symbols (instead of regular whitespace characters). (Discussed in https://github.com/angular/angular/pull/41051#discussion_r585651621.) This commit changes the way `` elements are styles inside the "Cheat sheet" guide to allow using regular whitespace characters in code snippets. It also changes all `
`/` ` occurrences to `\n`/` ` respectively to make code snippets more readable in the source code. PR Close #41051 --- aio/content/guide/cheatsheet.md | 125 +++++++++++++++++++++++----- aio/src/styles/2-modules/_code.scss | 1 + 2 files changed, 107 insertions(+), 19 deletions(-) diff --git a/aio/content/guide/cheatsheet.md b/aio/content/guide/cheatsheet.md index 0af6277497..f184dbe8be 100644 --- a/aio/content/guide/cheatsheet.md +++ b/aio/content/guide/cheatsheet.md @@ -24,7 +24,12 @@ -@NgModule({
 declarations: ..., imports: ..., exports: ...,
 providers: ..., bootstrap: ...
})
class MyModule {} +@NgModule({ + declarations: ..., imports: ..., exports: ..., + providers: ..., bootstrap: ... +}) +class MyModule {} +

Defines a module that contains components, directives, pipes, and providers.

@@ -93,7 +98,9 @@ is available to declarations of this module.

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

-<video #movieplayer ...></video>
<button (click)="movieplayer.play()">Play</button> +<video #movieplayer ...></video> +<button (click)="movieplayer.play()">Play</button> +

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

@@ -114,7 +121,10 @@ is available to declarations of this module.

An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

-<svg>
 <rect x="0" y="0" width="100" height="100"/>
</svg> +<svg> + <rect x="0" y="0" width="100" height="100"/> +</svg> +

An <svg> root element is detected as an SVG element automatically, without the prefix.

@@ -136,7 +146,12 @@ is available to declarations of this module.

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

-<div [ngSwitch]="conditionExpression">
 <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
 <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
 <ng-template ngSwitchDefault>...</ng-template>
</div> +<div [ngSwitch]="conditionExpression"> + <ng-template [ngSwitchCase]="case1Exp">...</ng-template> + <ng-template ngSwitchCase="case2LiteralString">...</ng-template> + <ng-template ngSwitchDefault>...</ng-template> +</div> +

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

@@ -145,7 +160,9 @@ is available to declarations of this module.

-<div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()"> +<div [ngStyle]="{'property': 'value'}"> +<div [ngStyle]="dynamicStyles()"> +

Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.

@@ -173,19 +190,27 @@ is available to declarations of this module.

-@Component({...})
class MyComponent() {} +@Component({...}) +class MyComponent() {} +

Declares that a class is a component and provides metadata about the component.

-@Directive({...})
class MyDirective() {} +@Directive({...}) +class MyDirective() {} +

Declares that a class is a directive and provides metadata about the directive.

-@Pipe({...})
class MyPipe() {} +@Pipe({...}) +class MyPipe() {} +

Declares that a class is a pipe and provides metadata about the pipe.

-@Injectable()
class MyService() {} +@Injectable() +class MyService() {} +

Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.

@@ -228,11 +253,15 @@ so the @Directive configuration applies to components as well

List of dependency injection providers scoped to this component's view.

-template: 'Hello {{name}}'
templateUrl: 'my-component.html' +template: 'Hello {{name}}' +templateUrl: 'my-component.html' +

Inline template or external template URL of the component's view.

-styles: ['.primary {color: red}']
styleUrls: ['my-component.css'] +styles: ['.primary {color: red}'] +styleUrls: ['my-component.css'] +

List of inline CSS styles or external stylesheet URLs for styling the component’s view.

@@ -355,15 +384,32 @@ so the @Directive configuration applies to components as well

-const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'path/:routeParam', component: MyComponent },
 { path: 'staticPath', component: ... },
 { path: '**', component: ... },
 { path: 'oldPath', redirectTo: '/staticPath' },
 { path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes); +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'path/:routeParam', component: MyComponent }, + { path: 'staticPath', component: ... }, + { path: '**', component: ... }, + { path: 'oldPath', redirectTo: '/staticPath' }, + { path: ..., component: ..., data: { message: 'Custom' } } +]); + +const routing = RouterModule.forRoot(routes); +

Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.

-
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
 +<router-outlet></router-outlet> +<router-outlet name="aux"></router-outlet> +

Marks the location to load the component of the active route.

-
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">
 +<a routerLink="/path"> +<a [routerLink]="[ '/path', routeParam ]"> +<a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> +<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> +<a [routerLink]="[ '/path' ]" fragment="anchor"> +

Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.

@@ -371,23 +417,64 @@ so the @Directive configuration applies to components as well

The provided classes are added to the element when the routerLink becomes the current active route.

-class CanActivateGuard implements CanActivate {
 canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivate: [CanActivateGuard] } +class CanActivateGuard implements CanActivate { + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } +} + +{ path: ..., canActivate: [CanActivateGuard] } +

An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class CanDeactivateGuard implements CanDeactivate<T> {
 canDeactivate(
  component: T,
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] } +class CanDeactivateGuard implements CanDeactivate<T> { + canDeactivate( + component: T, + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } +} + +{ path: ..., canDeactivate: [CanDeactivateGuard] } +

An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class CanActivateChildGuard implements CanActivateChild {
 canActivateChild(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
 children: ... } +class CanActivateChildGuard implements CanActivateChild { + canActivateChild( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } +} + +{ path: ..., canActivateChild: [CanActivateGuard], + children: ... } +

An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

-class ResolveGuard implements Resolve<T> {
 resolve(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
 ): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] } +class ResolveGuard implements Resolve<T> { + resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable<any>|Promise<any>|any { ... } +} + +{ path: ..., resolve: [ResolveGuard] } +

An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.

-class CanLoadGuard implements CanLoad {
 canLoad(
  route: Route
 ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... } +class CanLoadGuard implements CanLoad { + canLoad( + route: Route + ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... } +} + +{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... } +

An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.

diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index a93028e2e6..f9d588f5dc 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -182,6 +182,7 @@ aio-code { code { background-color: inherit; padding: 0; + white-space: pre-wrap; } } }