CODEWITHSUNDEEP
javascriptangularjsmodel-view-controllerangularjs-controller
Jaskaran Singh Puri
Jaskaran Singh Puri

Reputation: 739

Unable to get controller loaded into my angularjs module

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?

Upvotes: 0

Views: 64

Answers (3)

Alexander Leon
Alexander Leon

Reputation: 61

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..

Upvotes: 0

tcooc
tcooc

Reputation: 21209

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>

Upvotes: 2

Gabcvit
Gabcvit

Reputation: 1488

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"
 }]);

Upvotes: 0

Related Questions