AngularJS with Laravel 5 using NPM

2019-03-11 17:53发布

站内问答 / 后端开发
1639 1 5

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

1条回答
beautiful°
2楼-- · 2019-03-11 18:19

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">
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)