在 Laravel&Angular 项目中分离 AngularJS 控制器文件答案

【问题标题】：separate AngularJS controller files in Laravel&Angular Project在 Laravel&Angular 项目中分离 AngularJS 控制器文件
【发布时间】：2018-12-03 05:13:20
【问题描述】：

我试试这个解决方案

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

【问题讨论】：

我认为你的路径不正确

标签： php angularjs angular laravel laravel-5.7

【解决方案1】：

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

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

将提供公用文件夹的链接。但是您编写位于resources\assets\js\app.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>

【讨论】：

【解决方案2】：

安装 angularjs 包。

在您的资源\assets\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

}]);

在你的资源\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

【讨论】：

如何将window.MyApp = angular.module('MyApp', []); 转换为MyApp.controller("UserController", ['$scope', '$http', function ($scope, $http) { // Your Code }]);？
我的刀片中以前有 ng-controller。在我的项目中是这样的<div class="container" ng-controller="TaskController" ng-init="init()">
那就不用改了。只需在您的 app.blade 中添加 ng-app="MyApp"。如上所述更改您的 app.js 代码。假设你的 laravel mix 工作正常
我试试这样。 app.js window.LaravelCRUD = angular.module('LaravelCRUD', ['TaskController']);
在Task.Controller中像这样angular.module('LaravelCRUD', ['TaskController']).controller('TaskController', ['$scope', '$http', function ($scope, $http) { }]);