与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文件。

这插入到头标签：

 ＆LT;链接rel =stylesheet属性HREF ={{资产（'CSS / app.css'）}}＆GT;
＆LT;链接rel =stylesheet属性HREF =htt​​p://fonts.googleapis.com/css?family=Roboto:300,400,500,700＆GT;
 

收盘`标记之前插入这样的：

 ＆LT;脚本SRC ={{资产（'JS / app.js'）}}＆GT;＆LT; / SCRIPT＆GT;
 

指定 NG-应用属性：

 ＆LT; HTML LANG =ENNG-应用=deup＆GT;
 

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屋！