yeoman基於角度的應用程序與laravel API集成在一個域中

我正在開發AngularJS單頁應用程序，該應用程序旨在實現laravel 5中的API端點編寫。由其他團隊開發的API。該項目運行順利，直到設計更改（由客戶請求）。他們希望將Angular應用與Laravel放在同一個域中。我發現了很多文章來幫助我整合角度與laravel。最明顯的解決方案，我發現是user Alias comment in laracast.yeoman基於角度的應用程序與laravel API集成在一個域中

我公司開發的角度應用與Yeoman gulp-angular generator（它腳手架，縮小，以及服務於瀏覽器的應用程序。這樣我就可以集中精力編寫應用程序，而不是進口的依賴文件和清新的瀏覽器）。

現在應用程序已經完成了80％，我必須將我的開發文件夾與laravel集成在一起。換句話說，我必須在laravel領域內開發其他應用程序。我不想從我的工作流程中擺脫yeoman gulp-angular發電機，因爲這非常有幫助。但另一方面，我需要讓laravel服務我的應用程序，當我打一個網址（例如：laravelapp /我的/應用程序）。

所以我做下面的事情（基於laracast用戶別名評論）：

我把我的dev的文件夾內laravel公共/ MyApp文件夾
我創建了一個laravel路線返回我的應用程序視圖。
我創建了一個應該爲我的應用程序提供服務的laravel視圖。

但是我怎樣才能從laravel視圖調用我的應用程序？該應用程序已經有了自己的index.html文件（由yeoman gulp-angular generator提供），它已經包含了自己的角度ui-view元素，以及一些隱藏的代碼，用於注入我的應用程序依賴項。任何建議傢伙？謝謝。

我的目錄結構：

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） 以下爲i通過複製和粘貼從index.html的MYAPP創建的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>

這是自耕農一飲而盡棱角發電機的實際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>

來源

2015-02-07 under5hell

基本上只是複製'index.html'的所有內容進入您創建的視圖。該視圖將替換你的索引。html' – lukasgeiter 2015-02-07 18:19:37

@lukasgeiter嗨，謝謝你的建議。我做到了，但laravel只顯示一個空白頁面而不是我的應用程序。沒有js錯誤。我已將我的目錄結構添加到問題中。希望它能讓它更清晰。 – under5hell 2015-02-07 19:02:53

首先，檢查你的瀏覽器，如果頁面實際上是看起來空白的東西（通過查看頁面源） – lukasgeiter 2015-02-07 19:04:45

這可能是晚了一點點。將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>

來源

2017-01-30 15:58:38

yeoman基於角度的應用程序與laravel API集成在一個域中

回答

相關問題