AngularJS 和 Laravel 5 使用 NPM

Question

我想将 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/');
});

Answer 1

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

作为示例，我将尝试将 LumX CSS framework bower 包与 Laravel 5 一起使用。

步骤 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">

AngularJS 和 Laravel 5 使用 NPM

AngularJS with Laravel 5 using NPM

npm

angularjs

laravel-5