AngularJS与Laravel 5使用NPM

发布时间：2020-12-17 17:49:46 所属栏目：安全来源：网络整理

导读：我想在Laravel 5中使用AngularJS.由于Laravel使用NPM来获取gulp和laravel-elixir,我的第一步是编辑packages.json： { "private": true,"devDependencies": { "gulp": "^3.8.8","laravel-elixir": "*","angular": "*" // import angular }} 执行npm安装后,Ang

我想在Laravel 5中使用AngularJS.由于Laravel使用NPM来获取gulp和laravel-elixir,我的第一步是编辑packages.json：

{
  "private": true,"devDependencies": {
    "gulp": "^3.8.8","laravel-elixir": "*","angular": "*" // import angular
  }
}

执行npm安装后,AngularJS将下载到node_modules / angular文件夹.

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

注意：我的主机设置指向公用文件夹.

编辑：
现在我在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.

作为一个例子,我将尝试使用Laravel 5的LumX CSS framework凉亭包.

步骤1.安装LumX和所需的软件包.

确保已安装Bower.执行bower install lumx,这将在Laravel目录中创建bower_components文件夹.您可能希望将此目录添加到.gitignore.

步骤2.准备项目文件.

创建资源/资产/ 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文件.

将其插入头标记：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!