Unable to get controller loaded into my angularjs module

Question

I'm trying to split my angularjs controllers into files but failing everytime.

Directory Structure:

--public--
        --js/controller/resturant.js
        --js/master.js
        --index.php

Code for master.js

angular.module("rsw",['rsw.controller']);

Code for resturant.js

    angular.module('rsw.controller').controller('resturant', ['$scope', '$http', function($scope, $http){
    $scope.data="Test"
}]);

Code for index.php

--
<div ng-app="rsw">
  <span ng-controller="resturant">
    {{ data }}
  </span>
</div>
--

EDIT: I've included only 'master.js' in my index.php, do I need to import 'resturant.js" too?

You've created a module 'rsw' and created your controller in another module 'rsw.controller' module. Did you add the 'rsw.controller' module as dependency in 'rsw' module? — Gangadhar Jannu
– Gangadhar Jannu, Commented Oct 4, 2016 at 15:03

tcooc · Accepted Answer · 2016-10-04 15:11:04Z

2

You need to use the correct module definition call. That is, angular.module(name) retrieves a module and angular.module(name, [requires]) creates one.

angular.module('rsw.controller', [])
.controller('resturant', ['$scope', '$http', function($scope, $http){
    $scope.data="Test"
}]);

After creating your module, you need to then make it a dependency of your app:

angular.module("rsw",['rsw.controller']);

Fixed code:

angular.module("rsw", ['rsw.controller']);
angular.module('rsw.controller', [])
  .controller('resturant', ['$scope', '$http',
    function($scope, $http) {
      $scope.data = "Test"
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="rsw">
  <span ng-controller="resturant">
    {{ data }}
  </span>
</div>

edited Oct 4, 2016 at 15:11

answered Oct 4, 2016 at 14:58

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jaskaran Singh Puri Over a year ago

I'm getting this error now: Uncaught Error: [$injector:modulerr]

tcooc Over a year ago

@JaskaranSinghPuri Had a small typo in my answer, forgot the , in 'rsw.controller', []. Was that the cause possibly?

tcooc Over a year ago

@JaskaranSinghPuri I have added a snippet containing your code with only my changes posted above, and it works. If you have an error please share the full error + stack.

Jaskaran Singh Puri Over a year ago

This is a single file code, I want to split my controllers in different files!

tcooc Over a year ago

@JaskaranSinghPuri It will work the exact same way with multiple files. If you have 2 <script> tags one after another it will behave the same way. Your error is not possible to fix because you have not provided the necessary info, unfortunately.

|

Gabcvit · Accepted Answer · 2016-10-04 15:02:02Z

0

I think you had set up your controller wrong. Try typing this instead:

angular.module('rsw').controller('resturant', ['$scope', '$http', function($scope, $http){
    $scope.data="Test"
 }]);

answered Oct 4, 2016 at 15:02

Gabcvit

1,4981 gold badge16 silver badges32 bronze badges

1 Comment

Gabcvit Over a year ago

Oh yeah, another mistype problem, try like this: angular.module('rsw').controller('resturant', function ($scope, $http){ $scope.data="Test" });

Alexander Leon · Accepted Answer · 2016-10-04 15:14:10Z

something like this should work...

file structure:

--public
  --js
    --controllers
      --resturant.js
    --app.js
    --appRoutes.js
--views
  --index.php

// resturant.js
    angular.module('rswCtrl', []).controller('RswController', [$scope, function($scope) {

}]);

 // appRoutes.js

   angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/index.php',
      controller: 'RswController' 
    });
  }]);

// app.js
angular.module('myApp', ['appRoutes', 'rswCtrl']);

and then don't forget to include paths to all these files in your index.php file. Hope I'm not missing something..

Collectives™ on Stack Overflow

Unable to get controller loaded into my angularjs module

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related