Question

我尝试此解决方案

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

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

然后我得到了这个错误

获取http://localhost:8000/js/TaskController.js净值：: 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

Answer 1

您提到的第二个link是正确的，但请记住，在Laravel＆Angular Project中应该考虑的是

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

将提供指向公用文件夹的链接。但是您在app.js文件中编写的角度代码位于resources\assets\js\app.js 那么您应该将TaskController.js创建到public/js而不是resources\assets\js\中。

尝试此代码 app.js

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

您位于public/js的TaskController.js

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

最后，将TaskController添加到app.blade.php

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

Answer 2

安装angularjs软件包。

在您的资源\资产\ js \ bootstrap.js中

window.angular = require('angular');

在resources \ assets \ js \

中创建一个名为 controllers 的目录（用于角度控制器）

在您的resources \ 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

}]);

在您的resources \ 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运行监视或 npm运行生产（根据需要）。

参考文献：

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

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

Laravel＆Angular Project中的单独AngularJS控制器文件

2 个答案: