AngularJS with Laravel 5 using NPM -
i want use angularjs laravel 5. since laravel uses npm gulp , laravel-elixir, first step edit packages.json:
{ "private": true, "devdependencies": { "gulp": "^3.8.8", "laravel-elixir": "*", "angular": "*" // import angular } } after executing npm install angularjs downloaded node_modules/angular folder.
now how use angular.js in html?
note: host settings pointing public folder.
edit: i'm using piece of code in 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 did, should've done before asking question. documentation.
as example try use lumx css framework bower package laravel 5.
step 1. install lumx , required packages.
be sure have bower installed. execute bower install lumx, create bower_components folder within laravel directory. may want add directory .gitignore.
step 2. prepare project files.
create resources/assets/sass folder , app.scss:
@import "../../../bower_components/mdi/scss/materialdesignicons"; @import "../../../bower_components/lumx/dist/scss/lumx"; create resources/assets/js folder , app.js:
angular.module('myapp', ['lumx']); also sure, have public/js, public/css, public/fonts folders , writable.
step 3. use gulp.
edit gulpfile.js file:
elixir(function(mix) { mix.sass('app.scss') .scripts([ // combine js files one. // path relative 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 place public/css folder, // need copy font files .copy('bower_components/mdi/fonts', 'public/fonts'); }); and execute gulp command.
step 4. use css , js files.
insert 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 before closing `body tag:
<script src="{{ asset('js/app.js') }}"></script> specify ng-app attribute:
<html lang="en" ng-app="deup">
Comments
Post a Comment