Geek Answers Handbook

AngularJS with Laravel 5 using NPM

I want to use AngularJSwith Laravel 5. Since Laravel uses NPM to get gulpand laravel-elixir, my first step was to edit packages.json:

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

After execution, npm installAngularJS is loaded into the folder node_modules/angular.

Now how to use angular.jsin your HTML?

NOTE. My host settings point to a folder public.

EDIT: So far, I'm using this piece of code in a file gulp.js:

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/');
});
+4
source share
1 answer

So, I did what I had to do before asking this question. Documentation.

LumX CSS framework bower Laravel 5.

1. LumX .

, Bower. bower install lumx, bower_components Laravel. .gitignore.

2. .

resources/assets/sass app.scss:

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

resources/assets/js app.js:

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

, public/js, public/css, public/fonts, .

3. gulp.

gulpfile.js:

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

gulp.

4. CSS JS.

head:

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

body:

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

ng-app:

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

More articles:


All Articles