与Laravel 5使用NPM AngularJS [英] AngularJS with Laravel 5 using NPM
问题描述
我想用 AngularJS
与 Laravel 5
。由于Laravel使用NPM来获得一饮而尽
和 laravel-灵药
,我的第一步是编辑 packages.json
:
{
私:真实,
devDependencies:{
吞掉:^ 3.8.8
laravel-灵药:*,
角:*//进口角
}
}
执行后NPM安装
AngularJS下载到 node_modules /角
文件夹中。
现在我怎么使用 angular.js
在我的HTML?
注意:我的主机设置指向公共
文件夹
编辑:
现在我用这块code在我的 gulp.js
文件:
灵药(功能(混合){
mix.copy('。node_modules /角/ * min.js','公共/ JS /');
mix.copy('node_modules /角度-ARIA / * min.js。','公共/ JS /');
mix.copy('node_modules /角动画/ * min.js。','公共/ JS /');
});
所以,我没有,我应该问这个问题之前所做的一切。 文档。
作为一个例子,我将尝试使用 LumX CSS框架凉亭包Laravel 5。
步骤1.安装LumX和所需的软件包。
请确认您已鲍尔的安装。执行亭子安装lumx
,这将创造Laravel目录中的 bower_components
文件夹中。您可能希望将此目录添加到的.gitignore
。
第2步:prepare您的项目文件。
创建资源/资产/上海社会科学院
文件夹和 app.scss
:
@import../../../bower_components/mdi/scss/materialdesignicons
@import../../../bower_components/lumx/dist/scss/lumx
创建资源/资产/ JS
文件夹和 app.js
:
angular.module('对myApp',['lumx']);
另外要肯定的是,你有公共/ JS
,公共/ CSS
,公共/字体
文件夹,它们是可写的。
步骤3.使用一饮而尽。
修改 gulpfile.js
文件:
灵药(功能(混合){
mix.sass('app.scss')
.scripts中([
//将所有的js文件合并成一个。
//路径是相对于资源/ JS文件夹中。
../../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',
],'公共/ JS / app.js)
//由于css文件将是地方进入公众/ css文件夹中,
//我们需要太复制字体文件
.copy('bower_components / MDI /字体,公共/字体');
});
和执行一饮而尽
命令。
第四步:使用CSS和JS文件。
这插入到头
标签:
<链接rel =stylesheet属性HREF ={{资产('CSS / app.css')}}>
<链接rel =stylesheet属性HREF =http://fonts.googleapis.com/css?family=Roboto:300,400,500,700>
收盘`标记之前插入这样的:
<脚本SRC ={{资产('JS / app.js')}}>< / SCRIPT>
指定 NG-应用
属性:
< HTML LANG =ENNG-应用=deup>
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">
这篇关于与Laravel 5使用NPM AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!