AngularJS with Laravel 5 using NPM

Question

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/');
});

You need to use something like browserify to require angular in the client or just include in your html the path to angular.js — Bazinga
– Bazinga, Commented Mar 29, 2015 at 7:56
@JsIsAwesome simply including is not possible, since node_modules folder is not accessible from public folder. I've edited my question to include a simpler solution, which doesn't require additional packages. But I'm curious if there is a better way to go, then just copying files. — Elaman
– Elaman, Commented Mar 29, 2015 at 8:14
As i say if you want to use npm packages in the client side you need to use browserify and then require the packages, if not then just use bower and add the files to your index.html like all scripts. — Bazinga
– Bazinga, Commented Mar 29, 2015 at 9:57

Elaman · Accepted Answer · 2015-03-30 12:12:12Z

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') }}">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

Insert this before closing `body tag:

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

Specify ng-app attribute:

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

Collectives™ on Stack Overflow

AngularJS with Laravel 5 using NPM

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related