Javascript 如何从Laravel views/templates目录提供单页AngularJS应用程序？

我正在尝试结合一个SPA angular应用程序，该应用程序可以利用Laravel的功能，如csrf保护。我可以将整个AngularJS应用程序放在Laravel的

public/

目录中，但我不确定这样做是否正确

我要找的是guidace，它介绍了如何能够提供一个

index.php

，可以与Laravel进行交互，单页AngularJS应用程序将接管该应用程序。在我的例子中，Laravel是单页应用程序的API

问题是：

Laravel路由是为

/app3

定义的，它从

模板/

返回

index.php

当然，我更愿意为

/app

定义路由，但是，所有AngularjS资产都位于

public/app/

中，请求

app/

会返回一个默认目录列表，因为

/app

中没有index.php/html。只需将

index.php

放在

public/

中，就会得到一个空白页面，因为出于某种原因，服务器从未解析过php。将

index.php

更改为

index.html

是可行的，但是如何利用像Laravels csrf保护这样的功能呢

index.php

正确加载所有AngularJS资源，并且没有控制台错误

单击

index.php

中的侧栏链接，通常会返回一个AngularJS模板，该模板应放在

index.php

中，而当目录不包含index.php/html时，会加载默认目录列表

为什么AngularJS模板无法加载到

index.php中

将单页AngularJS应用程序与Laravel结合的最佳方式是什么？
假设您有以下路线：

Route::get('/app3', 'RouteController@serveAngular');

然后你有一个控制器

class RouteController extends BaseController{
    public function serveAngular(){
        return View::make('angular/index');
    }
}

那你就有

-views
    -angular
        -index.blade.php

然后在index.blade.php中只包含角度标记

<div ng-app="myApp">

这样你就可以很容易地把它挂在你的角度模板上

@section('scripts')
<script src="/path/to/my/AnguularJS.js"></script>
@stop

@节（“脚本”）
@停止

希望这有帮助。
终于找到了。问题是我的AngularJS路线链接错误

以下是我的工作配置：




sidebar.html

希望这能帮助那些想要将移动AngularUI与Laravel结合起来的人

感谢@Ohgodwhy澄清AngularJS模板需要位于
public/
目录中。
您可以在public文件夹中执行类似操作

公用文件夹中每个目录的内容：

public/app : Contains all AngularJS related JavaScript files (controllers and lib directories)
public/app/controllers: Contains all AngularJS controllers
public/app/lib : This directory will contain all AngularJS core files. You can also load AngularJS from a CDN network. 
public/css : Contains all CSS files.
public/js : Contains all regular JavaScript files for our UI.

你可以在网站上阅读一篇完整的文章

为什么不能将HTML标记转换为视图，并在路由所利用的控制器中呈现它？AngularJS只是HTML标记和JavaScript，您应该能够钩住头变量并包含AngularJS，然后将AngularJS放入视图中，并在到达调用控制器的路由时从控制器返回Angular视图，在本例中为
/app3
@Ohgodwhy，请详细说明。我不太明白。每个AngularJS templateUrl是否都需要一个Laravel定义的路由？如何具体配置？您是说将所有HTML和AngularJS代码包含到Laravel控制器中？如果我理解正确，这不是有点难看吗？我在下面举了一个例子。对于集成角度应用程序，我不认为我的方法难看，但我以前犯过多次错误：这里有一个在Laravel中集成的Angular的新版本的例子，除了没有控制器之外，这是我已经拥有的。Laravel的路由定义在那里链接了一个闭包，并返回index.php（可以很容易地是index.blade.php），但是，这个方法的问题是AngularJS模板没有包含在
index.php
中，但是作为一个单独的链接。我不确定你所说的
AngularJS模板是什么意思，它没有包含在index.php中，而是作为一个单独的链接。你能帮我贴点东西让我看看我们在说什么吗？请访问
http://persianturtle.com/app3/
并单击侧边栏中的链接。也许这是解释我的问题的最简单方法。@RaphaelRafatpanah左边的链接不应该自动填充右边的数据，而不是重新加载页面吗？是的。不幸的是，我还没有弄清楚如何配置SPA，使其在内部自动繁殖。是否所有模板文件都需要位于
public/
目录中？如果是，应将
设置为什么？
Laravel
routes.php

...
$router->get('/app3', function() {
    return view('app3.index');
});

AngularJS
index.php

<base href="/" />

...

<!-- Sidebars -->
<div ng-include="'/app/sidebar.html'" 
        ui-track-as-search-param='true'
        class="sidebar sidebar-left"></div>

demo.js

  app.config(function($routeProvider) {
  $routeProvider.when('/',              {templateUrl: 'app/home.html', reloadOnSearch: false});
  $routeProvider.when('/app/',              {templateUrl: 'app/home.html', reloadOnSearch: false});
  $routeProvider.when('/app/scroll',        {templateUrl: 'app/scroll.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/toggle',        {templateUrl: 'app/toggle.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/tabs',          {templateUrl: 'app/tabs.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/accordion',     {templateUrl: 'app/accordion.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/overlay',       {templateUrl: 'app/overlay.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/forms',         {templateUrl: 'app/forms.html', reloadOnSearch: false});
  $routeProvider.when('/app/dropdown',      {templateUrl: 'app/dropdown.html', reloadOnSearch: false});
  $routeProvider.when('/app/drag',          {templateUrl: 'app/drag.html', reloadOnSearch: false});
  $routeProvider.when('/app/carousel',      {templateUrl: 'app/carousel.html', reloadOnSearch: false});
  $routeProvider.when('/app/toggleLegacy',  {templateUrl: 'app/toggleLegacy.html', reloadOnSearch: false});

sidebar.html

  <a class="list-group-item" href="/app3/#/app">Home <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/scroll">Scroll <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/toggle">Toggle <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/tabs">Tabs <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/accordion">Accordion <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/overlay">Overlay <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/forms">Forms <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/dropdown">Dropdown <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/test/invoice">Invoice <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/test">Test <i class="fa fa-chevron-right pull-right"></i></a>

public/app : Contains all AngularJS related JavaScript files (controllers and lib directories)
public/app/controllers: Contains all AngularJS controllers
public/app/lib : This directory will contain all AngularJS core files. You can also load AngularJS from a CDN network. 
public/css : Contains all CSS files.
public/js : Contains all regular JavaScript files for our UI.