2017-02-21 18 views
0

Я пытаюсь настроить приложение Laravel и Angular. Я хотел разместить свои рабочие файлы под resources/assets/js, а затем использовать webpack и elixir для компиляции этого кода и создания одного файла app.js в моем общем каталоге. Но я не уверен, как это сделать? Может ли кто-нибудь вести меня с помощью подхода, основанного на шаге?AngularJS в Laravel с использованием Elixir

+0

Я мог бы помочь, но я использую только глоток. Не использовать веб-пакет еще, так как большинство моих проектов все еще используют глоток. Поэтому, если позже, никто не поможет вам с webpack, я мог бы дать вам настройку gulp для углового JS внутри Laravel. – EddyTheDove

+0

Несомненно. Я настраиваю bower.json и вытягиваю угловую и бутстрап. Теперь я смущен, как использовать gulp и объединить в один файл js. – JackSlayer94

ответ

0

Я не мог сделать это с нуля, но есть пакет, который использует люмен, угловой2. Предоставление ссылки для того же самого, чтобы кто-либо с той же проблемой мог получить выгоду.Ссылка: anvel.io

1

Вот gulp обработает только

Нет WebPack не используется. Пожалуйста, любой может переписать это с Laravel Mix Я бы очень признателен.

1- Установите НПМ модули

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

2- Установить Угловая с дачей

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 с laravel для углового