Having difficulty loading the controller into my AngularJS module

Question

Having difficulty loading the controller into my AngularJS module

I've been attempting to organize my angularjs controllers into separate files without success.

Folder Structure:

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

Content of master.js

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

Content of resturant.js

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

Code in index.php

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

UPDATE: I have only included 'master.js' in my index.php file. Do I also need to import 'resturant.js'?

javascript angularjs model-view-controller angularjs-controller

Answer 1

Answer №1

Ensuring you use the correct module definition call is crucial. Remember, angular.module(name) retrieves a module, while angular.module(name, [requires]) creates one.

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

Once your module is created, it must be declared as a dependency of your app:

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

Modified code for clarity:

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>

Answer 2

Ensuring you use the correct module definition call is crucial. Remember, angular.module(name) retrieves a module, while angular.module(name, [requires]) creates one.

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

Once your module is created, it must be declared as a dependency of your app:

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

Modified code for clarity:

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>

Answer 3

Answer №2

It appears that your controller configuration may be incorrect. Consider using the following code snippet instead:

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

Answer 4

It appears that your controller configuration may be incorrect. Consider using the following code snippet instead:

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

Answer 5

Answer №3

Here is a possible solution...

Organize your files like this:

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

// restaurant.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']);

Be sure to include paths to all these files in your index.php file. I hope everything is covered.

Answer 6

Here is a possible solution...

Organize your files like this:

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

// restaurant.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']);

Be sure to include paths to all these files in your index.php file. I hope everything is covered.

Having difficulty loading the controller into my AngularJS module

Answer №1

Answer №2

Answer №3

Similar questions

Encountering unidentified data leading to the error message "Query data must be defined"

What are some methods for simulating user interaction on input and button elements?

Cannot retrieve the <li> element from the array

Unlimited possibilities with parameters on an express server

Using Promises Across Multiple Files in NodeJs

Instructions on utilizing sockets for transmitting data from javascript to python

Is it possible to execute a function defined within an eval() function using setInterval()?

Utilizing AngularJS and IBM Bluemix to load images

3.2+ Moodle communication and connections

Automatically switch slides and pause the carousel after completing a loop using Bootstrap 5 Carousel

Mobile device experiences shader malfunction

Spin a sphere by clicking on a link using three.js

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

Incorporate a secondary (auxiliary) class into ReactJS

Update a particular package using Node

Click on the header to activate the accordion link with a trigger

Is there a way to consistently trigger the browser.webRequest.onBeforeRequest event in Mozilla Firefox when it is launched via a link?

What steps can be taken to provide accurate information in the absence of ImageData?

The error message indicates that the argument cannot be assigned to the parameter type 'AxiosRequestConfig'

Learn the steps for submitting and interpreting information in Node Express