Ela*_*man 4 npm angularjs laravel-5
我想AngularJS用Laravel 5.由于Laravel使用NPM来获得gulp和laravel-elixir,我的第一步是编辑packages.json:
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "*",
"angular": "*" // import angular
}
}
执行npm installAngularJS后,将其下载到该node_modules/angular文件夹中.
现在我如何angular.js在我的HTML中使用？
注意:我的主机设置指向一个public文件夹.
编辑:
现在我在我的gulp.js文件中使用这段代码:
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/');
});
所以我做了,在问这个问题之前我应该做些什么.文档.
作为一个例子,我将尝试使用Laravel 5的LumX CSS框架凉亭包.
步骤1.安装LumX和所需的软件包.
确保安装了Bower.执行bower install lumx,这将bower_components在Laravel目录中创建文件夹.您可能想要将此目录添加到.gitignore.
步骤2.准备项目文件.
创建resources/assets/sass文件夹和app.scss:
@import "../../../bower_components/mdi/scss/materialdesignicons";
@import "../../../bower_components/lumx/dist/scss/lumx";
创建resources/assets/js文件夹和app.js:
angular.module('myApp', ['lumx']);
还可以肯定,你有public/js,public/css,public/fonts文件夹以及它们是可写的.
第3步.使用gulp.
编辑你的gulpfile.js文件:
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');
});
并执行gulp命令.
第4步.使用CSS和JS文件.
将其插入head标记:
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
在关闭`body标签之前插入它:
<script src="{{ asset('js/app.js') }}"></script>
指定ng-app属性:
<html lang="en" ng-app="deup">
| 归档时间： |
|
| 查看次数： |
4044 次 |
| 最近记录： |