AngularJS 在 Laravel 中使用 Elixir

Question

我正在尝试设置 Laravel 和 Angular 应用程序。我想将我的工作文件放在 resources/assets/js 下，然后使用 webpack 和 elixir 编译这些代码并在我的 public 目录中创建一个 app.js 文件。但我不确定该怎么做？任何人都可以指导我使用基于步骤的方法吗？

Answer 1

这里是一个gulp唯一的过程

没有使用 webpack。请任何人都可以用 Laravel Mix 重写它，我将不胜感激。

1- 安装 npm 模块

`npm i --S bower gulp gulp-concat gulp-uglify`

2- 安装 Angular 和 bower

bower install --save angular angular-sanitize angular-ui-router

3- 现在您在 bower_components 中有了 angular 资产，在项目的根目录创建一个文件以加载所有供应商。让我们创建 /vendor.json

[
    "bower_components/angular/angular.min.js",
    "bower_components/angular-sanitize/angular-sanitize.min.js",
    "bower_components/angular-route/angular-route.min.js"
]

将所有供应商添加到该文件。 Bower 或 Npm 供应商。您下载的任何不属于您的代码的内容。

4- 转到 /gulpfile.js 并添加任务

var gulp   = require('gulp),
    concat = require('gulp-concat'),
    uglify  = require('gulp-uglify');

gulp.task('vendorjs', function() {
    var source = require('./vendorjs.json');
    return gulp.src(source)
    .pipe(concat('vendors.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('public/assets/js'))
});

该任务会将所有供应商资产编译为 /public/assets/js/vendors.min.js

5- 在 resources/assets/js 中，创建以下目录 controllers、modules 和文件 app.js。在 app.js 里面做

// 'resources/assets/js/app.js'
(function(){
    angular
    .module('myApp', ['app.core', 'app.controllers']);
})();

6- 在 modules 目录中创建 core/module.js。这是核心模块，您可以在其中加载通过 bower 或 npm 加载的所有外部模块。

// 'resources/assets/js/modules/core/module.js'
(function(){
    angular
    .module('app.core', ['ngRoute', 'ngSanitize']);
})();

7- 仍然在 modules 目录中创建 controllers/module.js。您所有的控制器都将绑定到此模块。

// 'resources/assets/js/modules/controllers/module.js'
(function(){
    angular
    .module('app.controllers', []);
})();

8- 现在你可以像这样写你的控制器

// 'resources/assets/js/controllers/home.js'
(function(){
    angular
    .module('app.controllers')
    .controller('HomeController', Controller);

    //Use injection for assets minification 
    HomeController.$inject = ['$scope', '$http'];
    function HomeController($scope, $http)
    {
        var vm = this;
        activate();

        function activate()
        {
            vm.sayHi = function() {
                console.log('Hi');
            }
        }
    }
})();

9-如果你想定义路由

// 'resources/assets/js/modules/routes/routes.js'
(function(){
    angular
    .module('app.routes', [])
    .config(routesConfig);

    //Use injection for assets minification 
    routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider'];
    function routesConfig($stateProvider, $locationProvider, $urlRouterProvider)
    {
        $urlRouterProvider.otherwise('/');
        $stateProvider
        .state('home', {
            url: '/',
            templateUrl: '/templates/home.html',
            controller: 'HomeController'
        })
        ...
    }
})();

10 - 在 gulp 文件中创建 angular 任务

gulp.task('angular', function() {
    var root = 'resources/assets/js';
    var source = [
        root + '/app.js',
        root + '/modules/**/*module.js',
        root + '/controllers/**/*js'
    ];

return gulp.src(source)
    .pipe(concat('app.min.js'))
    .pipe(uglify()) //comment this line when in development
    .pipe(gulp.dest('public/assets/js'))
});

我想就是这样。我可能打错了一两个错别字，但 angular 这就是它的要点。我如何将 gulp 与 laravel 一起用于 angular

Answer 2

我不能从头开始做这个，但是有一个使用流明的包，angular2。为同样的问题提供 link 以便任何遇到相同问题的人都能受益。 Link: anvel.io

AngularJS 在 Laravel 中使用 Elixir

AngularJS in Laravel using Elixir

angularjs

laravel

laravel-elixir