How to use an AngularJS controller from a controller.js file in html code

Question

I am trying to use a controller that I wrote and saved in a controller.js file, but it won't work in my html code. I have the code written as: (This is the version that doesn't work correctly)

<div ng-app="myApp" ng-controller="movieCtrl"> ..bit of my html code.. </div> <script src="controller.js"></script>

This version however works just fine:

<div ng-app"myApp" ng-controller="movieCtrl"> irrelavent html code here </div> <script> var app = angular.module('myApp', []); app.controller('movieCtrl', function($scope, $http) { $scope.$watch('search', function() { fetch(); }); $scope.search = "tt2975590"; function fetch() { $http.get("http:www.omdbapi.com/?i=" + $scope.search + "&plot=full&r=json") .then(function(response) { $scope.details = response.data; }); } $scope.update = function(movie) { $scope.search = movie.Title; } }); </script>

How do I get it to work with the controller in its own controller.js file?

How would I fix that? And there shouldn't be anything wrong with my controller code, as the code works perfectly when in the index.html file, but not when I try to put it in its own controller.js file and load it into the html code with <script src="controller.js"></script> — Mike, CommentedMay 7, 2016 at 3:41
I am only working on the controller, so its a very small and simple folder set up. I have a main project folder, and then the index.html file is in there, with another folder in there called controllers for the controller.js file — Mike, CommentedMay 7, 2016 at 3:45

sebenalern · Accepted Answer · 2016-05-07 02:32:19Z

1

It isn't working because you have a syntax error here ng=controller="movieCtrl".

It should be ng-controller="movieCtrl"

I am assuming the rest of your code is correct. If that is right, then this change should fix your problems.

answered May 7, 2016 at 2:32

sebenalern

2,5693 gold badges29 silver badges37 bronze badges

that was just a typo when typing it up here, i do actually have it as ng-controller in my code
– Mike
CommentedMay 7, 2016 at 3:14
Then please provide more code because there is nothing wrong with what you have posted. What have you named the angular module when you declared it? Are you sure the script is being loaded? Also make sure the name of your controller is correct.
– sebenalern
CommentedMay 7, 2016 at 3:16
var app = angular.module('myApp', []); app.controller('movieCtrl', function($scope, $http) { $scope.$watch('search', function() { fetch(); }); $scope.search = "tt2975590"; function fetch() { $http.get("http:www.omdbapi.com/?i=" + $scope.search + "&plot=full&r=json") .then(function(response) { $scope.details = response.data; }); } });
– Mike
CommentedMay 7, 2016 at 3:28
I think the path to your controller.js file is wrong. But I am not for sure. What is the file structure of your project?
– sebenalern
CommentedMay 7, 2016 at 3:30
That is my code for the controller, which works perfectly fine if I put it directly into the html code inside the <script></script> but doesn't work if it has its own file named controller.js and is loaded into it in the code <script src="controller.js"></script>
– Mike
CommentedMay 7, 2016 at 3:30

| Show 7 more comments

Mike · Accepted Answer · 2016-05-07 06:34:59Z

So, as discussed, the problem was the relative path. Solution: Change the src attribute to "../app/controllers/controller.js".

Thank you very much for the help, I appreciate it.
– Mike
CommentedMay 7, 2016 at 4:35 — Mike, CommentedMay 7, 2016 at 4:35

AllJs · Accepted Answer · 2016-05-07 03:04:40Z

You didn't instantiate your controller properly in your HTML code.

Here is a much cleaner solution that works. Remember to change ng=controller to ng-controller in your html code.

HTML Markup

<div ng-app="myApp" ng-controller="movieCtrl"> //bit of html and Angular code such as... <input type="text" ng-model="watchInput" Placeholder="Type Something"/> <p>{{watchInput}}</p> </div> <script src="controller.js"></script>

Controller in controller.js

Your AngularJS Controller should look something like...

myApp = angular.module ("myApp", []); myApp.controller("movieCtrl", ["$scope", function($scope){ //Your Controller code goes here }]);

Hope this helps. Please let me know.

That was just a typo when typing it here, I do have it correct in my code as ng-controller. What you wrote looks almost identical to the code I wrote for the controller.js file — Mike, CommentedMay 7, 2016 at 3:17

Collectives™ on Stack Overflow

How to use an AngularJS controller from a controller.js file in html code

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related