1

So i have watched the 5 part youtube videos by David Mosher about Angular JS (vids great by the way). In the part 2 (http://www.youtube.com/watch?v=hqAyiqUs93c), it has a practical mysql database usage which I almost wanted.

I'm going to use AngularJS along with Laravel 4, but I had no idea which files I'm going to upload for the web hosting later. I'm trying to run the web app under "/public" folder in my root on localhost (localhost/public/) but the css and js points to the wrong directory (points to the root: '/css/style.css').

Another method I have tried is by copying all the files to the root and moved all files inside "public" to root. Then I navigate to "localhost/public/". All works fine in script paths, except that it doesn't seemed to do any connection to the database (either the laravel or angular failed).

Is there any proper way to do this for practical use (without using php artisan serve or grunt run or lineman run on the server)? Which files I should upload later?

EDIT: the reason is my web hosting doesn't allow me to install nginx or run code remotely using putty, so I need a manual way to do this. Thanks.

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
user2002495
  • 2,126
  • 8
  • 31
  • 61

1 Answers1

4
  • First install latest laravel in your localhost. See doc.
  • Assuming you have completed composer install command.
  • Then move your all public folder contents to the project root.

  • Next change the line 21 in index.php from, 

    require __DIR__.'/../bootstrap/autoload.php';

    to 

    require __DIR__.'/bootstrap/autoload.php';

    and line 35 content 

    $app = require_once __DIR__.'/../bootstrap/start.php';

    to 

    $app = require_once __DIR__.'/bootstrap/start.php';

    Now you can access project without public folder.

  • Place your css, js and other assets folder in root like http://localhost/laravel/css
  • Note that the laravel blade and angular also using {{ syntax for compilation.So you need to change the laravel blade syntax to {= and =}.Otherwise you will get conflict.

  • To do this open vendor/laravel/framework/src/Illuminate/View/Compilers/BladeCompiler.php file and change line 45 to this 

    protected $contentTags = array('{=', '=}');

    and line 52 to this 

    protected $escapedTags = array('{={', '}=}');

    Now you can use {{ for angular and {= for blade.

  • For linking your assets, use HTMLBuilder functions, see doc here.

  • Now use these in blade,

     {= HTML::style('css/style.css') =} // links localhost/project/css/style.css

 {= HTML::script('js/jquery.js') =}

  • Use migrations and db seeds in localhost and make an exported copy of db for online hosting

  • After completing project, copy entire project content to online server and change db configuration and import database.

Directory Structure for Online

There will be a public directory for your file hosting, where you put your files in web root.

That may be htdocs or public_html and now it's your project public root.Now the directory structure will be,

-- app

-- bootstrap

-- css

-- images

-- js

-- vendor
Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
  • What would be the full structure of this at the end? Could you make up a list of the folders, it would be helpful. Would it be \webroot\public OR \webroot\laravel\public... and list the other folders too, thanks for the help – ghiscoding Oct 07 '13 at 04:08
  • Good point on adjusting blade to {=, but just as a note if you want blade to keep {{ you can use @{{ to escape blade thus AngularJS can then parse @{{ since it becomes just {{ in the outputted markup. – Dustin Graham Nov 07 '13 at 18:08
  • 1
    Just an advice, stop changing the brackets please, just skip blade extension and use include, or store angular views in public folder –  Dec 22 '13 at 09:02