曾 俊

曾 俊

1656771780

Angular路由参数概述

路由是 Angular 中的基本机制之一。它的主要用途是提供一种在应用程序中导航的方法。没有它,我们将永远停留在同一个页面上!

除了导航之外,路由还可以用于在路由组件之间传递小块信息。这可以通过使用 Angular 路由参数来实现。

路由参数分为三类:

  • 所需参数,
  • 可选参数,和
  • 查询参数。

在本文中,我们将介绍基本路由的工作原理。然后我们研究了Angular提供的所有三种类型的路由参数。

那么,让我们开始吧!

 

路由基础

路由主要用于提供一种在应用程序中导航的方法。大多数单页应用程序都有某种菜单(或工具栏),因此用户可以通过单击菜单选项导航到其功能。

为了实现导航,我们RouterLink在菜单的 HTML 中使用指令。routerLink定义当用户单击该特定选项时将激活的路由。


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

假设我们点击“Pandas”链接。然后更新 URL 地址栏以包含激活的路由:htttp://localhost:4200/pandas

Router检测到地址栏的更改并顺序检查路由配置路径列表是否匹配。

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

它选择找到的第一个匹配项,然后加载指定的组件。Router查找指令,该RouterOutlet指令指定将标识的组件放置在何处。最后,它会在RouterOutlet.

 

路由参数

Angular 提供了三种不同类型的路由参数:必需参数、可选参数和查询参数。

必需参数

顾名思义,这些参数是下一个路由组件正常运行所必需的。必需的参数必须定义为路由配置的一部分。


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

在我们之前的代码片段中,我们定义了一个必需的参数,它id是 panda 的。导航到这条路线需要id这样被路由的组件PandaDisplayComponent可以加载和显示选定的熊猫。

要使用所需参数激活路径,我们使用routerLink并将指定的参数作为额外元素传递给关联的数组。


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

为了以编程方式导航,我们将以类似的方式传递参数。


this.router.navigate(
   ['/pandas', this.panda.id]
);

生成的 URL 如下所示:http://localhost/pandas/1. 然后路由组件可以读取该参数并使用它来显示正确的熊猫。


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

请注意,在 getter 中传递的参数名称必须与路径中定义的名称完全匹配。

 

可选参数

与必需参数不同,可选参数不是必需的。因此,它们不是路由配置的一部分。我们改为在激活路由时指定可选参数。


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

前面的代码片段传递了一个名为 的可选参数filterTerm

提示:我们可以把它写成{ filterTerm: filterTerm },但它看起来有点多余。但我们猜你已经知道了。

分别地,为了以编程方式导航,我们将类似地传递参数。

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

可选参数被指定为关联数组的单个元素中的一组键和值对。生成的 URL 如下所示:http://localhost:4200/pandas;filterTerm=Bobo;sortBy=name. 这可能看起来有点奇怪,但它基本上是用分号分隔的键值对。

这个 URL 是可收藏的,这意味着如果我们将它复制粘贴到地址栏,该组件将在适当的位置加载特定的过滤和排序。

然后路由组件可以读取和使用参数。


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

查询参数

查询参数和可选参数一样,没有被指定为路由配置的一部分。相反,我们在使用附加指令激活路由时指定它们,queryParams.


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

要以编程方式导航,我们会将参数作为具有queryParams属性的额外导航对象传递。请注意,该对象不在关联数组中!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

生成的 URL 是http://localhost:4200?filterTerm=Bobo&sortBy=name并遵循查询参数的标准 URL 格式。同样,这个 URL 是可收藏的,就像使用可选参数一样。

然后路由组件可以读取和使用参数。


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

请注意,我们现在使用queryParamMap而不是paramMap.

你可以在这个 StackBlitz 链接上找到一个工作演示。

可选与查询

此时,您一定想知道,可选参数和查询参数有什么区别?语法和生成的 URL?当然查询参数有一个更熟悉的 URL,但除此之外,它们是否提供任何额外的东西?

完全正确!使用可选参数,如果我们导航回上一个路由而不将它们传回,则参数将消失。另一方面,使用查询参数,我们可以设置queryParamsHandling它们并将自动包含在内!


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

结论

在本文中,我们简要了解了基本路由的工作原理。然后我们研究了 Angular 路由参数的三种类型:必需、可选和查询。最后,我们介绍了可选参数和查询参数之间的主要区别。

我希望你学到了一些新东西。快乐编码!

来源:https ://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Angular路由参数概述
Diego  Elizondo

Diego Elizondo

1656693720

Una Descripción General De Los Parámetros De Ruta Angular

El enrutamiento es uno de los mecanismos fundamentales en Angular. Su uso principal es proporcionar una forma de navegar a través de una aplicación. ¡Sin él, estaríamos atrapados en la misma página para siempre!

Además de navegar, el enrutamiento también se puede usar para pasar pequeños fragmentos de información entre los componentes enrutados. Esto se puede lograr con el uso de parámetros de ruta Angular.

Hay tres tipos de parámetros de ruta:

  • parámetros requeridos,
  • parámetros opcionales, y
  • parámetros de consulta.

En este artículo, presentamos cómo funciona el enrutamiento básico. Luego estudiamos los tres tipos de parámetros de ruta proporcionados por Angular.

¡Entonces empecemos!

 

Conceptos básicos de enrutamiento

El enrutamiento se utiliza principalmente para proporcionar una forma de navegar a través de una aplicación. La mayoría de las aplicaciones de una sola página tienen algún tipo de menú (o barra de herramientas) para que el usuario pueda navegar a sus funciones haciendo clic en las opciones del menú.

Para que la navegación suceda, usamos la RouterLinkdirectiva en el HTML del menú. define la routerLinkruta que se activará cuando el usuario haga clic en esa opción específica.


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

Digamos que hacemos clic en el enlace "Pandas". A continuación, la barra de direcciones URL se actualiza para incluir la ruta activada: htttp://localhost:4200/pandas.

El Routerdetecta el cambio en la barra de direcciones y verifica secuencialmente la lista de rutas de configuración de rutas para encontrar una coincidencia.

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

Selecciona la primera coincidencia que encuentra y luego carga el componente especificado. Routerbusca la directiva RouterOutlet, que especifica dónde colocar el componente identificado. Finalmente, muestra esa vista en la ubicación definida por el archivo RouterOutlet.

 

Parámetros de ruta

Angular proporciona tres tipos diferentes de parámetros de ruta: parámetros requeridos, opcionales y de consulta.

Parámetros requeridos

Como sugiere su nombre, estos parámetros son necesarios para que el siguiente componente enrutado funcione correctamente. Los parámetros requeridos deben definirse como parte de la configuración de la ruta.


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

En nuestro fragmento anterior, definimos un parámetro obligatorio que es el idde un panda. Navegar a esta ruta requiere idque el componente enrutado PandaDisplayComponentpueda cargar y mostrar el panda seleccionado.

Para activar una ruta con un parámetro requerido, usamos routerLinky pasamos los parámetros especificados como elementos adicionales a la matriz asociada.


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

Para navegar programáticamente, pasaríamos los parámetros de manera similar.


this.router.navigate(
   ['/pandas', this.panda.id]
);

La URL resultante se vería así: http://localhost/pandas/1. El componente enrutado puede leer ese parámetro y usarlo para mostrar el panda correcto.


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

Tenga en cuenta que el nombre del parámetro pasado en el captador debe coincidir exactamente con el nombre definido en la ruta.

 

Parámetros opcionales

A diferencia de los parámetros requeridos, los parámetros opcionales no son obligatorios. Por lo tanto, no forman parte de la configuración de la ruta. En su lugar, especificamos parámetros opcionales al activar la ruta.


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

El fragmento anterior pasa un parámetro opcional llamado filterTerm.

Pista: Podríamos haber escrito esto como { filterTerm: filterTerm }, pero parece un poco redundante. Pero suponemos que ya lo sabes.

Respectivamente, para navegar programáticamente, pasaríamos los parámetros de manera similar.

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

Los parámetros opcionales se especifican como un conjunto de pares de clave y valor en un solo elemento de la matriz asociada. La URL resultante se ve así: http://localhost:4200/pandas;filterTerm=Bobo;sortBy=name. Puede parecer un poco extraño, pero básicamente son los pares clave-valor separados por punto y coma.

