{"id":22576,"date":"2022-03-30T15:32:02","date_gmt":"2022-03-30T20:32:02","guid":{"rendered":"https:\/\/niixer.com\/?p=22576"},"modified":"2022-03-30T16:11:49","modified_gmt":"2022-03-30T21:11:49","slug":"angular-wordpress","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/","title":{"rendered":"Angular WordPress"},"content":{"rendered":"\n<p>WordPress desde el 2015 utilizaba un lenguaje<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/XML\/XML_introduction\" target=\"_blank\" rel=\"noreferrer noopener\"> XML<\/a> el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones <strong>api rest con <a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a><\/strong>, la cual da hincapi\u00e9 a un lenguaje mas optimizado y entendible para programar en Font End sin la obligaci\u00f3n estricta de aprender php + plantillas de WordPress; pero primero hablemos de que es este lenguaje.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 es Angular?<\/h3>\n\n\n\n<p><a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a> es un Framework de <a href=\"https:\/\/niixer.com\/index.php\/2020\/11\/16\/javascript-el-futuro-del-desarollo-de-aplicaciones-moviles\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript <\/a>escrito en TypeScript de c\u00f3digo abierto, cuyo fin es realizar aplicaciones web en una sola pagina. Usando la arquitectura  Modelo-Vista-Controlador (MVC), estas tres partes constan.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Modelo:<\/strong> Se encarga de la administraci\u00f3n de la informaci\u00f3n.<\/li><li><strong>Vista:<\/strong> Se presenta la informaci\u00f3n.<\/li><li><strong>Controlador:<\/strong> Genera una respuesta e interact\u00faa con el modelo.<\/li><\/ul>\n\n\n\n<p>Por lo tanto, en un contexto de programaci\u00f3n web, la analog\u00eda seria <a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a> ser\u00e1 el modelo, HTML seria la vita y por otro lado JavaScript seria el controlador.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/imagen-Angular-2.jpg\" alt=\"\" class=\"wp-image-22724\" width=\"1137\" height=\"558\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/imagen-Angular-2.jpg 907w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/imagen-Angular-2-300x147.jpg 300w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/imagen-Angular-2-768x377.jpg 768w\" sizes=\"auto, (max-width: 1137px) 100vw, 1137px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo implementar Angular en WordPress?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. Librer\u00edas y entorno de trabajo  <\/h4>\n\n\n\n<p>Tener previamente instalado <a href=\"https:\/\/nodejs.org\/en\/about\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node JS<\/a> es el primer paso, ya que este administrara los nodos en un sistema de ventanas. Posteriormente instalamos angular-cli <em><code>npm install ''g @angular\/cli;<\/code><\/em> , esto con el fin de crear posteriormente el entrono de trabajo de angular <code><em>ng new miProyecto<\/em>;<\/code> en este se instalan las librer\u00edas necesarias para el inicio del proyecto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2.Establecer servicio de conexi\u00f3n de WordPress<\/h4>\n\n\n\n<p>En este caso angular-cli es el encargado de construir todos los archivos que se emplearan para nuestro servicio. Se debe colocar lo siguiente en consola <em><code>ng generate service wp<\/code>; <\/em> o la alternativa de <code>ng g service wp<\/code>;, esto crea dos archivos que se ubican en la carpeta <em>app<\/em> con nombres <em>wp.service.spec.ts y wp.service.ts.<\/em><\/p>\n\n\n\n<p>No obstante, para poder emplear el formato <a href=\"https:\/\/www.json.org\/json-en.html\" target=\"_blank\" rel=\"noreferrer noopener\"> JSON<\/a> es necesario emplear la librer\u00eda <em>HttpClient <\/em>que viene empleado en la paqueter\u00eda de Angular. Para as\u00ed generar el siguiente resultado en <em>app.module.ts<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><code><strong>importar<\/strong> {HttpClientModule} desde '@angular\/common\/http';<\/code><\/p>\n\n\n\n<p class=\"has-text-align-left\"><code>@NgModule({<br>   declaraciones: [AppComponent],<br>   importaciones: [<br>      BrowserModule,<br>      HttpClientModule<br>   ],<br>   proveedores: [],<br>   bootstrap: [AppComponent]<br>})...<\/code><\/p>\n\n\n\n<p> Para as\u00ed abrir nuestro archivo <em>wp.service.ts<\/em> para entonces crear los m\u00e9todos para recibir la informaci\u00f3n del blog a trav\u00e9s del formato<a href=\"https:\/\/www.json.org\/json-en.html\" target=\"_blank\" rel=\"noreferrer noopener\"> JSON<\/a> empleando la API.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb-1024x536.webp\" alt=\"\" class=\"wp-image-22734\" width=\"1138\" height=\"596\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb-1024x536.webp 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb-300x157.webp 300w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb-768x402.webp 768w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb-390x205.webp 390w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/thumb.webp 1200w\" sizes=\"auto, (max-width: 1138px) 100vw, 1138px\" \/><\/figure>\n\n\n\n<p> A continuaci\u00f3n se presentara el siguiente c\u00f3digo de como deber\u00eda quedar nuestro <em>WpService.ts<\/em>.<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<p><code><strong>importar<\/strong> { Inyectable } desde '@angular\/core';<\/code><br><code><strong>importar<\/strong> { HttpClient } desde '@angular\/common\/http';<\/code><\/p>\n\n\n\n<p><code>@Injectable()<\/code><br><code>export <strong>class<\/strong> WpService {<\/code><br>      <code><strong>public<\/strong> URL <strong>=<\/strong> 'https:\/\/resultadosdigitais.com.br\/blog\/'; API<br>   <strong>p\u00fablica =<\/strong> `${ <strong>esta<\/strong> .URL}wp <strong>-<\/strong> json\/wp\/v2\/posts`;<\/code><\/p>\n\n\n\n<p>      <code>constructor( <strong>private<\/strong> http: HttpClient) { }<\/code><br>      <code>getAll(id: number) {<\/code><br>             <code><strong>return this<\/strong> .http.get(`${<strong>este<\/strong> .API}?_embed <strong>&amp;<\/strong> por_p\u00e1gina <strong>=<\/strong> ${id}`);<br>   }<\/code><br>      <code>getSinglePost(id: <strong>string<\/strong> ) {<\/code><br>            <code><strong>return this<\/strong> .http.get(`${ <strong>this<\/strong> .API}?_embed <strong>&amp;<\/strong> slug <strong>=<\/strong> ${id}`) ;<br>   }<br>}<\/code><\/p>\n\n\n\n<p>Concurriendo con lo anterior se puede observar el m\u00e9todo<code> getAll(id: number)<\/code> , el cual es utilizado para solicitar la cantidad de publicaciones las cuales se pretenden visualizar. <\/p>\n\n\n\n<p>Por otro lado, viene por defecto <code>http:\/\/url\/wp-json\/wp\/v2\/posts<\/code> el cual da una vista de los \u00faltimos 10 art\u00edculos, para eso se emplea el filtro <em>per_page<\/em> cuyo objetivo es  permitir tener hasta 100 publicaciones. <\/p>\n\n\n\n<p>No \u00f3bstate, otro m\u00e9todo empleado es <code>getSinglePost(id: string)<\/code> el cual solo se puede visualizar un solo post el cual no se busca por su ID utiliza un filtro <em>slug<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3.  \u00bfC\u00f3mo crear componentes para WordPress?<\/h4>\n\n\n\n<p>En primer lugar se tiene que generar nuestros diferentes archivos para as\u00ed visualizar todos los blogs empleando angular-cli <code>ng g component blog;<\/code><\/p>\n\n\n\n<p><em>blog.component.ts<\/em>.<\/p>\n\n\n\n<p><code>...<br><strong>importar<\/strong> { WpService } desde '..\/wp.service';<br>...<br>\/\/ declaramos como cualquier nuestra variable feed<br>feed: any;<\/code><\/p>\n\n\n\n<p><code>constructor( wp <strong>privado<\/strong> : WpService) { }<\/code><\/p>\n\n\n\n<p><code>ngOnInit() {<br>   <strong>this<\/strong> .getPosts();<br>} getPosts<\/code><\/p>\n\n\n\n<p><code><strong>privados<\/strong> () {<br>   <strong>this<\/strong> .wp.getAll (100)<br>   .subscribe (datos <strong>=&gt;<\/strong> {<br>   <strong>this<\/strong> .feed <strong>=<\/strong> datos;<br>   });<br>  }<br>}<\/code><\/p>\n\n\n\n<p>El&nbsp;<em>blog.component.html<\/em>.<\/p>\n\n\n\n<p><code>&lt;div class=\"container\"&gt;<br>    &lt;div class=\"row\"&gt;<br>       &lt;div class=\"col-md-12\" *ngfor=\"let f of feed\"&gt;<br>           &lt;img class=\"img-fluid\" style=\"height : 500px !important; width: 100%\" [src]=\"f?._embedded['wp:featuredmedia']['0'].source_url\" alt=\"{{f.title.rendered}}\"&gt;<br>            &lt;h2 class=\"text-center\"&gt;{{f.title.rendered}}&lt;\/h2&gt;<br>             &lt;p class=\"txt-lead\"&gt;Autor: {{f?._embedded['author']['0']. nombre}} &lt;\/p&gt;<br>             &lt;p [innerhtml]=\"f.content.rendered\"&gt;&lt;\/p&gt;<br>          &lt;\/div&gt;<br>      &lt;\/div&gt;<br>&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p>Trabajar con el sitio de trabajo de Angular.JS es eficiente y combinado con WordPress se puede emplear un SPA (aplicaci\u00f3n de una sola p\u00e1gina), con todos los controladores de CMS  y complementos que ofrece WordPress, este es un atajo interesante.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/777-7779958_a-website-that-should-represent-your-thoughts-beautifully.jpg\" alt=\"\" class=\"wp-image-22728\" width=\"1139\" height=\"567\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/777-7779958_a-website-that-should-represent-your-thoughts-beautifully.jpg 820w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/777-7779958_a-website-that-should-represent-your-thoughts-beautifully-300x149.jpg 300w, https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/777-7779958_a-website-that-should-represent-your-thoughts-beautifully-768x382.jpg 768w\" sizes=\"auto, (max-width: 1139px) 100vw, 1139px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Configuraci\u00f3n del tema<\/h3>\n\n\n\n<p>Para empezar se tiene que crear un nuevo tema, para esto se emplea el comando  <kbd>_tk<\/kbd> <strong> <\/strong>tema repetitivo para empezar. El siguiente es la implementaci\u00f3n del  <code><kbd>_s <\/kbd><\/code>que es tema de guiones bajos autom\u00e1tico pero con Bootstrap de Twitter implementado.<\/p>\n\n\n\n<p>Ahora se puede implementar el <code><kbd> _tk <\/kbd><\/code>en el tema de inicio, pero para esto se necesitan los <code><kbd> npm <\/kbd><\/code>de los paquetes de Angular.js desde su directorio de temas  (estamos usando el nombre&nbsp;<code>angular-bootstrap<\/code>).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Primero de debe inicializar <code><kbd>npm<\/kbd><\/code> dentro del directorio de temas se usa el <code>npm init<\/code> con el fin de crear el <code>package.json<\/code>.<\/li><li>Por otra parte se una <code>--save<\/code> bandera en nuestro&nbsp;<code>npm install angular angular-route --save<\/code> este comando, le indicamos&nbsp;<code>npm<\/code> que agregue los m\u00f3dulos como dependencias a nuestro proyecto.<\/li><\/ul>\n\n\n\n<p>Para as\u00ed tener tus paquetes en tu&nbsp;<code>node_modules<\/code> directorio dentro de tu tema.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Construcci\u00f3n de Rutas<\/h3>\n\n\n\n<p>Las rutas conforman las paginas que son especificas en tu blog Podemos definir uno para nuestro&nbsp;<code>main.html<\/code> de forma parcial y configurarlo para que muestre en la p\u00e1gina de \u00edndice de nuestro WordPress.<\/p>\n\n\n\n<p>Antes de proceder aseg\u00farese que la aplicaci\u00f3n de Angular.js este definida por medio  del&nbsp;<code>ng-app<\/code>a tributo y&nbsp;<code>header.php<\/code> haga lo siguiente:<\/p>\n\n\n\n<p><code>&lt;!DOCTYPE html&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;html &lt;?php language_attributes(); ?&gt; ng-app=\"wp\"&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;head&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;base href=\"\/\"&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p>Ahora adentro&nbsp;<code>partials\/main.html<\/code> agrega esto:<\/p>\n\n\n\n<p><code>&lt;ul&gt;&lt;font&gt;&lt;\/font&gt;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><\/p>\n\n\n\n<p>       <code>&lt;li ng-repeat=\"post in posts\"&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p>           <code>&lt;a href=\"{{post.slug}}\"&gt;&lt;font&gt;&lt;\/font&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><\/p>\n\n\n\n<p>               <code>{{post.title}}&lt;font&gt;&lt;\/font&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><\/p>\n\n\n\n<p><code>&nbsp;    &lt;\/a&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&nbsp;  &lt;\/li&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p><code>&lt;\/ul&gt;&lt;font&gt;&lt;\/font&gt;<\/code><\/p>\n\n\n\n<p>Para culminar dentro de&nbsp;<code>index.php<\/code>de , directamente despu\u00e9s&nbsp;<code>get_header.php()<\/code>de , agregue el atributo <a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>&nbsp;<code>ng-view<\/code> en una&nbsp;<code>di v<\/code>etiqueta.<\/p>\n\n\n\n<p><code>&lt;div<\/code> <code>ng-view=\"\"&gt;&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p>Actualice el \u00edndice de su WordPress, y ahora se mostrar\u00e1 una lista de vi\u00f1etas de las publicaciones de su blog en la p\u00e1gina de inicio.<\/p>\n\n\n\n<p>Esto se debe a la&nbsp;<code>ng-controller<\/code>invocaci\u00f3n del&nbsp;<code>Main<\/code>controlador&nbsp;<code>scripts.js<\/code> y al&nbsp;<code>ng-view<\/code> atributo que especifica d\u00f3nde debe mostrarse <a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Habilitando WP-API<\/h3>\n\n\n\n<p>Para que <a href=\"https:\/\/niixer.com\/index.php\/2020\/10\/15\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">Angular<\/a> se active con WordPress, debemos habilitar el complemento WP-API REST.&nbsp;Lo cual no es muy complejo, puesto que es solo la instalaci\u00f3n de un complemento.<\/p>\n\n\n\n<p>Para ello descargue e instale el complemento desde git y ejecute lo siguiente en su&nbsp;<code>plugins<\/code>directorio:<\/p>\n\n\n\n<p><code>git clone git@github.com:WP-API\/WP-API.git json-rest-api<\/code><\/p>\n\n\n\n<p>Luego habilite el complemento en su&nbsp;<code>wp-admin<\/code>panel.&nbsp;Podr\u00e1 ver la salida JSON una&nbsp;<code>your-wordpress.com\/wp-json<\/code> vez que est\u00e9 habilitada.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Connecting Angular 4 with Headless WordPress Rest API\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/2qR0vE9W8Bg?start=71&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><strong>Auto<\/strong>r: <a href=\"https:\/\/niixer.com\/index.php\/2022\/02\/22\/que-es-un-dominio-3\/\">Juan Sebasti\u00e1n Parra L\u00f3pez<\/a>.<\/p>\n\n\n\n<p><strong>Editor:<\/strong> <a href=\"https:\/\/niixer.com\/?s=+Carlos+Iv%C3%A1n+Pinz%C3%B3n+Romero\">Carlos Ivan Pinzon Romero.<\/a><\/p>\n\n\n\n<p><strong>Universidad:<\/strong> <a href=\"https:\/\/www.ucentral.edu.co\/\">Universidad Central<\/a>.<\/p>\n\n\n\n<p><strong>C\u00f3digo:<\/strong> UCPW \u2013 7.<\/p>\n\n\n\n<p><strong>Fuentes<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">H\u00e9ctor, A. (2018). Conectar WordPress con Angular a trav\u00e9s de REST API. medium. <a href=\"https:\/\/hectorcanaimero.medium.com\/conectar-wordpress-con-angular-a-trav%C3%A9s-de-rest-api-1fc1cb9fc3af\">https:\/\/hectorcanaimero.medium.com\/conectar-wordpress-con-angular-a-trav%C3%A9s-de-rest-api-1fc1cb9fc3af<\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Gon\u00e7alves, \nMJ. (2021). \u00bfQu\u00e9 es Angular y para qu\u00e9 sirve?. Hiberus. <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-angular-y-para-que-sirve\/\">https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-angular-y-para-que-sirve\/<\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Deyimar, A. (2021). \u00bfQu\u00e9 es Angular? \u2013 Una gu\u00eda para principiantes. hostinge. <a href=\"https:\/\/www.hostinger.co\/tutoriales\/que-es-angular\">https:\/\/www.hostinger.co\/tutoriales\/que-es-angular<\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Whitbread  A. (2021). Creaci\u00f3n de aplicaciones de una sola p\u00e1gina con WordPress y Angular.js. envato-tuts. <a href=\"https:\/\/code.tutsplus.com\/tutorials\/creating-single-page-applications-with-wordpress-and-angularjs--cms-25095\">https:\/\/code.tutsplus.com\/tutorials\/creating-single-page-applications-with-wordpress-and-angularjs--cms-25095<\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Web Dev Profesh. (2017). Connecting Angular 4 with Headless WordPress Rest API. [Video]. YouTube. <a href=\"https:\/\/www.youtube.com\/watch?v=2qR0vE9W8Bg&amp;t=15s&amp;ab_channel=WebDevProfesh\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=2qR0vE9W8Bg&amp;t=15s&amp;ab_channel=WebDevProfesh \n<\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Francisco, A. (2019). WordPress con Angular[imagen]. <a href=\"http:\/\/medium.https:\/\/miro.medium.com\/max\/1400\/1*v-hY4tSOtYLrvTz1STSfCQ.jpeg\" target=\"_blank\" rel=\"noreferrer noopener\">medium.https:\/\/miro.medium.com\/max\/1400\/1*v-hY4tSOtYLrvTz1STSfCQ.jpeg <\/a> <\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Alvantia.(2018). imagen angular. [imagen]. <a href=\"https:\/\/www.alvantia.com\/wp-content\/uploads\/2018\/10\/imagen-Angular-2.jpg\">https:\/\/www.alvantia.com\/wp-content\/uploads\/2018\/10\/imagen-Angular-2.jpg<\/a>  <\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Flajszer, P. (2021). C\u00f3mo convertir una respuesta API en una miniatura de clase C#. [imagen]. <a href=\"https:\/\/i0.wp.com\/fullduck.dev\/wp-content\/uploads\/2021\/05\/thumb.png?w=1200&amp;ssl=1\">https:\/\/i0.wp.com\/fullduck.dev\/wp-content\/uploads\/2021\/05\/thumb.png?w=1200&amp;ssl=1<\/a><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones api rest con Angular, la cual da hincapi\u00e9 a un lenguaje mas optimizado y entendible para programar en Font End sin la obligaci\u00f3n estricta de aprenderSeguir Leyendo<\/p>\n","protected":false},"author":323,"featured_media":22718,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[1492],"tags":[344,345,364,31],"class_list":["post-22576","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-angularjs","tag-framework","tag-paginas-web-2","tag-tecnologia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular WordPress<\/title>\n<meta name=\"description\" content=\"WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular WordPress\" \/>\n<meta property=\"og:description\" content=\"WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-30T20:32:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-30T21:11:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"587\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juan Sebasti\u00e1n Parra Lopez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Sebasti\u00e1n Parra Lopez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular WordPress","description":"WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Angular WordPress","og_description":"WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones","og_url":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2022-03-30T20:32:02+00:00","article_modified_time":"2022-03-30T21:11:49+00:00","og_image":[{"width":1400,"height":587,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","type":"image\/jpeg"}],"author":"Juan Sebasti\u00e1n Parra Lopez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Juan Sebasti\u00e1n Parra Lopez","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/"},"author":{"name":"Juan Sebasti\u00e1n Parra Lopez","@id":"https:\/\/niixer.com\/#\/schema\/person\/3ed40b2e173baf4d08202f753a6b775a"},"headline":"Angular WordPress","datePublished":"2022-03-30T20:32:02+00:00","dateModified":"2022-03-30T21:11:49+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/"},"wordCount":889,"commentCount":0,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","keywords":["AngularJS","framework","Paginas web","tecnolog\u00eda"],"articleSection":["WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/","url":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/","name":"Angular WordPress","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","datePublished":"2022-03-30T20:32:02+00:00","dateModified":"2022-03-30T21:11:49+00:00","description":"WordPress desde el 2015 utilizaba un lenguaje XML el cual es un tanto tedioso y molesto. Pues no brindaba muchas opciones como las peticiones","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","width":1400,"height":587},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2022\/03\/30\/angular-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Angular WordPress"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/3ed40b2e173baf4d08202f753a6b775a","name":"Juan Sebasti\u00e1n Parra Lopez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/4b50c65669d3de7d469c6dd92231d9d1515e25895334320e450818258c312c0e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b50c65669d3de7d469c6dd92231d9d1515e25895334320e450818258c312c0e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b50c65669d3de7d469c6dd92231d9d1515e25895334320e450818258c312c0e?s=96&d=mm&r=g","caption":"Juan Sebasti\u00e1n Parra Lopez"},"sameAs":["http:\/\/www.niixer.com"],"url":"https:\/\/niixer.com\/index.php\/author\/jparral2\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/03\/1_v-hY4tSOtYLrvTz1STSfCQ.jpeg","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/22576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/323"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=22576"}],"version-history":[{"count":30,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/22576\/revisions"}],"predecessor-version":[{"id":23019,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/22576\/revisions\/23019"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/22718"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=22576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=22576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=22576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}