Question

我正在尝试结合基于Mobile Angular UI的SPA角度应用程序，它可以利用Laravel的功能，如csrf保护。我可以将整个AngularJS应用程序放在Laravel的public/目录中，但我不确定这是否是正确的方法。

我正在寻找的是关于如何能够提供可以与Laravel交互的index.php的guidace，单个AngularJS应用程序将接管该Laravel。就我而言，Laravel是单页面应用程序的API。

问题：

Laravel路线定义为/app3，从index.php

templates/

当然，我更喜欢为/app定义路由，但是，所有AngularjS资产都位于public/app/，请求app/返回默认目录列表，因为那里/app中没有index.php / html。简单地将index.php放在public/中会导致出现空白页面，因为出于某种原因，PHP永远不会被服务器解析。将index.php更改为index.html有效，但是我如何利用Laravels csrf保护等优势？

index.php正确加载所有AngularJS资源，没有控制台错误。
点击index.php的侧边栏链接，该链接通常会返回应放在index.php内的AngularJS模板，而是加载当目录不包含索引时显示的默认目录列表。 PHP / HTML

为什么AngularJS模板无法在index.php内加载？

将单页AngularJS应用与Laravel结合使用的最佳方法是什么？

Answer 1

终于明白了。问题是我的AngularJS路线链接错了。

以下是我的工作配置：

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>

希望这可以帮助那些想要将mobile-angular-ui与Laravel结合起来的人！

感谢@Ohgodwhy澄清AngularJS模板需要位于public/目录中。

Answer 2

所以，假设你有这条路线：

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">

您不需要将ng-app定义放在HTML标记的顶部，只是应用程序容器的顶部。

当然，您还必须包含AngularJS，因此您的主要模板将包含以下内容：

@yield('scripts')
</head>

通过这种方式，您可以轻松地在角度模板中将其挂钩

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

希望这有帮助。

Answer 3

您可以在公开文件夹

中执行此类操作

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

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.

您可以阅读

的完整文章

http://deepdivetuts.com/create-laravel-and-angular-single-page-application-for-beginners-only

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

3 个答案: