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

Question

我试试这个解决方案

然后我得到了这个错误

GET http://localhost:8000/js/TaskController.js net::ERR_ABORTED 404 (Not Found)

然后我检查这个解决方案

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

安装angularjs包。

在你的resources\assets\js\bootstrap.js

window.angular = require('angular');

在 resources\assets\js\

中创建名为 controllers 的目录（对于 angular 控制器）

在你的 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">

在您看来 blade（如下所示）例如：resources\views\home.blade.php

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

现在运行 : npm 运行 watch 或 npm 运行 production （如你需要）。

参考文献：

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

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

Answer 2

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

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

将 link 提供给 public 文件夹。但是你的 app.js 文件你写的 angular 代码位于 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');
       }]);

您的 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>

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

separate AngularJS controller files in Laravel&Angular Project

php

laravel

angularjs

angular

laravel-5.7