文章/答案/技术大牛

发布

社区首页 >问答首页 >基于NPM的AngularJS与Laravel 5

问基于NPM的AngularJS与Laravel 5
EN

Stack Overflow用户

提问于 2015-03-29 07:30:12

回答 1查看 4.3K关注 0票数 4

我想把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呢？

注意:我的主机设置指向一个文件夹。

编辑：，现在我在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/');
});

angularjs

npm

laravel-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-30 11:46:57

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

作为一个例子，我将尝试使用LumX CSS framework保龄球包与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">

在关闭“主体标签”之前插入该选项：

<script src="{{ asset('js/app.js') }}"></script>

指定ng-app属性：

<html lang="en" ng-app="deup">

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29326707

复制

相似问题

问基于NPM的AngularJS与Laravel 5
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于NPM的AngularJS与Laravel 5EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于NPM的AngularJS与Laravel 5
EN