个人中心
gpt4 book ai didi

AngularJS 与 Laravel 5 使用 NPM

转载 作者：行者123 更新时间：2023-12-04 23:20:13 25 4
gpt4 key购买 nike

我想用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/

25 4 0
文章推荐： 将指向数组的指针转换为指针
文章推荐： list - 我应该使用空列表还是使其成为选项？
文章推荐： laravel - Laravel 5 中的优秀 uploader TokenMismatchException
文章推荐： json - 在 PowerShell 中使用另一个扩展 JSON
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com