Angularjs 基于yeoman的angular应用程序在一个域中与laravel API集成_Angularjs_Laravel_Yeoman

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

angularjs laravel

Angularjs 基于yeoman的angular应用程序在一个域中与laravel API集成,angularjs,laravel,yeoman,Angularjs,Laravel,Yeoman,我正在开发AngularJS单页应用程序，该程序设计用于在Laravel5中编写API端点。其他团队开发的API。项目顺利运行，直到设计变更（根据客户要求）。他们想把Angular应用程序与Laravel放在同一个域中。我找到了许多文章来帮助我将angular与laravel结合起来。我找到的最明显的解决方案是我用开发了angular应用程序（它可以在浏览器上搭建、缩小和服务应用程序。因此我可以专注于编写应用程序，而不是导入依赖项文件和刷新浏览器）现在应用程序已经完成了80%，我必须将我的d

我正在开发AngularJS单页应用程序，该程序设计用于在Laravel5中编写API端点。其他团队开发的API。项目顺利运行，直到设计变更（根据客户要求）。他们想把Angular应用程序与Laravel放在同一个域中。我找到了许多文章来帮助我将angular与laravel结合起来。我找到的最明显的解决方案是

我用开发了angular应用程序（它可以在浏览器上搭建、缩小和服务应用程序。因此我可以专注于编写应用程序，而不是导入依赖项文件和刷新浏览器）

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

因此，我做了以下事情（基于用户别名对laracast的评论）：

我把我的dev文件夹放在laravel public/myapp文件夹中

我创建了一个laravel路由以返回我的应用程序视图

我创建了一个laravel视图，它应该服务于我的应用程序

但我如何从laravel视图调用我的应用程序？该应用程序已经有了自己的index.html文件（由yeoman gulp angular generator提供），并且它已经包含了自己的angular ui视图元素，以及一些用于将我的应用程序依赖项直接注入的神秘代码。有什么建议吗？多谢各位

我的目录结构：

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>


fortunixPos
//
//（函数（b，o，i，l，e，r）{b.GoogleAnalyticsObject=l；b[l]| |（b[l]=
//函数（）{（b[l].q=b[l].q | |[]）.push（参数）}）；b[l].l=+新日期；
//e=o.createElement（i）；r=o.getElementsByTagName（i）[0]；
//e.src='//www.google-analytics.com/analytics.js'；
//insertBefore（e，r）}（窗口，文档，'script'，'ga'）；
//ga（“创建”，“UA-XXXXX-X”）；ga（'send'，'pageview'）；

这是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>

fortunixPos //（函数（b，o，i，l，e，r）{b.GoogleAnalyticsObject=l；b[l]| |（b[l]= //函数（）{（b[l].q=b[l].q | |[]）.push（参数）}）；b[l].l=+新日期； //e=o.createElement（i）；r=o.getElementsByTagName（i）[0]； //e.src='//www.google-analytics.com/analytics.js'； //insertBefore（e，r）}（窗口，文档，'script'，'ga'）； //ga（“创建”，“UA-XXXXX-X”）；ga（'send'，'pageview'）；
这可能有点晚了。将yeoman生成的所有资源（*.html）放在laravel局部视图中。创建如下所示的角度路线，然后将零件放入自定义模板中。这对我有用。 myPartial.blade.php

<h1>Home</h1> <h3>{{message}}</h3>
您的app.blade.php：

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

@包括（'myPartial'）
基本上只需将
index.html
的所有内容复制到您创建的视图中即可。该视图将替换您的
index.html
@lukasgeiter-Hi，谢谢您的建议。我这样做了，但laravel只显示一个空白页面，而不是我的应用程序。没有js错误。我已将我的目录结构添加到问题中。希望它能让事情变得更清楚。首先，检查一下你的浏览器，看看这个页面是否真的是空白的（通过查看页面源代码）是的，你说得对。我忘了做那件事。在我查看源代码之后，它实际返回index.html内容，以及gulp脚本。它不会返回错误，因为该注入器是作为注释写入的。所以我运行gulp-serve，它在不同的端口为我的应用程序提供服务，我复制了源代码并将其粘贴到MyApp.php中。它返回许多依赖项错误，我修复了它。但是还有一个错误，它说它找不到index.html。获取404（未找到）。是angularjs的错误9818 Puh我不知道。。可能有些路径是错误的。如果您需要进一步的帮助，如果您将创建的Laravel视图添加到您的问题中，我可能能够帮助您。。。
<body> <script type="text/ng-template" id="pages/home.html"> @include('myPartial') </script> <a href="#/">Home</a> </body>