отдельные файлы контроллера AngularJS в Laravel & Angular Project - PullRequest
Новая
       0

отдельные файлы контроллера AngularJS в Laravel & Angular Project

0 голосов
/ 03 декабря 2018

Я пробую это решение

https://stackoverflow.com/a/20087682/9246297

https://stackoverflow.com/a/34729515/9246297

и затем я получил эту ошибку

GET http://localhost:8000/js/TaskController.js net :: ERR_ABORTED 404 (не найдено)

Затем я проверяю это решение

https://github.com/angular/angular-cli/issues/8371

Моя проблема: у меня Laravel & angularПриложение работает нормально, но я хочу сделать очиститель файла App.js, разделив контроллеры на разные файлы, я пробовал некоторые решения и думаю, что они не работают для Laravel.

app.js 

var app = angular.module('LaravelCRUD', []
    , ['$httpProvider', function ($httpProvider) {
        $httpProvider.defaults.headers.post['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content');
    }]);


 app.controller('StudentController', ['$scope', '$http', function ($scope, $http) {
//Some code here that works fine 
}]);

Я также обновляю свои app.blade.php файлы, подобные этому 

//somecodes
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/TaskController.js') }}" defer></script>
//somecodes

Я хочу создать StudentController.js файл, содержащий коды этого контроллера.

Я использую эти версии

Angular CLI: 6.1.4
Node: 8.11.4
OS: win32 x64
Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.4 (cli-only)
@angular-devkit/core         0.7.4 (cli-only)
@angular-devkit/schematics   0.7.4 (cli-only)
@schematics/angular          0.7.4 (cli-only)
@schematics/update           0.7.4 (cli-only)
rxjs                         6.2.2 (cli-only)
webpack                      3.12.0

и Laravel 5.7

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Вторая ссылка , которую вы упомянули, является правильной, но имейте в виду, что вы должны учитывать в Laravel & Angular Project, что

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

обеспечитссылка на общую папку.но ваш файл app.js, в котором вы пишете свой угловой код, расположен по адресу resources\assets\js\app.js, тогда вы должны создать свой TaskController.js в public/js, а не в resources\assets\js\.

попробовать это приложение с кодом.js 

var app = angular.module('LaravelCRUD', [
       'myTaskController'
       ]
       , ['$httpProvider', function ($httpProvider) {
           $httpProvider.defaults.headers.post['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content');
       }]);

Ваш файл TaskController.js, расположенный по адресу public/js

angular.module('myTaskController', []).controller('TaskController', ['$scope', '$http', function ($scope, $http) {
   }]);

И, наконец, добавьте ваш TaskController в ваш app.blade.php

<script src="{{ asset('path/ to /TaskController.js') }}" defer></script>
0 голосов
/ 03 декабря 2018

Установите пакет angularjs.

В ваших ресурсах \ assets \ js \ bootstrap.js 

window.angular = require('angular');

Создайте каталог с именем controllers (для угловых контроллеров) вresources \ assets \ js \

В ваших ресурсах \ assets \ js \ app.js (импортируйте все, что вам нужно здесь) 

window.MyApp = angular.module('MyApp', [
require('angular-sanitize'),
require('angular-cookies'),
require('angular-animate'),
'ngStorage',
require('ng-csv'),
'angular-jquery-datepicker',
'daterangepicker'

]); 

var controllers = require.context('./controllers', true, /^(.*\.(js$))[^.]*$/igm);
controllers.keys().forEach(key => controllers(key));

Вот и все

Теперь в папке вашего контроллера вы можете создавать отдельные папки для каждого контроллера

Пример 

-> resources\assets\js\
     ->  app.js
     ->  bootstrap.js
     ->  controllers
         ->  user
             ->  UserController.js
         ->  note
             ->  NoteController.js

Внутри UserController (ниже) 

MyApp.controller("UserController", ['$scope', '$http', function ($scope, $http) {

   // Your Code

}]);

В ваших ресурсах \ views \ layouts \ app.blade.php 

<html  ng-app="MyApp">

В вашем блейде представлений (что-то вроде ниже) Например: resources \ views \ home.blade.php

<div class="container-fluid"  ng-controller="UserController" ng-init="init()">

Теперь запустите: npm run watch или npm run production (По мере необходимости).

Ссылки:

https://webpack.js.org/guides/dependency-management/

https://laravel.com/docs/5.6/mix

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...