separate AngularJS controller files in Laravel&Angular Project

Asked 3/12, 2018 at 5:13 Answered 3/12, 2018 at 10:54

Solved php angularjs angular laravel laravel-5.7

I try this solution

https://mcmap.net/q/99013/-how-to-create-separate-angularjs-controller-files

https://mcmap.net/q/1880129/-how-to-have-controllers-in-separate-file-in-angularjs

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

Becki answered 3/12, 2018 at 5:13 Comment(1)

i think your path is not correct – Soble 3/12, 2018 at 5:53

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>

Ectropion answered 3/12, 2018 at 10:54 Comment(0)

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

Debenture answered 3/12, 2018 at 6:5 Comment(9)

How I can cutomize window.MyApp = angular.module('MyApp', []); for MyApp.controller("UserController", ['$scope', '$http', function ($scope, $http) { // Your Code }]);? – Becki 3/12, 2018 at 6:34

I have ng-controller previously in my blade. in my project it is like this <div class="container" ng-controller="TaskController" ng-init="init()"> – Becki 3/12, 2018 at 6:55

Then no need to alter. just add ng-app="MyApp" in your app.blade. Change your app.js code as i mentioned above. Assuming your laravel mix working fine – Debenture 3/12, 2018 at 6:57

I try like this. app.js window.LaravelCRUD = angular.module('LaravelCRUD', ['TaskController']); – Becki 3/12, 2018 at 7:1

and in Task.Controller like this

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

– Becki 3/12, 2018 at 7:2

I should say that my codes work if I write my controller in the app.js, but I want to separate controller files – Becki 3/12, 2018 at 7:3

Yes that's what i mentioned above – Debenture 3/12, 2018 at 7:9

Create TaskController.js file inside controllers folder & inside that chnage like this MyApp.controller("UserController", ['$scope', '$http', function ($scope, $http) { // Your Code }]); – Debenture 3/12, 2018 at 7:10

Let us continue this discussion in chat. – Becki 3/12, 2018 at 7:10

Recommended topics

Hot tags