我想用AngularJS
与 Laravel 5
.由于 Laravel 使用 NPM 得到 gulp
和 laravel-elixir
,我的第一步是编辑packages.json
:
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "*",
"angular": "*" // import angular
}
}
执行后
npm install
AngularJS 下载到 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/');
});
最佳答案
所以我做了,在问这个问题之前我应该做什么。 Documentation.
作为示例,我将尝试使用 LumX CSS framework带有 Laravel 5 的凉亭包。
步骤 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">
关于AngularJS 与 Laravel 5 使用 NPM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29326707/