Angular JS: After Adding controller in external file doesn't give the expected result

Question

I am trying to call a external js file to implement angular js controller. Please find the code below. But it is not giving the result for the external js file access code is being added. Could someone correct me what am i doing mistake here?

[It gives the proper result if I don't have added the external js access code]

<!DOCTYPE html>
<html >
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}
        </div>
        <script src ="ryanNameContorller.js"></script>

    </body>

</html>

ryanNameContorller.js

angular.module ('myApp', []).controller('ryanContrler', function($scope) {
    $scope.ryanFirstname = "Ryan",
    $scope.austinLastname = "Austin",
    $scope.fullName = function () {
        return $scope.ryanFirstname + " " + $scope.austinLastname; 
    }

});

And the result is,

Angular app didn't bootstrapped at all. Can you check the browser console and check the errors. Seems like you don't have ryanNameContorller.js file at the same place where your HTML file is. — Prashant
– Prashant, Commented Jul 31, 2015 at 5:19

Shrinivas Pai · Accepted Answer · 2015-07-31 06:55:30Z

1

You missed } in ryanContrler replace My full name : {{fullName()} with My full name : {{fullName()}}

Use this new code in ryanNameContorller.js file

angular.module('myApp').controller('ryanContrler', ['$scope', function($scope){
    $scope.ryanFirstname = "Ryan",
    $scope.austinLastname = "Austin",
    $scope.fullName = function() {
        return $scope.ryanFirstname + " " + $scope.austinLastname;
    }

}]);

HTML

<!DOCTYPE html>
<html >
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}}
        </div>
        <script src ="ryanNameContorller.js"></script>

    </body>

</html>

Demo here

edited Jul 31, 2015 at 6:55

answered Jul 31, 2015 at 6:16

Shrinivas Pai

7,7414 gold badges32 silver badges57 bronze badges

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

6 Comments

user1953977 Over a year ago

Please check our discussion in "Shubham Nigam" post. we have done this already, still the last one where external JS file is being accessed is not giving the result.

Shrinivas Pai Over a year ago

Replace the ryanNameContorller.js code with what i provided and add the ryanNameContorller.js at the end.

Shrinivas Pai Over a year ago

@user1953977 i have added a demo in my updated answer.

user1953977 Over a year ago

Just one query. To run the code, when I right click in Eclipse->Open With Web Browser, it is not giving the expected result in eclipse web browser. But, When I open this in Chrome browser, I am getting the exact proper output. Why is that not working in eclipse web browser, any idea?

Shrinivas Pai Over a year ago

Sorry mate I don't have much knowledge on Eclipse. Better you can create a new question with this.

|

Icycool · Accepted Answer · 2015-07-31 05:30:29Z

0

There are a couple mistakes in the code that might or might not contributed to the cause.

You should spell Controller correctly. Ctrl/Ctrler/Contorller are just confusing yourself and whoever that needs to maintain your code.
angular.module('myApp',[]) should only be called once. If you need to get the app in external js file, use angular.module('myApp').
Put scripts inside <head> or <body>, don't put it in <html> directly.
You should check console log first when you encounter error. If you don't understand it, post it in the question. (Hint: press F12 to open)

answered Jul 31, 2015 at 5:30

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Comments

Shubham Nigam · Accepted Answer · 2015-07-31 06:33:00Z

0

The problem is your <script> to add js file is after ng-controller <div> put it inside your <head> to make sure that it call first

Your HTML:->

<html >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
 <script src ="ryanNameContorller.js"></script>
</head>
    <body ng-app="myApp">

        <!-- Angular JS controller sample -->
        <div ng-controller="myAppCtrl">
            First name : <input type="text" ng-model="firstName"> <br>
            Last name : <input type="text" ng-model="lastName"> <br>
            Full name is : {{firstName + " " + lastName}} <br>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myAppCtrl', function($scope) {
                $scope.firstName = "Prabakar"
                $scope.lastName = "Prabu"
            });
        </script>

        <!-- Method based controller -->
        <div ng-controller="methodCtrler"> 
            <br>
            First name is : <input type="text" ng-model="fName"> <br>
            Last name is : <input type="text" ng-model="lName"> <br>
            Full name : {{myFunction() }}
            <br>        
        </div>
        <script>
            //var app1 = angular.module('myApp',[]);
            app.controller ('methodCtrler', function($scope) {
                $scope.fName = "Jonathan"
                $scope.lName = "Gladwin" 
                $scope.myFunction = function() {
                    return $scope.fName + " " + $scope.lName;
                }
            });
        </script>

        <!-- Method call from external JS files -->
        <br>
        <div ng-controller ="ryanContrler">
            My first name : <input type="text" ng-model="ryanFirstname"> <br>
            My last name : <input type="text" ng-model="austinLastname"> <br>
            My full name : {{fullName()}}
        </div>

    </body>

</html>

edited Jul 31, 2015 at 6:33

answered Jul 31, 2015 at 5:21

Shubham Nigam

3,96821 silver badges33 bronze badges

5 Comments

user1953977 Over a year ago

There was one close brach missing after fullName(), I added like this. Now, the first 2 controller is giving the correct result. The last one where I called external files doesn't give the expected result. Any problem in my ryanNameContorller.js ?

Shubham Nigam Over a year ago

Have put it in <head> as i said??

Shubham Nigam Over a year ago

then you need to post the code of ryanNameContorller.js

Shubham Nigam Over a year ago

that was minnor mistake of '}' bracket in HTML

user1953977 Over a year ago

"Srinivas Pai" has given the answer. One query is, if i move <script src ="ryanNameContorller.js"></script> into <head>, it is not able to access this JS file. So, As per "Srinivas" I kept the script part, it is accessing well and giving the expected output.

Collectives™ on Stack Overflow

Angular JS: After Adding controller in external file doesn't give the expected result

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related