Menu
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/');
});
272
asked Feb 10 '23 13:02
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With