Laravel 5 e Angular 2
di Rocco Macellaro
in questo articolo vedremo come creare un’applicazione di esempio con il framework php laravel 5 e Angular2. Vedremo come installare laravel e tutte le necessarie dipendenze per utilizzare angular2 come motore per la realizzazione di webapp di ultima generazione. l’articolo prevede che siano già presenti sulla macchina di test i tools necessari per procedere nella realizzazione degli esempi, sono quindi necessari composer, nodejs, php.
Installazione di Laravel
Laravel utilizza Composer per la gestione delle dipendenze, pertanto se non presente sulla macchina di sviluppo procedere nell’installazione di composer.
1 | curl -sS https://getcomposer.org/installer | php |
a questo punto ho spostato il file composer.phar nella cartella bin locale, in questo modo:
1 | mv Composer.phar usr/local/bin/composer |
ecco fatto, adesso sono disponibili i comandi di composer da terminal.
Dopo esserci assicurati di aver installato e disponibile per l’utilizzo composer, possiamo procedere con la creazione di un progetto laravel, prima di tutto scarichiamo l’installar di laravel via composer, da terminale digitiamo:
1 | composer global require “laravel/installer" |
quindi creiamo il nostro progetto di esempio nella cartella che desideriamo, con il seguente comando:
1 | composer create-project --prefer-dist laravel/laravel laravel-angular-sample |
Installazione Angular2
al termine, avremo la nostra cartella di progetto con laravel installato, possiamo a questo punto procedere con l’installazione delle dipendenza necessarie per l’utilizzo di angular 2. Apriamo il file package.json nella cartella di progetto “laravel-angular-sample” (o come avete chiamato il vostro progetto al punto precedente) e modifichiamolo con il seguente codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | { "name" : "LaravelAngularSample", "version" : "1.0.0", "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch", "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-9", "laravel-elixir-vue": "^0.1.4", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.14.0", "vue": "^1.0.26", "vue-resource": "^0.9.3", "elixir-typescript": "2.0.0", "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.0.2", "typings":"^1.3.2" } } |
a questo punto procediamo con la creazione dei file necessari per typescript, quindi creiamo nella root del progetto i seguenti file: tsconfig.json
1 2 3 4 5 6 7 8 9 10 11 12 | { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } } |
e il file typings.json
1 2 3 4 5 6 7 | { "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } } |
ora possiamo scaricare tutte li dipendenze necessarie, apriamo il terminal e posizioniamoci nella root della cartella di progetto, digitiamo quindi (ovviamente questo richiede che sia installato nodejs sulla macchina, quindi se non presente installiamo prima nodejs):
1 | npm install |
al termine dell’installazione, troveremo nella root del progetto la cartella node_modules, dobbiamo modificare il file presente al percorso node_modules\elixer-typescript\index.js e commendare la linea:
1 | //.pipe($.concat(paths.output.name)) |
ora dobbiamo creare la cartella che conterrà tutti i nostri file typescript dell’applicazione angular, creiamo la cartella nel percorso: resources>assets>typescript, all’interno della cartella appena creata andiamo a scrivere i seguenti file:
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 | ///<reference path="../../../typings/index.d.ts"/> import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
1 2 3 4 5 6 | import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular App</h1>' }) export class AppComponent { } |
main.ts
1 2 3 4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); |
nella root del progetto individuare il file gulpfile.js e modificarlo come segue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | const elixir = require('laravel-elixir'); require('laravel-elixir-vue'); require('elixir-typescript'); elixir(function(mix) { mix.sass('app.scss') .webpack('app.js') .copy('node_modules/@angular', 'public/@angular') .copy('node_modules/anular2-in-memory-web-api', 'public/anular2-in-memory-web-api') .copy('node_modules/core-js', 'public/core-js') .copy('node_modules/reflect-metadata', 'public/reflect-metadata') .copy('node_modules/systemjs', 'public/systemjs') .copy('node_modules/rxjs', 'public/rxjs') .copy('node_modules/zone.js', 'public/zone.js') .typescript( [ 'app.component.ts', 'app.module.ts', 'main.ts' ], 'public/app', { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } ); }); |
all’interno del file resources/assets//js/bootstrap.js commendare le righe :
1 2 3 4 | /*window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};*/ |
a questo punto da terminale eseguiamo il comando:
1 | gulp |
1 2 3 4 | installare gulp npm install gulp-cli -g npm install gulp -D touch gulpfile.js |
restano pochi ultimi passi da eseguire, creiamo il file nella directory public del progetto laravel: systemjs.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': '@angular/core/bundles/core.umd.js', '@angular/common': '@angular/common/bundles/common.umd.js', '@angular/compiler': '@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': '@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': '@angular/http/bundles/http.umd.js', '@angular/router': '@angular/router/bundles/router.umd.js', '@angular/forms': '@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'rxjs', 'angular2-in-memory-web-api': 'angular2-in-memory-web-api', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this); |
ora non ci resta che modificare il file della pagina principale del progetto laravel, ovvero welcome.blade.php come segue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel 5.3 - Angular 2</title> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="{{URL::asset('core-js/client/shim.min.js')}}"></script> <script src="{{URL::asset('zone.js/dist/zone.js')}}"></script> <script src="{{URL::asset('reflect-metadata/Reflect.js')}}"></script> <script src="{{URL::asset('systemjs/dist/system.src.js')}}"></script> <script src="{{URL::asset('systemjs.config.js')}}"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> |
le modifiche sono terminate non ci resta che eseguire il comando:
1 | php artisan serve |
che avvierà un server locale sull’indirizzo http://localhost:8000, aprire un browser e recarsi all’indirizzo per visualizzare il risultato.