Esta URL se puede marcar, lo que significa que si la copiamos y pegamos en la barra de direcciones, el componente se cargará con ese filtrado y clasificación específicos en su lugar.

El componente enrutado puede leer y usar los parámetros.


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

Parámetros de consulta

Los parámetros de consulta, como los parámetros opcionales, no se especifican como parte de la configuración de la ruta. En cambio, los especificamos al activar la ruta con una directiva adicional, queryParams.


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

Para navegar mediante programación, pasaríamos los parámetros como un objeto de navegación adicional con una queryParamspropiedad. ¡Observe que el objeto no está en la matriz asociada!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

La URL resultante es http://localhost:4200?filterTerm=Bobo&sortBy=namey sigue el formato de URL estándar para los parámetros de consulta. Nuevamente, esta URL se puede marcar, como con los parámetros opcionales.

El componente enrutado puede leer y usar los parámetros.


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

Tenga en cuenta que ahora usamos queryParamMapen lugar de paramMap.

Puede encontrar una demostración funcional en este enlace de StackBlitz .

Opcional vs Consulta

En este punto, debe preguntarse, ¿cuál es la diferencia entre los parámetros opcionales y los de consulta? Sintaxis y la URL resultante? Seguro que los parámetros de consulta tienen una URL más familiar, pero aparte de eso, ¿proporcionan algo extra?

¡Puedes apostar! Con parámetros opcionales, si volvemos a la ruta anterior sin pasarlos, los parámetros desaparecerán. ¡ Con los parámetros de consulta, por otro lado, podemos establecer queryParamsHandlingy se incluirán automáticamente!


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

Conclusión

En este artículo, echamos un breve vistazo a cómo funciona el enrutamiento básico. Luego estudiamos los tres tipos de parámetros de ruta de Angular: obligatorio, opcional y de consulta. Por último, presentamos la principal diferencia entre los parámetros opcionales y de consulta.

Espero que hayas aprendido algo nuevo. ¡Feliz codificación!

Fuente: https://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Una Descripción General De Los Parámetros De Ruta Angular
Mélanie  Faria

Mélanie Faria

1656689418

Uma Visão Geral Dos Parâmetros De Rota Angular

O roteamento é um dos mecanismos fundamentais em Angular. Seu uso principal é fornecer uma maneira de navegar por um aplicativo. Sem ele, estaríamos presos na mesma página para sempre!

Além de navegar, o roteamento também pode ser usado para passar pequenas informações entre os componentes roteados. Isso pode ser alcançado com o uso de parâmetros de rota Angular.

Existem três tipos de parâmetros de rota:

  • parâmetros necessários,
  • parâmetros opcionais e
  • parâmetros de consulta.

Neste artigo, apresentamos como funciona o roteamento básico. Em seguida, estudamos todos os três tipos de parâmetros de rota fornecidos pelo Angular.

Então vamos começar!

 

Noções básicas de roteamento

O roteamento é usado principalmente para fornecer uma maneira de navegar por um aplicativo. A maioria dos aplicativos de página única tem algum tipo de menu (ou barra de ferramentas) para que o usuário possa navegar até seus recursos clicando nas opções do menu.

Para fazer a navegação acontecer, usamos a RouterLinkdiretiva no HTML do menu. O routerLinkdefine a rota que será ativada quando o usuário clicar nessa opção específica.


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

Digamos que clicamos no link “Pandas”. A barra de endereço URL é então atualizada para incluir a rota ativada: htttp://localhost:4200/pandas.

O Routerdetecta a alteração na barra de endereços e verifica sequencialmente a lista de caminhos de configuração de rota para uma correspondência.

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

Ele seleciona a primeira correspondência que encontra e carrega o componente especificado. A Routerprocura pela RouterOutletdiretiva, que especifica onde colocar o componente identificado. Por fim, ele exibe essa visualização no local definido pelo arquivo RouterOutlet.

 

Parâmetros de rota

Angular fornece três tipos diferentes de parâmetros de rota: parâmetros obrigatórios, opcionais e de consulta.

Parâmetros obrigatórios

Como o próprio nome sugere, esses parâmetros são necessários para que o próximo componente roteado funcione corretamente. Os parâmetros obrigatórios devem ser definidos como parte da configuração da rota.


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

Em nosso snippet anterior, definimos um parâmetro obrigatório que é o idde um panda. Navegar para esta rota requer idque o componente roteado PandaDisplayComponentpossa carregar e exibir o panda selecionado.

Para ativar um caminho com um parâmetro obrigatório, usamos o routerLinke passamos os parâmetros especificados como elementos extras para o array associado.


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

Para navegar programaticamente, passaríamos os parâmetros de maneira semelhante.


this.router.navigate(
   ['/pandas', this.panda.id]
);

A URL resultante ficaria assim: http://localhost/pandas/1. O componente roteado pode então ler esse parâmetro e usá-lo para exibir o panda correto.


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

Observe que o nome do parâmetro passado no getter deve corresponder exatamente ao nome definido no caminho.

 

Parâmetros opcionais

Ao contrário dos parâmetros obrigatórios, os parâmetros opcionais não são obrigatórios. Portanto, eles não fazem parte da configuração da rota. Em vez disso, especificamos parâmetros opcionais ao ativar a rota.


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

O snippet anterior passa um parâmetro opcional chamado filterTerm.

Dica: Poderíamos ter escrito isso como { filterTerm: filterTerm }, mas parece um pouco redundante. Mas nós estamos supondo que você já sabe disso.

Respectivamente, para navegar programaticamente, também passaríamos os parâmetros.

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

Os parâmetros opcionais são especificados como um conjunto de pares de chave e valor em um único elemento da matriz associada. A URL resultante tem esta aparência: http://localhost:4200/pandas;filterTerm=Bobo;sortBy=name. Pode parecer um pouco estranho, mas são basicamente os pares de valores-chave separados por ponto e vírgula.

Esse URL pode ser marcado como favorito, o que significa que, se o copiarmos e colarmos na barra de endereço, o componente será carregado com essa filtragem e classificação específica em vigor.

O componente roteado pode então ler e usar os parâmetros.


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

Parâmetros de consulta

Parâmetros de consulta, como parâmetros opcionais, não são especificados como parte da configuração da rota. Em vez disso, nós os especificamos ao ativar a rota com uma diretiva adicional, queryParams.


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

Para navegar programaticamente, passaríamos os parâmetros como um objeto de navegação extra com uma queryParamspropriedade. Observe que o objeto não está no array associado!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

A URL resultante é http://localhost:4200?filterTerm=Bobo&sortBy=namee segue o formato de URL padrão para parâmetros de consulta. Novamente, esse URL pode ser marcado como favorito, como com os parâmetros opcionais.

O componente roteado pode então ler e usar os parâmetros.


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

Observe que agora usamos queryParamMapem vez de paramMap.

Você pode encontrar uma demonstração funcional neste link do StackBlitz .

Opcional vs. Consulta

Neste ponto, você deve estar se perguntando, qual é a diferença entre parâmetros opcionais e de consulta? Sintaxe e o URL resultante? Com certeza, os parâmetros de consulta têm uma URL mais familiar, mas, além disso, eles fornecem algo extra?

Pode apostar! Com parâmetros opcionais, se navegarmos de volta para a rota anterior sem passá-los de volta, os parâmetros desaparecerão. Com os parâmetros de consulta, por outro lado, podemos definir queryParamsHandlinge eles serão incluídos automaticamente!


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

Conclusão

Neste artigo, vimos brevemente como funciona o roteamento básico. Em seguida, estudamos os três tipos de parâmetros de rota Angular: obrigatório, opcional e consulta. Por fim, apresentamos a principal diferença entre parâmetros opcionais e de consulta.

Espero que você tenha aprendido algo novo. Boa codificação!

Fonte: https://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Uma Visão Geral Dos Parâmetros De Rota Angular
Hoang  Kim

Hoang Kim

1656689325

Tổng Quan Về Các Tham Số Tuyến Đường Angular

Định tuyến là một trong những cơ chế cơ bản trong Angular. Công dụng chính của nó là cung cấp một cách để điều hướng thông qua một ứng dụng. Nếu không có nó, chúng ta sẽ bị mắc kẹt trên cùng một trang mãi mãi!

Ngoài điều hướng, định tuyến cũng có thể được sử dụng để chuyển các phần thông tin nhỏ giữa các thành phần được định tuyến. Điều này có thể đạt được với việc sử dụng các tham số tuyến đường Angular.

Có ba loại tham số tuyến đường:

  • các thông số bắt buộc,
  • các thông số tùy chọn và
  • tham số truy vấn.

Trong bài viết này, chúng tôi trình bày cách hoạt động của định tuyến cơ bản. Sau đó, chúng tôi nghiên cứu cả ba loại tham số tuyến đường được cung cấp bởi Angular.

Vậy hãy bắt đầu!

 

Khái niệm cơ bản về định tuyến

Định tuyến được sử dụng chủ yếu để cung cấp cách điều hướng thông qua một ứng dụng. Hầu hết các ứng dụng trang đơn đều có một số loại menu (hoặc thanh công cụ) để người dùng có thể điều hướng đến các tính năng của chúng bằng cách nhấp vào các tùy chọn menu.

Để thực hiện điều hướng, chúng tôi sử dụng RouterLinkchỉ thị trong HTML của menu. Định routerLinknghĩa tuyến đường sẽ được kích hoạt khi người dùng nhấp vào tùy chọn cụ thể đó.


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

Giả sử chúng ta nhấp vào liên kết "Gấu trúc". Sau đó, thanh địa chỉ URL được cập nhật để bao gồm tuyến đường đã được kích hoạt htttp://localhost:4200/pandas:.

Trình Routerphát hiện sự thay đổi đối với thanh địa chỉ và kiểm tra tuần tự danh sách các đường dẫn cấu hình tuyến đường để tìm một kết quả phù hợp.

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

Nó chọn kết quả phù hợp đầu tiên mà nó tìm thấy và sau đó tải thành phần được chỉ định. Lệnh Routertìm kiếm RouterOutletchỉ thị, chỉ thị chỉ định nơi đặt thành phần đã xác định. Cuối cùng, nó hiển thị chế độ xem đó ở vị trí được xác định bởi RouterOutlet.

 

Tham số tuyến đường

Angular cung cấp ba loại tham số tuyến đường khác nhau: tham số bắt buộc, tùy chọn và truy vấn.

Các thông số bắt buộc

Như tên gọi của chúng cho thấy, các tham số này là bắt buộc để thành phần được định tuyến tiếp theo hoạt động bình thường. Các tham số bắt buộc phải được xác định như một phần của cấu hình tuyến.


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

Trong đoạn mã trước của chúng tôi, chúng tôi xác định một thông số bắt buộc là idcủa gấu trúc. Điều hướng đến tuyến đường này yêu cầu idthành phần được định tuyến PandaDisplayComponentcó thể tải và hiển thị gấu trúc đã chọn.

Để kích hoạt một đường dẫn có tham số bắt buộc, chúng tôi sử dụng routerLinkvà chuyển các tham số được chỉ định làm phần tử bổ sung cho mảng được liên kết.


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

Để điều hướng theo chương trình, chúng tôi sẽ chuyển các tham số theo cách tương tự.


this.router.navigate(
   ['/pandas', this.panda.id]
);

URL kết quả sẽ giống như sau http://localhost/pandas/1:. Sau đó, thành phần được định tuyến có thể đọc tham số đó và sử dụng nó để hiển thị đúng gấu trúc.


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

Lưu ý rằng tên tham số được truyền trong getter phải khớp chính xác với tên như được xác định trong đường dẫn.

 

Các thông số tùy chọn

Không giống như các tham số bắt buộc, các tham số tùy chọn không bắt buộc. Do đó, chúng không phải là một phần của cấu hình tuyến. Thay vào đó, chúng tôi chỉ định các tham số tùy chọn khi kích hoạt tuyến đường.


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

Đoạn mã trước đó chuyển một tham số tùy chọn có tên là filterTerm.

Gợi ý: Chúng tôi có thể viết điều này là { filterTerm: filterTerm }, nhưng nó có vẻ hơi thừa. Nhưng chúng tôi đoán bạn đã biết điều này.

Tương ứng, để điều hướng theo chương trình, chúng tôi sẽ chuyển các tham số tương tự.

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

Các tham số tùy chọn được chỉ định dưới dạng tập hợp các cặp khóa và giá trị trong một phần tử duy nhất của mảng được liên kết. URL kết quả trông như thế này http://localhost:4200/pandas;filterTerm=Bobo;sortBy=name:. Nó có vẻ hơi kỳ quặc, nhưng về cơ bản thì đó là các cặp khóa-giá trị được phân tách bằng dấu chấm phẩy.

URL này có thể đánh dấu trang, có nghĩa là nếu chúng tôi sao chép và dán nó vào thanh địa chỉ, thành phần sẽ tải với bộ lọc và sắp xếp cụ thể tại chỗ.

Sau đó, thành phần được định tuyến có thể đọc và sử dụng các tham số.


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

Tham số truy vấn

Các tham số truy vấn, như các tham số tùy chọn, không được chỉ định như một phần của cấu hình tuyến đường. Thay vào đó, chúng tôi chỉ định chúng khi kích hoạt tuyến bằng một chỉ thị bổ sung , queryParams.


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

Để điều hướng theo chương trình, chúng tôi sẽ chuyển các tham số dưới dạng một đối tượng điều hướng bổ sung với một thuộc queryParamstính. Chú ý rằng đối tượng không nằm trong mảng liên kết!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

URL kết quả là http://localhost:4200?filterTerm=Bobo&sortBy=namevà tuân theo định dạng URL chuẩn cho các tham số truy vấn. Một lần nữa, URL này có thể đánh dấu trang, giống như với các tham số tùy chọn.

Sau đó, thành phần được định tuyến có thể đọc và sử dụng các tham số.


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

Lưu ý rằng bây giờ chúng tôi sử dụng queryParamMapthay vì paramMap.

Bạn có thể tìm thấy một bản demo đang hoạt động tại liên kết StackBlitz này .

Tùy chọn so với Truy vấn

Tại thời điểm này, bạn phải tự hỏi, sự khác biệt giữa tham số tùy chọn và tham số truy vấn là gì? Cú pháp và URL kết quả? Để chắc chắn các tham số truy vấn có một URL quen thuộc hơn, nhưng ngoài điều đó, chúng có cung cấp thêm gì không?

Bạn betcha! Với các tham số tùy chọn, nếu chúng ta điều hướng trở lại tuyến đường trước đó mà không chuyển chúng trở lại, các tham số sẽ biến mất. Mặt khác, với các tham số truy vấn, chúng tôi có thể đặt queryParamsHandlingvà chúng sẽ tự động được đưa vào!


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

Sự kết luận

Trong bài viết này, chúng ta đã có một cái nhìn ngắn gọn về cách hoạt động của định tuyến cơ bản. Sau đó, chúng tôi nghiên cứu ba loại tham số tuyến đường Angular: bắt buộc, tùy chọn và truy vấn. Cuối cùng, chúng tôi đã trình bày sự khác biệt chính giữa tham số tùy chọn và tham số truy vấn.

Tôi hy vọng bạn đã học được điều gì đó mới. Chúc bạn viết mã vui vẻ!

Nguồn: https://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Tổng Quan Về Các Tham Số Tuyến Đường Angular
Anne  de Morel

Anne de Morel

1656686520

Un Aperçu Des Paramètres De Routage Angulaire

Le routage est l'un des mécanismes fondamentaux d'Angular. Son utilisation principale est de fournir un moyen de naviguer dans une application. Sans cela, nous serions coincés sur la même page pour toujours !

Outre la navigation, le routage peut également être utilisé pour transmettre de petites informations entre les composants routés. Ceci peut être réalisé avec l'utilisation de paramètres de routage angulaires.

Il existe trois types de paramètres de route :

  • paramètres requis,
  • paramètres facultatifs, et
  • paramètres de requête.

Dans cet article, nous présentons le fonctionnement du routage de base. Ensuite, nous étudions les trois types de paramètres de route fournis par Angular.

