AngularJS 和 Laravel 5 使用 NPM答案

【问题标题】：AngularJS with Laravel 5 using NPMAngularJS 和 Laravel 5 使用 NPM
【发布时间】：2015-06-02 07:36:54
【问题描述】：

我想将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 文件夹中。

现在如何在我的 HTML 中使用 angular.js？

注意：我的主机设置指向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/');
});

【问题讨论】：

您需要使用 browserify 之类的东西来在客户端中要求 angular，或者只需在您的 html 中包含 angular.js 的路径
@JsIsAwesome 不能简单地包括在内，因为无法从 public 文件夹访问 node_modules 文件夹。我已经编辑了我的问题以包含一个更简单的解决方案，它不需要额外的包。但是我很好奇是否有更好的方法，然后只是复制文件。
正如我所说，如果你想在客户端使用 npm 包，你需要使用 browserify 然后需要这些包，如果不是，那么只需使用 bower 并将文件添加到 index.html 中脚本。

标签： angularjs npm laravel-5

【解决方案1】：

所以我做了，在问这个问题之前我应该做些什么。 Documentation.

作为示例，我将尝试在 Laravel 5 中使用 LumX CSS framework bower 包。

第 1 步。安装 LumX 和所需的软件包。

确保您已安装 Bower。执行bower install lumx，这将在 Laravel 目录中创建bower_components 文件夹。您可能希望将此目录添加到.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">

【讨论】：