Angular 2 y Codeigniter 3

Angular 2 y Codeigniter 3

En este tutorial vamos a ver cómo podemos combinar Angular 2 y Codeigniter 3, muchas veces vamos a querer utilizar Angular 2 dentro de un framework, en este caso php, para en lugar de tener dos proyectos tener todo en el mismo.

Al igual que Angular 2 y Codeigniter 3, también lo podemos combinar de forma sencilla con Laravel 5, prácticamente será lo mismo, una única ruta en php que cargue el archivo base de Angular 2 y del resto se encarga el propio Angular 2.

Para este ejemplo vamos a crear una sencilla configuración con un par de rutas para ver cómo funciona la navegación en Angular 2 y Codeigniter 3.

Enlaces de interés:

Combinar Angular 2 y Codeigniter 3

Lo primero que debemos hacer es crear nuestro proyecto con Codeigniter 3 y un controlador llamado Bootstrap.php en este caso con el siguiente código.


Ahora, crea el archivo application/views/app/index.php con el siguiente contenido, el cuál es la plantilla base de una aplicación con Angular 2.


Cómo puedes ver, nos faltan instalar las dependencias, así que vamos a crear un archivo en la raíz del proyecto de Codeigniter llamado package.json con el siguiente contenido.


Para que nuestras dependencias sean instaladas ejecuta el siguiente comando en la terminal.


Ahora sólo nos queda crear y configurar el archivo tsconfig.json, el cuál hará la compilación de los archivos typescript a javascript.


Lllegados a este punto ya tenemos todo configurado y sólo nos queda crear la aplicación con Angular 2, si revisas el index.php que hemos creado, verás que le decimos a la configuración de System que nuestro directorio se va a llamar angular-app, así que crea este directorio a la misma altura de application y system con la siguiente estructura.

components/
    app/
        app.ts
    users/
        component.ts
    movies/
        component.ts
boot.ts

Si te interesa aprender a trabajar con Angular 2 y Codeigniter 3 aquí tienes cada curso por separado.

Curso de Angular 2
Curso de Codeigniter 3

Abre el archivo app/app.ts y vamos a añadir el siguiente código.


Ya tenemos configurada la aplicación que utilizará los componentes Users y Movies, así que vamos a crearlos, primero users/component.ts


Y ahora movies/component.ts.


Finalmente sólo nos queda definir el contenido del archivo boot.ts.


Ahora sólo debes situarte en la raíz del proyecto y ejecutar el siguiente comando para que se generen los archivos .js a partir de los .ts


Ahora cualquiera de las dos urls deben funcionar de forma correcta, ten en cuenta la ruta de tu servidor, yo estoy en local.

http://localhost:8000/codeigniter/angular2codeigniter/#/movies

http://localhost:8000/codeigniter/angular2codeigniter/#/users

Descargar el código desde github.

Si te ha parecido interesante, no lo dejes aquí

visítanos en cursosdesarrolloweb.es

Tenemos cursos sobre desarrollo web y móvil actualizados donde utilizamos las últimas tecnologías.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies