在 Laravel&Angular 项目中分离 AngularJS 控制器文件
Posted
技术标签:
【中文标题】在 Laravel&Angular 项目中分离 AngularJS 控制器文件【英文标题】：separate AngularJS controller files in Laravel&Angular Project 【发布时间】：2018-12-03 05:13:20 【问题描述】：我试试这个解决方案
https://***.com/a/20087682/9246297
https://***.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
【问题讨论】：
我认为你的路径不正确 【参考方案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) ]);以上是关于在 Laravel&Angular 项目中分离 AngularJS 控制器文件的主要内容，如果未能解决你的问题，请参考以下文章
Laravel（@ 8000）+ Angular with Gulp（@ 9000），如何在请求9000时让gulp代理8000端口？
如何将 Laravel 5.4 与 Angular 4 集成