Question

我正在开发AngularJS单页面应用程序，该应用程序旨在在laravel 5中编写API端点。该API由其他团队开发。项目运行顺利，直到设计更改（通过客户端请求）。他们希望将Angular应用程序与Laravel放在同一个域中。我找到了许多文章来帮助我将角度与laravel融为一体。我找到的最明显的解决方案是user Alias comment in laracast.

我使用Yeoman gulp-angular generator开发了角度应用程序（它在浏览器上进行脚手架，缩小和服务应用程序。所以我可以专注于编写应用程序而不是导入依赖项文件和刷新浏览器）。

现在应用程序已完成80％，我必须将我的dev文件夹与laravel集成。换句话说，我必须在laravel领域内开发应用程序的其余部分。我不想从我的工作流程中删除yeoman gulp-angular生成器，因为它真的很有帮助。但另一方面，当我点击一个网址时，我需要让laravel服务我的应用程序（例如：laravelapp / my / app）。

所以我做了以下事情（根据laracast的用户别名评论）：

我将我的dev文件夹放在laravel public / myapp文件夹
我创建了一个laravel路线来返回我的应用视图。
我创建了一个应该为我的应用程序提供服务的laravel视图。

但是如何从laravel视图中调用我的应用程序？该应用程序已经拥有自己的index.html文件（由yeoman gulp-angular generator提供），它已经包含了自己的角度ui-view元素，还有一些神秘的代码可以开箱即用地注入我的app依赖项。任何建议的人？谢谢。

我的目录结构：

LaravelAPI
|
---- Resources
|    |----------views
|               |--------MyApp.php // laravel view for myapp
|
|----Public
     |----------index.php
     |----------pos // this is my app
                |------bower_components, gulp, etc // generated by yeoman
                |------ ....
                |------src // my src
                        |----- index.html // this file is what i want to be called from laravel view
                |------ dist // minified/production version of my app

我的Laravel视图（MyApp.php） 以下是我通过从myapp复制并粘贴index.html创建的laravel视图。我粘贴的索引html是yeoman gulp-angular generator的编译后版本。我的应用程序名称是pos，所以我为它添加了所有依赖项。

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>fortunixPos</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="pos/bower_components/angular-material/angular-material.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <link rel="stylesheet" href="pos/src/app/index.css">
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body><script type='text/javascript' id="__bs_script__">//<![CDATA[
    // document.write("<script async src='/browser-sync/browser-sync-client.1.7.3.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ui-view></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      // (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      // function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      // e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      // e.src='//www.google-analytics.com/analytics.js';
      // r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      // ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>

    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="pos/bower_components/jquery/dist/jquery.js"></script>
    <script src="pos/bower_components/angular/angular.js"></script>
    <script src="pos/bower_components/angular-animate/angular-animate.js"></script>
    <script src="pos/bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="pos/bower_components/angular-touch/angular-touch.js"></script>
    <script src="pos/bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="pos/bower_components/lodash/dist/lodash.compat.js"></script>
    <script src="pos/bower_components/restangular/dist/restangular.js"></script>
    <script src="pos/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="pos/bower_components/angular-aria/angular-aria.js"></script>
    <script src="pos/bower_components/hammerjs/hammer.js"></script>
    <script src="pos/bower_components/angular-material/angular-material.js"></script>
    <script src="pos/bower_components/angular-utils-pagination/dirPagination.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <script src="pos/src/app/index.js"></script>
    <script src="pos/src/components/navbar/navbar.controller.js"></script>
    <script src="pos/src/app/pos/terminalSession.js"></script>
    <script src="pos/src/app/pos/shoppingCart.js"></script>
    <script src="pos/src/app/pos/pos.controller.js"></script>
    <script src="pos/src/app/pos/payment.js"></script>
    <script src="pos/src/app/pos/itemlist.js"></script>
    <script src="pos/src/app/pos/initCash.controller.js"></script>
    <script src="pos/src/app/main/main.controller.js"></script>
    <!-- endinject -->

    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

这是来自yeoman gulp-angular generator 的实际HTML，当我把它放在laravel视图中时什么都不做：

<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>fortunixPos</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width">            </head> <body>  <div ui-view></div>  <script> // (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= // function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; // e=o.createElement(i);r=o.getElementsByTagName(i)[0]; // e.src='//www.google-analytics.com/analytics.js'; // r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); // ga('create','UA-XXXXX-X');ga('send','pageview'); </script>              </body> </html>

Answer 1

这可能会迟到一点。将所有由yeoman生成的资源（* .html）放在laravel局部视图中。创建如下的角度路线，然后将部分放入自定义模板中。它对我有用。 myPartial.blade.php

  <h1>Home</h1>
  <h3>{{message}}</h3>

您的角度路线文件：

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })
});

你的app.blade.php：

<body>
    <script type="text/ng-template" id="pages/home.html">
     @include('myPartial')
    </script>


    <a href="#/">Home</a>
  </body>

基于yeoman的角度应用程序与laravel API集成在一个域中

1 个答案: