AngularJS with Laravel 5 using NPM

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

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

AngularJS with Laravel 5 using NPM

问题:

回答1:

收藏的人(0)

AngularJS with Laravel 5 using NPM

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