Я пытаюсь настроить приложение Laravel и Angular. Я хотел разместить свои рабочие файлы под resources/assets/js
, а затем использовать webpack и elixir для компиляции этого кода и создания одного файла app.js в моем общем каталоге. Но я не уверен, как это сделать? Может ли кто-нибудь вести меня с помощью подхода, основанного на шаге?AngularJS в Laravel с использованием Elixir
ответ
Я не мог сделать это с нуля, но есть пакет, который использует люмен, угловой2. Предоставление ссылки для того же самого, чтобы кто-либо с той же проблемой мог получить выгоду.Ссылка: anvel.io
Вот 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 для углового
Я мог бы помочь, но я использую только глоток. Не использовать веб-пакет еще, так как большинство моих проектов все еще используют глоток. Поэтому, если позже, никто не поможет вам с webpack, я мог бы дать вам настройку gulp для углового JS внутри Laravel. – EddyTheDove
Несомненно. Я настраиваю bower.json и вытягиваю угловую и бутстрап. Теперь я смущен, как использовать gulp и объединить в один файл js. – JackSlayer94