AngularJS with Laravel 5 using NPM

All we need is an easy explanation of the problem, so here it is.

I want to use AngularJS with Laravel 5. Since Laravel uses NPM to get gulp and laravel-elixir, my first step was to edit packages.json:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "*",
    "angular": "*" // import angular
  }
}

After executing npm install AngularJS is downloaded to the node_modules/angular folder.

Now how do I use angular.js in my HTML?

NOTE: My host settings are pointing to a public folder.

EDIT:
For now I’m using this piece of code in my gulp.js file:

elixir(function(mix) {
    mix.copy('node_modules/angular/*.min.js', 'public/js/');
    mix.copy('node_modules/angular-aria/*.min.js', 'public/js/');
    mix.copy('node_modules/angular-animate/*.min.js', 'public/js/');
});

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

So I did, what I should’ve done before asking this question. Documentation.

As an example I will try to use LumX CSS framework bower package with Laravel 5.

Step 1. Install LumX and required packages.

Be sure you have Bower installed. Execute bower install lumx, this will create bower_components folder within Laravel directory. You may want to add this directory to .gitignore.

Step 2. Prepare your project files.

Create resources/assets/sass folder and app.scss:

@import "../../../bower_components/mdi/scss/materialdesignicons";
@import "../../../bower_components/lumx/dist/scss/lumx";

Create resources/assets/js folder and app.js:

angular.module('myApp', ['lumx']);

Also be sure, that you have public/js, public/css, public/fonts folders and they are writable.

Step 3. Use gulp.

Edit your gulpfile.js file:

elixir(function(mix) {
    mix.sass('app.scss')
        .scripts([
            // Combine all js files into one.
            // Path is relative to resource/js folder.
            '../../bower_components/jquery/dist/jquery.min.js',
            '../../bower_components/velocity/velocity.min.js',
            '../../bower_components/moment/min/moment-with-locales.min.js',
            '../../bower_components/angular/angular.min.js',
            '../../bower_components/lumx/dist/lumx.min.js',
        ], 'public/js/app.js')
        // Since css file will be place into public/css folder,
        // we need to copy font files too
        .copy('bower_components/mdi/fonts', 'public/fonts');
});

And execute gulp command.

Step 4. Use CSS and JS files.

Insert this into head tag:

<link rel="stylesheet" href="{{ asset('css/app.css') }}" rel="nofollow noreferrer noopener">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="nofollow noreferrer noopener">

Insert this before closing `body tag:

<script src="{{ asset('js/app.js') }}"></script>

Specify ng-app attribute:

<html lang="en" ng-app="deup">

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply