Question

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

Answer 1

以下是仅gulp流程

没有使用网络包。请任何人都可以用Laravel Mix重写这个。我真的很感激。

1-安装npm模块

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

2-用凉亭安装Angular

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

3-现在您的角色资产位于bower_components，在项目的根目录下创建一个文件以加载所有供应商。让我们创建/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 - 在gulpfile中创建角度任务

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'))
});

我认为就是这样。我可能已经制作了一个或两个错别字，但角度是它的要点。我如何使用laravel用于角度

Answer 2

我无法从头开始做这个，但是有一个使用流明，angular2的包。提供相同的链接，以便任何具有相同问题的人都可以受益。链接：anvel.io

Laravel中的AngularJS使用Elixir

2 个答案: