我刚刚设法将Laravel和AngularJS 2设置在一起..尽管设置非常简单，即我有一个主要的welcome.blade.php文件显示为索引页，但是，我想进行某种导航，您可以在其中切换页面，角度将从各种刀片模板中提取信息，这就是我卡住的地方， 我了解如何在角度等中生成导航，但我不确定要向@component（{template：xxxxxx}）字段添加什么，以便它拉入刀片模板。有没有人有任何关于如何在 angular 组件中渲染这些外部模板的示例？以下是我到目前为止所拥有的，它将我的第一个 Angular 2 应用程序注入默认的 laravel 欢迎页面。
app.components.ts
///<reference path="../../../public/js/angular2/core.d.ts"/>
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
引导.ts
///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>
/* the above file fixes an issue with promises etc - was getting loads of errors then found this http://stackoverflow.com/questions/35382157/typescript-build-getting-errors-from-node-modules-folder*/
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
欢迎光临.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<script src="{{ url('/') }}/js/es6-shim/es6-shim.min.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system-polyfills.js"></script>
<script src="{{ url('/') }}/js/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2-polyfills.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system.src.js"></script>
<script src="{{ url('/') }}/js/rxjs/bundles/Rx.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/angular2.dev.js"></script>
<script type="text/javascript">
System.config({
"baseURL": '/js',
"defaultJSExtensions": true,
"packages": {
typescript: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('typescript/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>
<my-app>Loading...</my-app>
</div>
</div>
</body>
</html>
也许我大错特错了，但据我所知，Angular 无法渲染刀片模板？它们首先由Laravel渲染，然后作为常规HTML发送，并在模板上填写任何内容。然后初始化 Angular 并使用 HTML 文档。我通常喜欢让 Angular 处理我的所有路由，并通过将路由中的任何未定义路由重定向到单个索引页面.php使其成为 SPA，Angular 的路由器将在其中呈现不同的视图。可悲的是，我还没有过渡到 Angular 2，所以我不确定路由器是如何设置的。但这只是我使用的路由文件，可以说它有一个"全部"，可以重定向到索引页面。
Route::group(["prefix" => "api"], function() {
Route::resource("users", "UsersController");
Route::group(["prefix" => "users"], function() {
Route::get("{id}/places", "UsersController@getPlaces");
Route::get("{id}/searches", "UsersController@getSearches");
});
Route::resource("places", "PlacesController");
Route::resource("searches", "SearchesController");
Route::group(["prefix" => "auth"], function() {
Route::get("/", "AuthController@GetAuth");
Route::get("logout", 'Auth'AuthController@logout');
});
});
Route::get('/', 'RedirectController@toAngular');
// Authentication Routes...
Route::get('login', 'RedirectController@toAngular'); // Override, let Angular handle login form
Route::post('login', 'Auth'AuthController@login');
Route::get('logout', 'Auth'AuthController@logout');
// Registration Routes...
Route::get('register', 'RedirectController@toAngular');
Route::post('register', 'Auth'AuthController@register');
// Password Reset Routes...
Route::get('password/reset/{token?}', 'Auth'PasswordController@showResetForm');
Route::post('password/email', 'Auth'PasswordController@sendResetLinkEmail');
Route::post('password/reset', 'Auth'PasswordController@reset');