Alors, commençons!

 

Notions de base sur le routage

Le routage est principalement utilisé pour fournir un moyen de naviguer dans une application. La plupart des applications d'une seule page ont une sorte de menu (ou de barre d'outils) afin que l'utilisateur puisse accéder à leurs fonctionnalités en cliquant sur les options de menu.

Pour faciliter la navigation, nous utilisons la RouterLinkdirective dans le code HTML du menu. Le routerLinkdéfinit l'itinéraire qui sera activé lorsque l'utilisateur clique sur cette option spécifique.


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

Disons que nous cliquons sur le lien "Pandas". La barre d'adresse URL est alors mise à jour pour inclure la route activée : htttp://localhost:4200/pandas.

Le Routerdétecte la modification apportée à la barre d'adresse et vérifie séquentiellement la liste des chemins de configuration d'itinéraire pour une correspondance.

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

Il sélectionne la première correspondance qu'il trouve, puis charge le composant spécifié. Le Routerrecherche la RouterOutletdirective, qui spécifie où placer le composant identifié. Enfin, il affiche cette vue à l'emplacement défini par le RouterOutlet.

 

Paramètres d'itinéraire

Angular fournit trois types différents de paramètres d'itinéraire : paramètres requis, facultatifs et de requête.

Paramètres requis

Comme leur nom l'indique, ces paramètres sont nécessaires au bon fonctionnement du prochain composant routé. Les paramètres requis doivent être définis dans le cadre de la configuration de la route.


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

Dans notre extrait précédent, nous définissons un paramètre obligatoire qui est le idd'un panda. La navigation vers cette route nécessite idque le composant routé PandaDisplayComponentpuisse charger et afficher le panda sélectionné.

Pour activer un chemin avec un paramètre requis, nous utilisons le routerLinket transmettons les paramètres spécifiés en tant qu'éléments supplémentaires au tableau associé.


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

Pour naviguer par programmation, nous passerions les paramètres de la même manière.


this.router.navigate(
   ['/pandas', this.panda.id]
);

L'URL résultante ressemblerait à ceci : http://localhost/pandas/1. Le composant routé peut alors lire ce paramètre et l'utiliser pour afficher le panda correct.


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

Notez que le nom du paramètre passé dans le getter doit correspondre exactement au nom défini dans le chemin.

 

Paramètres facultatifs

Contrairement aux paramètres obligatoires, les paramètres facultatifs ne sont pas obligatoires. Par conséquent, ils ne font pas partie de la configuration de l'itinéraire. Nous spécifions à la place des paramètres facultatifs lors de l'activation de la route.


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

L'extrait de code précédent transmet un paramètre facultatif nommé filterTerm.

Indice : Nous aurions pu écrire cela sous la forme { filterTerm: filterTerm }, mais cela semble un peu redondant. Mais nous supposons que vous le savez déjà.

Respectivement, pour naviguer par programmation, nous passerions de la même manière les paramètres.

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

Les paramètres facultatifs sont spécifiés sous la forme d'un ensemble de paires de clé et de valeur dans un seul élément du tableau associé. L'URL résultante ressemble à ceci : http://localhost:4200/pandas;filterTerm=Bobo;sortBy=name. Cela peut sembler un peu étrange, mais il s'agit essentiellement des paires clé-valeur séparées par des points-virgules.

Cette URL peut être mise en signet, ce qui signifie que si nous la copions-collons dans la barre d'adresse, le composant se chargera avec ce filtrage et ce tri spécifiques en place.

Le composant routé peut alors lire et utiliser les paramètres.


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

Paramètres de requête

Les paramètres de requête, comme les paramètres facultatifs, ne sont pas spécifiés dans le cadre de la configuration de l'itinéraire. Au lieu de cela, nous les spécifions lors de l'activation de la route avec une directive supplémentaire, queryParams.


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

Pour naviguer par programme, nous passerions les paramètres en tant qu'objet de navigation supplémentaire avec une queryParamspropriété. Notez que l'objet n'est pas dans le tableau associé !

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

L'URL résultante est http://localhost:4200?filterTerm=Bobo&sortBy=nameet suit le format d'URL standard pour les paramètres de requête. Encore une fois, cette URL peut être mise en signet, comme avec les paramètres facultatifs.

Le composant routé peut alors lire et utiliser les paramètres.


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

Notez que nous utilisons maintenant à la queryParamMapplace de paramMap.

Vous pouvez trouver une démo fonctionnelle sur ce lien StackBlitz .

Facultatif vs Requête

À ce stade, vous devez vous demander quelle est la différence entre les paramètres facultatifs et les paramètres de requête ? Syntaxe et URL résultante ? Bien sûr, les paramètres de requête ont une URL plus familière, mais à part cela, apportent-ils quelque chose de plus ?

Vous pariez ! Avec des paramètres optionnels, si nous revenons à l'itinéraire précédent sans les repasser, les paramètres disparaîtront. Avec les paramètres de requête, par contre, nous pouvons les définir queryParamsHandlinget ils seront automatiquement inclus !


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

Conclusion

Dans cet article, nous avons brièvement expliqué le fonctionnement du routage de base. Ensuite, nous avons étudié les trois types de paramètres de route Angular : requis, facultatif et requête. Enfin, nous avons présenté la principale différence entre les paramètres optionnels et les paramètres de requête.

J'espère que vous avez appris quelque chose de nouveau. Bon codage !

Source : https://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Un Aperçu Des Paramètres De Routage Angulaire
渚  直樹

渚 直樹

1656685502

Angularルートパラメータの概要

ルーティングはAngularの基本的なメカニズムの1つです。その主な用途は、アプリケーション内を移動する方法を提供することです。それがなければ、私たちは永遠に同じページにとどまるでしょう!

ナビゲートとは別に、ルーティングを使用して、ルーティングされたコンポーネント間で小さな情報を渡すこともできます。これは、Angularルートパラメータを使用して実現できます。

ルートパラメータには次の3つのタイプがあります。

  • 必要なパラメータ、
  • オプションのパラメータ、および
  • クエリパラメータ。

この記事では、基本的なルーティングがどのように機能するかを示します。次に、Angularが提供する3種類のルートパラメーターすべてを調査します。

それでは、始めましょう!

 

ルーティングの基本

ルーティングは、主にアプリケーション内を移動する方法を提供するために使用されます。ほとんどの単一ページのアプリケーションには、ある種のメニュー(またはツールバー)があるため、ユーザーはメニューオプションをクリックして機能に移動できます。

ナビゲーションを実現するにRouterLinkは、メニューのHTMLでディレクティブを使用します。はrouterLink、ユーザーがその特定のオプションをクリックしたときにアクティブになるルートを定義します。


<div>
   <ul>
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/pandas']">Pandas</a></li>
   </ul>
   <router-outlet></router-outlet>
</div>

「パンダ」リンクをクリックするとします。次に、URLアドレスバーが更新され、アクティブ化されたルートが含まれますhtttp://localhost:4200/pandas

はアドレスバーへのRouter変更を検出し、ルート構成パスのリストに一致するものがないか順番にチェックします。

RouterModule.forRoot([
   {
      path: '', redirectTo: 'home', pathMatch: 'full'
   },
   {
      path: 'home',  component: HomeComponent
   },
   {
      path: 'pandas', component: PandaListComponent
   },
   {
      path: 'pandas/:id', component: PandaDisplayComponent
   }
]);

見つかった最初の一致を選択してから、指定されたコンポーネントをロードします。識別されたコンポーネントを配置する場所を指定するディレクティブをRouter探します。RouterOutlet最後に、で定義された場所にそのビューを表示しますRouterOutlet

 

ルートパラメータ

Angularは、必須、オプション、クエリパラメーターの3種類のルートパラメーターを提供します。

必要なパラメータ

それらの名前が示すように、これらのパラメーターは、次にルーティングされるコンポーネントが正しく機能するために必要です。必須パラメータは、ルート構成の一部として定義する必要があります。


 {
    path: 'pandas/:id', component: PandaDisplayComponent
 }

id前のスニペットでは、パンダの必須パラメーターを定義しました。このルートに移動するにはid、ルーティングされたコンポーネントPandaDisplayComponentが選択したパンダを読み込んで表示できるようにする必要があります。

必要なパラメーターを使用してパスをアクティブ化するには、を使用してrouterLink、指定されたパラメーターを追加の要素として関連する配列に渡します。


<div *ngFor="let panda of pandas">
   <a [routerLink]="['/pandas', panda.id]">
      {{ panda.name }}
   </a>
</div>

プログラムでナビゲートするには、同様の方法でパラメーターを渡します。


this.router.navigate(
   ['/pandas', this.panda.id]
);

結果のURLは次のようになりますhttp://localhost/pandas/1。ルーティングされたコンポーネントは、そのパラメーターを読み取り、それを使用して正しいパンダを表示できます。


const param = this.route.snapshot.paramMap.get('id');
if (param) {
   const id = +param;
   this.panda = this.pandaService.getPandaById(id);
}

ゲッターで渡されるパラメーター名は、パスで定義されている名前と正確に一致する必要があることに注意してください。

 

オプションのパラメータ

必須パラメーターとは異なり、オプションのパラメーターは必須ではありません。したがって、これらはルート構成の一部ではありません。代わりに、ルートをアクティブ化するときにオプションのパラメータを指定します。


<a  [routerLink]="['/pandas', { filterTerm, sortBy }]">
   Pandas
</a>

前のスニペットは、という名前のオプションのパラメーターを渡しますfilterTerm

ヒント:これをと書くこともできます{ filterTerm: filterTerm }が、少し冗長に見えます。しかし、私たちはあなたがすでにこれを知っていると推測しています。

それぞれ、プログラムでナビゲートするには、同様にパラメーターを渡します。

this.router.navigate(
   ['/pandas', { filterTerm, sortBy }]
);

オプションのパラメーターは、関連付けられた配列の単一要素内のキーと値のペアのセットとして指定されます。結果のURLは次のようになりますhttp://localhost:4200/pandas;filterTerm=Bobo;sortBy=name。少し奇妙に思えるかもしれませんが、基本的にはセミコロンで区切られたキーと値のペアです。

このURLはブックマーク可能です。つまり、このURLをコピーしてアドレスバーに貼り付けると、コンポーネントはその特定のフィルタリングと並べ替えを使用して読み込まれます。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTemr = this.route.snapshot.paramMap.get('filterTerm');
const sortBy = this.route.snapshot.paramMap.get('sortBy');

 

クエリパラメータ

オプションパラメータのようなクエリパラメータは、ルート設定の一部として指定されていません。代わりに、追加のディレクティブでルートをアクティブ化するときにそれらを指定しますqueryParams


<a [routerLink]="['/pandas']"
   [queryParams]="{ filterTerm, sortBy }"
>
   Pandas
</a>

プログラムでナビゲートするには、プロパティを持つ追加のナビゲーションオブジェクトとしてパラメータを渡しqueryParamsます。オブジェクトが関連付けられた配列にないことに注意してください!

this.router.navigate(
   ['/pandas'],
   { queryParams: { filterTerm, sortBy } }
);

結果のURLはhttp://localhost:4200?filterTerm=Bobo&sortBy=name、クエリパラメータの標準URL形式に準拠しています。この場合も、このURLは、オプションのパラメーターと同様にブックマーク可能です。

ルーティングされたコンポーネントは、パラメータを読み取って使用できます。


const filterTerm = this.route.snapshot.queryParamMap.get('filterTerm');
const sortBy = this.route.snapshot.queryParamMap.get('sortBy');

queryParamMapの代わりにを使用していることに注意してくださいparamMap

このStackBlitzリンクで実用的なデモを見つけることができます。

オプションとクエリ

この時点で、オプションパラメータとクエリパラメータの違いは何でしょうか。構文と結果のURL?確かに、クエリパラメータにはより馴染みのあるURLがありますが、それ以外に何か特別なものがありますか?

もちろんです!オプションのパラメーターを使用して、パスを戻さずに前のルートに戻ると、パラメーターは失われます。一方、クエリパラメータを使用すると、設定でき、queryParamsHandling自動的に含まれます。


<button 
  [routerLink]="['/pandas']"
   queryParamsHandling="preserve"
>
   Back
</button>

 

結論

この記事では、基本的なルーティングがどのように機能するかについて簡単に説明しました。次に、3種類の角度ルートパラメーター(必須、オプション、クエリ)を調べました。最後に、オプションパラメータとクエリパラメータの主な違いを示しました。

あなたが何か新しいことを学んだことを願っています。ハッピーコーディング!

ソース:https ://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

Angularルートパラメータの概要

An Overview of Angular Route Parameters

Routing is one of the fundamental mechanisms in Angular. Its primary use is to provide a way to navigate through an application. Without it, we would be stuck on the same page forever!

Apart from navigating, routing can also be used to pass small pieces of information between routed components. This can be achieved with the use of Angular route parameters.

There are three types of route parameters:

  • required parameters,
  • optional parameters, and
  • query parameters.

In this article, we present how basic routing works. Then we study all three types of route parameters provided by Angular.

So, let’s get started!

See more at : https://javascript.plainenglish.io/angular-route-parameters-a-simple-guide-88c69d54102c

#angular #route 

An Overview of Angular Route Parameters

How to Build CRUD with .NET 6 Web API & Entity Framework Core

In this video we will be going to be creating a .NET 6 Web API with EF Core.

00:00 intro
00:10 Course Overview 
01:03 Creating the application and overview
07:04 Creating Models
10:08 Creating the Controller
19:32 Creating the First Get Action
22:51 Creating an InMemory-Db
28:18 Creating a Get Action for specific Item
32:59 Creating Post Action
41:19 Creating Patch
44:18 Creating Delete Action
46:29 Install EF Core tools
47:25 Install EF Core nuget packages
50:54 Adding Database Connection String
52:58 Creating App Db Context
53:58 Configuring Program.cs with EF Core
56:13 Update the App Db Context
01:01:43 Creating first database migration script
01:03:37 Creating the database and implementing the migration script
01:06:41 Adding AppDbContext to the controller
01:07:48 Updating actions to utilise Database rather then In-Memory Database

Some helpful videos
.Net Middleware: https://youtu.be/vMkTQgAL6w0
Dependency Injection: https://youtu.be/RTAwZbSmXVg

Source code
https://github.com/mohamadlawand087/net6-crud/tree/master

.Net 7 SDK: https://dotnet.microsoft.com/en-us/download/dotnet/7.0

#minimalapi  #dotnet7 #route #dotnet #webapi 

How to Build CRUD with .NET 6 Web API & Entity Framework Core
Veronica  Roob

Veronica Roob

1649123880

Route: Fast PSR-7 Based Routing and Dispatch Component

Route

This package is compliant with PSR-1, PSR-2, PSR-4, PSR-7, PSR-11 and PSR-15. If you notice compliance oversights, please send a patch via pull request.

Install

Via Composer

$ composer require league/route

Requirements

The following versions of PHP are supported by this version.

  • PHP 7.2
  • PHP 7.3
  • PHP 7.4
  • PHP 8.0

Documentation

Route has full documentation, powered by Jekyll.

Contribute to this documentation in the docs directory.

Testing

$ vendor/bin/phpunit

Contributing

Please see CONTRIBUTING for details.

Credits

License

The MIT License (MIT). Please see License File for more information.

Author: thephpleague
Source Code: https://github.com/thephpleague/route
License: MIT License

#php #route 

Route: Fast PSR-7 Based Routing and Dispatch Component
Veronica  Roob

Veronica Roob

1649101860

Klein PHP: A Fast and Flexible Router

Klein.php

klein.php is a fast & flexible router for PHP 5.3+

Getting started

  1. PHP 5.3.x is required
  2. Install Klein using Composer (recommended) or manually
  3. Setup URL rewriting so that all requests are handled by index.php
  4. (Optional) Throw in some APC for good measure

Composer Installation

  1. Get Composer
  2. Require Klein with php composer.phar require klein/klein
  3. Add the following to your application's main PHP file: require 'vendor/autoload.php';

Example

Hello World - Obligatory hello world example

<?phprequire_once __DIR__ . '/vendor/autoload.php';$klein = new \Klein\Klein();$klein->respond('GET', '/hello-world', function () {    return 'Hello World!';});$klein->dispatch();

Example 1 - Respond to all requests

$klein->respond(function () {    return 'All the things';});

Example 2 - Named parameters

$klein->respond('/[:name]', function ($request) {    return 'Hello ' . $request->name;});

Example 3 - So RESTful

$klein->respond('GET', '/posts', $callback);$klein->respond('POST', '/posts', $callback);$klein->respond('PUT', '/posts/[i:id]', $callback);$klein->respond('DELETE', '/posts/[i:id]', $callback);$klein->respond('OPTIONS', null, $callback);// To match multiple request methods:$klein->respond(array('POST','GET'), $route, $callback);// Or you might want to handle the requests in the same place$klein->respond('/posts/[create|edit:action]?/[i:id]?', function ($request, $response) {    switch ($request->action) {        //    }});

Example 4 - Sending objects / files

$klein->respond(function ($request, $response, $service) {    $service->xml = function ($object) {        // Custom xml output function    }    $service->csv = function ($object) {        // Custom csv output function    }});$klein->respond('/report.[xml|csv|json:format]?', function ($request, $response, $service) {    // Get the format or fallback to JSON as the default    $send = $request->param('format', 'json');    $response->$send($report);});$klein->respond('/report/latest', function ($request, $response, $service) {    $response->file('/tmp/cached_report.zip');});

Example 5 - All together

$klein->respond(function ($request, $response, $service, $app) use ($klein) {    // Handle exceptions => flash the message and redirect to the referrer    $klein->onError(function ($klein, $err_msg) {        $klein->service()->flash($err_msg);        $klein->service()->back();    });    // The fourth parameter can be used to share scope and global objects    $app->db = new PDO(...);    // $app also can store lazy services, e.g. if you don't want to    // instantiate a database connection on every response    $app->register('db', function() {        return new PDO(...);    });});$klein->respond('POST', '/users/[i:id]/edit', function ($request, $response, $service, $app) {    // Quickly validate input parameters    $service->validateParam('username', 'Please enter a valid username')->isLen(5, 64)->isChars('a-zA-Z0-9-');    $service->validateParam('password')->notNull();    $app->db->query(...); // etc.    // Add view properties and helper methods    $service->title = 'foo';    $service->escape = function ($str) {        return htmlentities($str); // Assign view helpers    };    $service->render('myview.phtml');});// myview.phtml:<title><?php echo $this->escape($this->title) ?></title>

Route namespaces

$klein->with('/users', function () use ($klein) {    $klein->respond('GET', '/?', function ($request, $response) {        // Show all users    });    $klein->respond('GET', '/[:id]', function ($request, $response) {        // Show a single user    });});foreach(array('projects', 'posts') as $controller) {    // Include all routes defined in a file under a given namespace    $klein->with("/$controller", "controllers/$controller.php");}

Included files are run in the scope of Klein ($klein) so all Klein methods/properties can be accessed with $this

Example file for: "controllers/projects.php"

// Routes to "/projects/?"$this->respond('GET', '/?', function ($request, $response) {    // Show all projects});

Lazy services

Services can be stored lazily, meaning that they are only instantiated on first use.

<?php$klein->respond(function ($request, $response, $service, $app) {    $app->register('lazyDb', function() {        $db = new stdClass();        $db->name = 'foo';        return $db;    });});//Later$klein->respond('GET', '/posts', function ($request, $response, $service, $app) {    // $db is initialised on first request    // all subsequent calls will use the same instance    return $app->lazyDb->name;});

Validators

To add a custom validator use addValidator($method, $callback)

$service->addValidator('hex', function ($str) {    return preg_match('/^[0-9a-f]++$/i', $str);});

You can validate parameters using is<$method>() or not<$method>(), e.g.

$service->validateParam('key')->isHex();

Or you can validate any string using the same flow..

$service->validate($username)->isLen(4,16);

Validation methods are chainable, and a custom exception message can be specified for if/when validation fails

$service->validateParam('key', 'The key was invalid')->isHex()->isLen(32);

Routing

[ match_type : param_name ]

Some examples

*                    // Match all request URIs
[i]                  // Match an integer
[i:id]               // Match an integer as 'id'
[a:action]           // Match alphanumeric characters as 'action'
[h:key]              // Match hexadecimal characters as 'key'
[:action]            // Match anything up to the next / or end of the URI as 'action'
[create|edit:action] // Match either 'create' or 'edit' as 'action'
[*]                  // Catch all (lazy)
[*:trailing]         // Catch all as 'trailing' (lazy)
[**:trailing]        // Catch all (possessive - will match the rest of the URI)
.[:format]?          // Match an optional parameter 'format' - a / or . before the block is also optional

Some more complicated examples

/posts/[*:title][i:id]     // Matches "/posts/this-is-a-title-123"
/output.[xml|json:format]? // Matches "/output", "output.xml", "output.json"
/[:controller]?/[:action]? // Matches the typical /controller/action format

Note - all routes that match the request URI are called - this allows you to incorporate complex conditional logic such as user authentication or view layouts. e.g. as a basic example, the following code will wrap other routes with a header and footer

$klein->respond('*', function ($request, $response, $service) { $service->render('header.phtml'); });//other routes$klein->respond('*', function ($request, $response, $service) { $service->render('footer.phtml'); });

Routes automatically match the entire request URI. If you need to match only a part of the request URI or use a custom regular expression, use the @ operator. If you need to negate a route, use the ! operator

// Match all requests that end with '.json' or '.csv'$klein->respond('@\.(json|csv)$', ...// Match all requests that _don't_ start with /admin$klein->respond('!@^/admin/', ...

Views

You can send properties or helpers to the view by assigning them to the $service object, or by using the second arg of $service->render()

$service->escape = function ($str) {    return htmlentities($str);};$service->render('myview.phtml', array('title' => 'My View'));// Or just: $service->title = 'My View';

myview.phtml

<title><?php echo $this->escape($this->title) ?></title>

Views are compiled and run in the scope of $service so all service methods can be accessed with $this

$this->render('partial.html')           // Render partials$this->sharedData()->get('myvar')       // Access stored service variablesecho $this->query(array('page' => 2))   // Modify the current query string

API

Below is a list of the public methods in the common classes you will most likely use. For a more formal source of class/method documentation, please see the PHPdoc generated documentation.

$request->    id($hash = true)                    // Get a unique ID for the request    paramsGet()                         // Return the GET parameter collection    paramsPost()                        // Return the POST parameter collection    paramsNamed()                       // Return the named parameter collection    cookies()                           // Return the cookies collection    server()                            // Return the server collection    headers()                           // Return the headers collection    files()                             // Return the files collection    body()                              // Get the request body    params()                            // Return all parameters    params($mask = null)                // Return all parameters that match the mask array - extract() friendly    param($key, $default = null)        // Get a request parameter (get, post, named)    isSecure()                          // Was the request sent via HTTPS?    ip()                                // Get the request IP    userAgent()                         // Get the request user agent    uri()                               // Get the request URI    pathname()                          // Get the request pathname    method()                            // Get the request method    method($method)                     // Check if the request method is $method, i.e. method('post') => true    query($key, $value = null)          // Get, add to, or modify the current query string    <param>                             // Get / Set (if assigned a value) a request parameter$response->    protocolVersion($protocol_version = null)       // Get the protocol version, or set it to the passed value    body($body = null)                              // Get the response body's content, or set it to the passed value    status()                                        // Get the response's status object    headers()                                       // Return the headers collection    cookies()                                       // Return the cookies collection    code($code = null)                              // Return the HTTP response code, or set it to the passed value    prepend($content)                               // Prepend a string to the response body    append($content)                                // Append a string to the response body    isLocked()                                      // Check if the response is locked    requireUnlocked()                               // Require that a response is unlocked    lock()                                          // Lock the response from further modification    unlock()                                        // Unlock the response    sendHeaders($override = false)                  // Send the HTTP response headers    sendCookies($override = false)                  // Send the HTTP response cookies    sendBody()                                      // Send the response body's content    send()                                          // Send the response and lock it    isSent()                                        // Check if the response has been sent    chunk($str = null)                              // Enable response chunking (see the wiki)    header($key, $value = null)                     // Set a response header    cookie($key, $value = null, $expiry = null)     // Set a cookie    cookie($key, null)                              // Remove a cookie    noCache()                                       // Tell the browser not to cache the response    redirect($url, $code = 302)                     // Redirect to the specified URL    dump($obj)                                      // Dump an object    file($path, $filename = null)                   // Send a file    json($object, $jsonp_prefix = null)             // Send an object as JSON or JSONP by providing padding prefix$service->    sharedData()                                    // Return the shared data collection    startSession()                                  // Start a session and return its ID    flash($msg, $type = 'info', $params = array()   // Set a flash message    flashes($type = null)                           // Retrieve and clears all flashes of $type    markdown($str, $args, ...)                      // Return a string formatted with markdown    escape($str)                                    // Escape a string    refresh()                                       // Redirect to the current URL    back()                                          // Redirect to the referer    query($key, $value = null)                      // Modify the current query string    query($arr)    layout($layout)                                 // Set the view layout    yieldView()                                     // Call inside the layout to render the view content    render($view, $data = array())                  // Render a view or partial (in the scope of $response)    partial($view, $data = array())                 // Render a partial without a layout (in the scope of $response)    addValidator($method, $callback)                // Add a custom validator method    validate($string, $err = null)                  // Validate a string (with a custom error message)    validateParam($param, $err = null)                  // Validate a param    <callback>($arg1, ...)                          // Call a user-defined helper    <property>                                      // Get a user-defined property$app->    <callback>($arg1, ...)                          //Call a user-defined helper$validator->    notNull()                           // The string must not be null    isLen($length)                      // The string must be the exact length    isLen($min, $max)                   // The string must be between $min and $max length (inclusive)    isInt()                             // Check for a valid integer    isFloat()                           // Check for a valid float/decimal    isEmail()                           // Check for a valid email    isUrl()                             // Check for a valid URL    isIp()                              // Check for a valid IP    isAlpha()                           // Check for a-z (case insensitive)    isAlnum()                           // Check for alphanumeric characters    contains($needle)                   // Check if the string contains $needle    isChars($chars)                     // Validate against a character list    isRegex($pattern, $modifiers = '')  // Validate against a regular expression    notRegex($pattern, $modifiers ='')    is<Validator>()                     // Validate against a custom validator    not<Validator>()                    // The validator can't match    <Validator>()                       // Alias for is<Validator>()

Unit Testing

Unit tests are a crucial part of developing a routing engine such as Klein. Added features or bug-fixes can have adverse effects that are hard to find without a lot of testing, hence the importance of unit testing.

This project uses PHPUnit as its unit testing framework.

The tests all live in /tests and each test extends an abstract class AbstractKleinTest

To test the project, simply run php composer.phar install --dev to download a common version of PHPUnit with composer and run the tests from the main directory with ./vendor/bin/phpunit

Contributing

See the contributing guide for more info

More information

See the wiki for more information

Contributors

License

(MIT License)

Copyright (c) 2010 Chris O'Hara cohara87@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Author: klein
Source Code: https://github.com/klein/klein.php
License: MIT License

#php #route 

Klein PHP: A Fast and Flexible Router
Veronica  Roob

Veronica Roob

1649090580

FastRoute: Fast Request Router for PHP

FastRoute - Fast request router for PHP

This library provides a fast implementation of a regular expression based router. Blog post explaining how the implementation works and why it is fast.

Install

To install with composer:

composer require nikic/fast-route

Requires PHP 7.4 or newer.

Usage

Here's a basic usage example:

<?php

require '/path/to/vendor/autoload.php';

$dispatcher = FastRoute\simpleDispatcher(function(FastRoute\RouteCollector $r) {
    $r->addRoute('GET', '/users', 'get_all_users_handler');
    // {id} must be a number (\d+)
    $r->addRoute('GET', '/user/{id:\d+}', 'get_user_handler');
    // The /{title} suffix is optional
    $r->addRoute('GET', '/articles/{id:\d+}[/{title}]', 'get_article_handler');
});

// Fetch method and URI from somewhere
$httpMethod = $_SERVER['REQUEST_METHOD'];
$uri = $_SERVER['REQUEST_URI'];

// Strip query string (?foo=bar) and decode URI
if (false !== $pos = strpos($uri, '?')) {
    $uri = substr($uri, 0, $pos);
}
$uri = rawurldecode($uri);

$routeInfo = $dispatcher->dispatch($httpMethod, $uri);
switch ($routeInfo[0]) {
    case FastRoute\Dispatcher::NOT_FOUND:
        // ... 404 Not Found
        break;
    case FastRoute\Dispatcher::METHOD_NOT_ALLOWED:
        $allowedMethods = $routeInfo[1];
        // ... 405 Method Not Allowed
        break;
    case FastRoute\Dispatcher::FOUND:
        $handler = $routeInfo[1];
        $vars = $routeInfo[2];
        // ... call $handler with $vars
        break;
}

Defining routes

The routes are defined by calling the FastRoute\simpleDispatcher() function, which accepts a callable taking a FastRoute\RouteCollector instance. The routes are added by calling addRoute() on the collector instance:

$r->addRoute($method, $routePattern, $handler);

The $method is an uppercase HTTP method string for which a certain route should match. It is possible to specify multiple valid methods using an array:

// These two calls
$r->addRoute('GET', '/test', 'handler');
$r->addRoute('POST', '/test', 'handler');
// Are equivalent to this one call
$r->addRoute(['GET', 'POST'], '/test', 'handler');

By default the $routePattern uses a syntax where {foo} specifies a placeholder with name foo and matching the regex [^/]+. To adjust the pattern the placeholder matches, you can specify a custom pattern by writing {bar:[0-9]+}. Some examples:

// Matches /user/42, but not /user/xyz
$r->addRoute('GET', '/user/{id:\d+}', 'handler');

// Matches /user/foobar, but not /user/foo/bar
$r->addRoute('GET', '/user/{name}', 'handler');

// Matches /user/foo/bar as well
$r->addRoute('GET', '/user/{name:.+}', 'handler');

Custom patterns for route placeholders cannot use capturing groups. For example {lang:(en|de)} is not a valid placeholder, because () is a capturing group. Instead you can use either {lang:en|de} or {lang:(?:en|de)}.

Furthermore parts of the route enclosed in [...] are considered optional, so that /foo[bar] will match both /foo and /foobar. Optional parts are only supported in a trailing position, not in the middle of a route.

// This route
$r->addRoute('GET', '/user/{id:\d+}[/{name}]', 'handler');
// Is equivalent to these two routes
$r->addRoute('GET', '/user/{id:\d+}', 'handler');
$r->addRoute('GET', '/user/{id:\d+}/{name}', 'handler');

// Multiple nested optional parts are possible as well
$r->addRoute('GET', '/user[/{id:\d+}[/{name}]]', 'handler');

// This route is NOT valid, because optional parts can only occur at the end
$r->addRoute('GET', '/user[/{id:\d+}]/{name}', 'handler');

The $handler parameter does not necessarily have to be a callback, it could also be a controller class name or any other kind of data you wish to associate with the route. FastRoute only tells you which handler corresponds to your URI, how you interpret it is up to you.

Shortcut methods for common request methods

For the GET, POST, PUT, PATCH, DELETE and HEAD request methods shortcut methods are available. For example:

$r->get('/get-route', 'get_handler');
$r->post('/post-route', 'post_handler');

Is equivalent to:

$r->addRoute('GET', '/get-route', 'get_handler');
$r->addRoute('POST', '/post-route', 'post_handler');

Route Groups

Additionally, you can specify routes inside of a group. All routes defined inside a group will have a common prefix.

For example, defining your routes as:

$r->addGroup('/admin', function (RouteCollector $r) {
    $r->addRoute('GET', '/do-something', 'handler');
    $r->addRoute('GET', '/do-another-thing', 'handler');
    $r->addRoute('GET', '/do-something-else', 'handler');
});

Will have the same result as:

$r->addRoute('GET', '/admin/do-something', 'handler');
$r->addRoute('GET', '/admin/do-another-thing', 'handler');
$r->addRoute('GET', '/admin/do-something-else', 'handler');

Nested groups are also supported, in which case the prefixes of all the nested groups are combined.

Caching

The reason simpleDispatcher accepts a callback for defining the routes is to allow seamless caching. By using cachedDispatcher instead of simpleDispatcher you can cache the generated routing data and construct the dispatcher from the cached information:

<?php

$dispatcher = FastRoute\cachedDispatcher(function(FastRoute\RouteCollector $r) {
    $r->addRoute('GET', '/user/{name}/{id:[0-9]+}', 'handler0');
    $r->addRoute('GET', '/user/{id:[0-9]+}', 'handler1');
    $r->addRoute('GET', '/user/{name}', 'handler2');
}, [
    'cacheFile' => __DIR__ . '/route.cache', /* required */
    'cacheDisabled' => IS_DEBUG_ENABLED,     /* optional, enabled by default */
]);

The second parameter to the function is an options array, which can be used to specify the cache file location, among other things.

Dispatching a URI

A URI is dispatched by calling the dispatch() method of the created dispatcher. This method accepts the HTTP method and a URI. Getting those two bits of information (and normalizing them appropriately) is your job - this library is not bound to the PHP web SAPIs.

The dispatch() method returns an array whose first element contains a status code. It is one of Dispatcher::NOT_FOUND, Dispatcher::METHOD_NOT_ALLOWED and Dispatcher::FOUND. For the method not allowed status the second array element contains a list of HTTP methods allowed for the supplied URI. For example:

[FastRoute\Dispatcher::METHOD_NOT_ALLOWED, ['GET', 'POST']]

NOTE: The HTTP specification requires that a 405 Method Not Allowed response include the Allow: header to detail available methods for the requested resource. Applications using FastRoute should use the second array element to add this header when relaying a 405 response.

For the found status the second array element is the handler that was associated with the route and the third array element is a dictionary of placeholder names to their values. For example:

/* Routing against GET /user/nikic/42 */

[FastRoute\Dispatcher::FOUND, 'handler0', ['name' => 'nikic', 'id' => '42']]

Overriding the route parser and dispatcher

The routing process makes use of three components: A route parser, a data generator and a dispatcher. The three components adhere to the following interfaces:

<?php

namespace FastRoute;

interface RouteParser {
    public function parse($route);
}

interface DataGenerator {
    public function addRoute($httpMethod, $routeData, $handler);
    public function getData();
}

interface Dispatcher {
    const NOT_FOUND = 0, FOUND = 1, METHOD_NOT_ALLOWED = 2;

    public function dispatch($httpMethod, $uri);
}

The route parser takes a route pattern string and converts it into an array of route infos, where each route info is again an array of it's parts. The structure is best understood using an example:

/* The route /user/{id:\d+}[/{name}] converts to the following array: */
[
    [
        '/user/',
        ['id', '\d+'],
    ],
    [
        '/user/',
        ['id', '\d+'],
        '/',
        ['name', '[^/]+'],
    ],
]

This array can then be passed to the addRoute() method of a data generator. After all routes have been added the getData() of the generator is invoked, which returns all the routing data required by the dispatcher. The format of this data is not further specified - it is tightly coupled to the corresponding dispatcher.

The dispatcher accepts the routing data via a constructor and provides a dispatch() method, which you're already familiar with.

The route parser can be overwritten individually (to make use of some different pattern syntax), however the data generator and dispatcher should always be changed as a pair, as the output from the former is tightly coupled to the input of the latter. The reason the generator and the dispatcher are separate is that only the latter is needed when using caching (as the output of the former is what is being cached.)

When using the simpleDispatcher / cachedDispatcher functions from above the override happens through the options array:

<?php

$dispatcher = FastRoute\simpleDispatcher(function(FastRoute\RouteCollector $r) {
    /* ... */
}, [
    'routeParser' => 'FastRoute\\RouteParser\\Std',
    'dataGenerator' => 'FastRoute\\DataGenerator\\MarkBased',
    'dispatcher' => 'FastRoute\\Dispatcher\\MarkBased',
]);

The above options array corresponds to the defaults. By replacing MarkBased with GroupCountBased you could switch to a different dispatching strategy.

A Note on HEAD Requests

The HTTP spec requires servers to support both GET and HEAD methods:

The methods GET and HEAD MUST be supported by all general-purpose servers

To avoid forcing users to manually register HEAD routes for each resource we fallback to matching an available GET route for a given resource. The PHP web SAPI transparently removes the entity body from HEAD responses so this behavior has no effect on the vast majority of users.

However, implementers using FastRoute outside the web SAPI environment (e.g. a custom server) MUST NOT send entity bodies generated in response to HEAD requests. If you are a non-SAPI user this is your responsibility; FastRoute has no purview to prevent you from breaking HTTP in such cases.

Finally, note that applications MAY always specify their own HEAD method route for a given resource to bypass this behavior entirely.

Credits

This library is based on a router that Levi Morrison implemented for the Aerys server.

A large number of tests, as well as HTTP compliance considerations, were provided by Daniel Lowrey.

Author: nikic
Source Code: https://github.com/nikic/FastRoute
License: View license

#php #route 

FastRoute: Fast Request Router for PHP

Route: A routing library built on top of Fast Route

Route

This package is compliant with PSR-1, PSR-2, PSR-4, PSR-7, PSR-11 and PSR-15. If you notice compliance oversights, please send a patch via pull request.

Install

Via Composer

$ composer require league/route

Requirements

The following versions of PHP are supported by this version.

  • PHP 7.2
  • PHP 7.3
  • PHP 7.4
  • PHP 8.0

Testing

$ vendor/bin/phpunit

Contributing

Please see CONTRIBUTING for details.

Credits

Documentation

Route has full documentation, powered by Jekyll.

Contribute to this documentation in the docs directory.

Author: Thephpleague
Source Code: https://github.com/thephpleague/route 
License: MIT License

#php #route 

Route: A routing library built on top of Fast Route
Trycia  Hintz

Trycia Hintz

1644944100

How to Use Regular Expressions with Routes in React

The path property of the Route component can accept a string, an array of strings, or even regular expressions. So, in this lesson, you'll break down this prop and see how to create powerful rules to define the paths of your routes using regex.

#route #react 

How to Use Regular Expressions with Routes in React
Jake  Murphy

Jake Murphy

1639707540

Choosing a ROUTE 53 Routing Policy

Simple routing lets you configure standard DNS records
With simple routing, you typically route traffic to a single resource, so you have your application and you set a record and route traffic to that URL based on the record type.

Weighted routing lets you associate multiple resources with – 
The single domain name (pythoholic.com) 
Subdomain name (apps.pythoholic.com) with power to chose how much traffic can be distributed
To use latency-based routing, you create latency records for your resources in multiple AWS Regions.

Failover routing lets you route traffic to a resource when the resource is healthy or to a different resource when the first resource is unhealthy. The primary and secondary records can route traffic to anything from an Amazon S3 bucket that is configured as a website to a complex tree of records.

Geolocation routing lets you choose the resources that serve your traffic based on the geographic location of your users, meaning the location that DNS queries originate from.

Multivalue answer routing lets you configure Amazon Route 53 to return multiple values, such as IP addresses for your web servers, in response to DNS queries.

#route #aws 

Choosing a ROUTE 53 Routing Policy
Jake  Murphy

Jake Murphy

1639685880

What Is ROUTE 53? How Does ROUTE 53 Work?

Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service.

So lets first understand what DNS is and then we can get into the details of ROUTE53 can offer.

When you hit an URL if you believe there is some sort of magic that happens that the website you requested appears on your browser. then that magic is brought to you by our very own DNS not all of that but the initial part of it.
So let's suppose we have our USER here and it requested to access the site on the browser let suppose pythoholic.com. then what happens here is the first call goes to our DNS server that translates or resolves the pythoholic.com to a machine-readable IP address and returns the response back of the IP. and then the client sends the request back to the webserver with the resolved IP and gets the content as a response back to the client.
And we saw what DNS can do for us is that it can resolve the hostname to an IP address which denotes the way to our WEB server.

I hope now you have an understanding of what DNS is. Let's get back to route 53.

#route  #aws 

What Is ROUTE 53? How Does ROUTE 53 Work?