Menu
I try this solution
https://stackoverflow.com/a/20087682/9246297
https://stackoverflow.com/a/34729515/9246297
and then I got this error
GET http://localhost:8000/js/TaskController.js net::ERR_ABORTED 404 (Not Found)
Then I check this solution
https://github.com/angular/angular-cli/issues/8371
My problem: I have a Laravel & angular Application that works fine, But I want to make the App.js file cleaner by separate the controllers to different files, I trying some solutions and I think they are not working for 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
}]);
I also Update my app.blade.php files like this
//somecodes
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/TaskController.js') }}" defer></script>
//somecodes
I want to make a StudentController.js file that contains this controller codes.
I use these versions
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
and Laravel 5.7
329
The second link that you mention is right but keep in mind that you should consider in Laravel & Angular Project is that the
<script src="{{ asset('js/----.js') }}" defer></script>
will provide the link to the public folder. but your the app.js file that you write your angular code located at the resources\assets\js\app.js
then you should create your TaskController.js into the public/js not in the resources\assets\js\.
try this code app.js
var app = angular.module('LaravelCRUD', [
'myTaskController'
]
, ['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.post['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content');
}]);
Your TaskController.js that located at public/js
angular.module('myTaskController', []).controller('TaskController', ['$scope', '$http', function ($scope, $http) {
}]);
And finally, add your TaskController to your app.blade.php
<script src="{{ asset('path/ to /TaskController.js') }}" defer></script>
Install angularjs package.
In your resources\assets\js\bootstrap.js
window.angular = require('angular');
Create a directory called controllers (for angular controllers) in resources\assets\js\
In your resources\assets\js\app.js (import whatever you need here)
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));
That's it
Now in your controller folder you can create separate folders for each controllers
Example
-> resources\assets\js\ -> app.js -> bootstrap.js -> controllers -> user -> UserController.js -> note -> NoteController.js
Inside UserController (below)
MyApp.controller("UserController", ['$scope', '$http', function ($scope, $http) {
// Your Code
}]);
In your resources\views\layouts\app.blade.php
<html ng-app="MyApp">
In your view blade (Something like below) Eg: resources\views\home.blade.php
<div class="container-fluid" ng-controller="UserController" ng-init="init()">
Now run : npm run watch or npm run production (As you needed).
References:
https://webpack.js.org/guides/dependency-management/
https://laravel.com/docs/5.6/mix
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
