yeoman based angular app integration with laravel API in one domain

0
votes

I'm working on AngularJS single page app which is designed to hit API endpoint writing in laravel 5. The API developed by other team. The project run smooth until the design change (by client request). They want to put the Angular app in the same domain with Laravel. I've found many articles to help me integrate angular with laravel. The most visible solution I found is user Alias comment in laracast.

I developed the angular app with Yeoman gulp-angular generator (it does scaffolding, minify, and serve the app on browser. so I can focus on writing app instead of importing dependencies files and refreshing browser ).

Now the app already 80% complete, i have to integrate my dev folder with laravel. In other word i have to develop the rest of the app inside laravel realm. I don't want to get rid the yeoman gulp-angular generator from my workflow because it's really helpful. But in the other hand i need to make laravel serve my app when i hit a url (for example : laravelapp/my/app).

So i did the following things (based on user alias comment on laracast):

  1. I put my dev folder inside laravel public/myapp folder
  2. I create a laravel route to return a my app view.
  3. I create a laravel view that should serve my app.

But how can I call my app from the laravel view? The app already have its own index.html file (provided by yeoman gulp-angular generator) and it's already contain its own angular ui-view element, and some cryptic code to inject my app dependencies out of the box. any advice guys? Thank you.

My directory structure:

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

My Laravel view (MyApp.php) The following is the laravel view i created by copy and paste index.html from myapp. The index html i pasted here is the after compiled version of yeoman gulp-angular generator. My application name is pos, so i prefixed all dependencies with it.

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

And this is the actual HTML from yeoman gulp-angular generator which is do nothing when i put it in laravel view:

<!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 -->
    <!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automaticaly insert here -->
    <!-- endinject -->
    <!-- endbuild -->
  </head>
  <body>
    <!--[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 -->
    <!-- run `gulp wiredep` to automaticaly populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automaticaly insert here -->
    <!-- endinject -->

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

  </body>
</html>
1
angularjslaravelyeoman
Just basically copy all the contents of index.html into the view you created. The view will replace your index.html – lukasgeiter
@lukasgeiter Hi, thanks for your advice. I did it but laravel only display a blank page instead of my app. no js error. I have added my directory structure to the question. hope it will make it clearer. – under5hell
First, check in your browser if the page is actually get something that just looks blank (by looking at the page source) – lukasgeiter
Yes, you right. I forgot to do that. After i look into the source, it actually return the index.html content as it is, along with gulp-angular injector script. it doesnt return an error because that injector is written as comments. So i run gulp-serve, it serve my app in different port, i copied the source and paste it into MyApp.php. It return many dependencies errors, i fix it. but there still one error left, it say it cannot find index.html. GET frtxAPI/app/main/main.html 404 (Not Found). it's angularjs error 9818. – under5hell
Puh, I don't know.. probably some path(s) are wrong. If you need further assistance I might be able to help you if you add the Laravel view you created to your question... – lukasgeiter

1 Answers

0
votes

This might be late a little bit. Put all of your resources (*.html) generated by yeoman in laravel partial views. Create the angular routes like following then put your partial in custom template. It worked for me. myPartial.blade.php

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

your angular route file:

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

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

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

your app.blade.php :

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


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