Angular 2 y Larahjgvel 5 en Acción

Angular 2 y Laravel 5 en accin
En este tutorial vamos a ver cmo

podemos combinar Angular 2 y Laravel 5,
muchas veces vamos a querer utilizarAngular
2 dentro de un framework, en este caso php, para
en lugar de tener dos proyectos tener todo en el
mismo, as que todo el tema de las vistas lo vamos
a manejar con Angular 2, se supone que es una de
sus grandes virtudes, por qu no explotarla?.
Para este ejemplo vamos a crear una sencilla
configuracin con un par de rutas y una peticin
http para ver cmo funciona la navegacin y las
peticiones http en Angular 2 y Laravel 5.
Recuerda que este tutorial no trata de explicar
cmo funciona laravel 5 o angular 2, sino de
ver cmo podemos complementarlos en un mismo
proyecto, para aprender a trabajar con laravel 5 y
angular 2 existen sus cursos.
Combinar Angular 2 y Laravel 5
Lo primero que debemos hacer es crear una nueva
ruta para representar el tpico index.html de
Angular 2 y de paso creamos otra de la que
simplemente retornaremos un json.
Route::get('/', function () {
return view("bootstrap");
});
Route::get("/api/animals", function() {
return response()->json([['name' => 'dog'],
['name' => 'cat'], ['name' => 'elephant'], ['name'
=> 'elk'], ['name' => 'spider']]);
});
Ahora, crea el archivo
resources/views/bootstrap.blade.php con el
siguiente contenido, el cul es la plantilla base de
una aplicacin con Angular 2, pero antes recuerda
tener instaladas las clases html y form en laravel
5.2 con Laravel Collection.
<html>
<head>
<title>Angular 2 + Laravel 5</title>
{{ Html::script('angular2app/node_modules/angula
r2/bundles/angular2-polyfills.js') }}
{{ Html::script('angular2app/node_modules/syste
mjs/dist/system.src.js') }}
{{ Html::script('angular2app/node_modules/rxjs/bu
ndles/Rx.js') }}
r2/bundles/angular2.js') }}
r2/bundles/router.js') }}
r2/bundles/http.js') }}
<script>
System.config({
packages: {
'angular2app': {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('angular2app/app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<angular2-laravel></angular2-laravel>
</body>
</html>
Cmo puedes ver, nos faltan instalar las
dependencias, as que vamos a crear un archivo
dentro de public llamado package.json con el
siguiente contenido, podramos utilizar el archivo
de la raz pero as pienso que lo tenemos todo
mejor organizado y cada cosa en su sitio.
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"start": "npm run tsc:w"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"typescript": "^1.7.3"
}
}
Para que nuestras dependencias sean instaladas
ejecuta el siguiente comando en la terminal

situado en el directorio public.
npm install
Ahora slo nos queda crear y configurar el archivo
tsconfig.json, el cul har la compilacin de los
archivos typescript a javascript, tambin debe ir
dentro de public.
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Lllegados a este punto ya tenemos todo
configurado y slo nos queda crear la aplicacin
con Angular 2, si revisas el archivo
bootstrap.blade.php que hemos creado, vers que
le decimos a la configuracin de System que
nuestro directorio se va a llamar angular2app, as
que crea este directorio dentro de public con la
siguiente estructura.
Ahora crea el archivo

app/components/home/component.ts y aade el
siguiente cdigo el cual representar el
componente principal de la aplicacin.
import {Component} from "angular2/core"
import {Users} from "../users/component"
import {Movies} from "../movies/component"
import {Api} from "../../services/api"
import {
RouteConfig,
ROUTER_DIRECTIVES,
} from 'angular2/router';
@RouteConfig([
{path:'/users', name: 'Users', component:
Users},
{path:'/movies', name: 'Movies', component:
Movies},
{path:'/', name: 'root', redirectTo: ['/Users']}
])
@Component({
selector: "angular2-laravel",
templateUrl:
'angular2app/app/components/home/home.html',
directives: [ROUTER_DIRECTIVES],
providers: [Api]
})
export class HomeComponent {
animals: Array<any>;
constructor(private api: Api){
this.api.getAnimals().then(
(res) => {
this.animals = res;
},
(error) => {
console.log("Error: " +
JSON.stringify(error));
}
)
}
}
Ya tenemos configurada la aplicacin que utilizar
los componentes Users y Movies y tambin la clase
Api, la cual har la conexin con laravel mediante
peticiones http.
Si te fijas, vers que la propiedad templateUrl del
componente apunta a
angular2app/app/components/home/home.html,
crea el archivo y aade el siguiente cdigo, el cul
mostrar los animales y cada ruta en su momento
gracias a la directiva router-outet.
<ul>
<li *ngFor="#animal of
animals">{{ animal.name }}</li>
</ul>
<br>
<h2>Router Outlet</h2>
<router-outlet></router-outlet>
Ahora vamos a crear los componentes Users y
Movies, primero users, as que crea el archivo
app/components/users/component.ts y aade el
siguiente cdigo.
@Component({
selector: "users",
template: `
<ul>
<li *ngFor="#user of users">{{ user }}</li>
</ul>
`
})
export class Users {
users: Array<any>;
constructor() {
this.users = [
"user1", "user2", "user3", "user4", "user5"
]
}
}
Y ahora app/components/movies/component.ts.
@Component({
selector: "movies",
template: `
<ul>
<li *ngFor="#movie of
movies">{{ movie }}</li>
</ul>
`
})
export class Movies {
movies: Array<any>;
constructor() {
this.movies = [
"movie1", "movie2", "movie3", "movie4",
"movie5"
]
}
}
En este punto necesitamos definir la clase que va a
permitir conectar a Angular 2 y Laravel
5 mediante peticiones http, as que crea el archivo
app/services/api.ts y aade el siguiente cdigo.
import {Injectable} from "angular2/core";
import {Http} from "angular2/http";
@Injectable()
export class Api {
apiUrl: string = "http://localhost:8080/api/";
constructor(private http: Http) { }
getAnimals() {
return new Promise((resolve, reject) => {
this.http.get(this.apiUrl +
"animals").subscribe(
res => {
resolve(res.json());
},
error => {
reject(error);
}
)
})
}
}
Simplemente es una clase que permite ser
inyectada en otras y hace uso de promesas
de ecmascript y la clase http de angular 2.
Finalmente slo nos queda definir el contenido del
archivo boot.ts, l ser el encargado de lanzar la
aplicacin construida con Angular 2.
import {bootstrap} from
"angular2/platform/browser"
import {provide} from 'angular2/core';
import {HomeComponent} from
"./components/home/component"
import {HTTP_PROVIDERS} from "angular2/http";
import {
LocationStrategy,
HashLocationStrategy,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS
} from 'angular2/router';
bootstrap(HomeComponent, [
ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
HTTP_PROVIDERS,
provide(LocationStrategy, {useClass:
HashLocationStrategy})
]);
Ahora slo debes situarte en el directorio public y
ejecutar el siguiente comando para que se generen
los archivos .js a partir de los .ts
npm start
Finalmente slo nos queda levantar el servidor con
el siguiente comando.
php artisan serve --port 8080
Ahora cualquiera de las dos urls deben funcionar

de forma correcta y mostrar la informacin
correspondiente en cada caso, tambin podemos
fijarnos que si apuntamos a http://localhost:8080
seremos redirigidos a http://localhost:8080/#/users
ya que hemos definido esa ruta por defecto cuando

no exista otra.
http://localhost:8080/#/movies
http://localhost:8080/#/users

Angular 2 y Larahjgvel 5 en Acción

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Angular 2 y Larahjgvel 5 en Acción

Transféré par

Droits d'auteur :

Formats disponibles

Angular 2 y Laravel 5 en accin

En este tutorial vamos a ver cmo

ejecuta el siguiente comando en la terminal

Ahora crea el archivo

Ahora cualquiera de las dos urls deben funcionar

ya que hemos definido esa ruta por defecto cuando

Vous aimerez peut-être aussi