AngularJS controller function is not working

Question

can anyone please tell me what is wrong in this code? I am getting {{author.name}} as output on my browser. Browser error says angular is not defined and failed to instantiate the module AuthorApp

           <!DOCTYPE html>
    <html ng-app="AuthorApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="Authors.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
    </head>
    <body >
        <div ng-controller="MyController">
            <ul>
                <li ng-repeat="author in authors">
                    {{author.name}}
                </li>
            </ul>
        </div>
    </body>
    </html>

Author.js code
    var AuthorApp = angular.module('AuthorApp', []);
    AuthorApp.controller("MyController", function ($scope) {
        $scope.authors = [
           { 'name': 'Xyz' },
            { 'name': 'abc' }
        ];

});

yes I have added as <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.9/…> — Sheetal
– Sheetal, Commented Jan 26, 2016 at 3:52

Dalorzo · Accepted Answer · 2016-01-26 02:34:52Z

2

authors.js will be executed first and then angular will be loaded. Change the order of your scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
<script src="Authors.js"></script>
</head>

answered Jan 26, 2016 at 2:34

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

2 Comments

Sheetal Over a year ago

I tried doing that and i am getting a blank page if i change the order

Dalorzo Over a year ago

There is no way... so something else has to be wrong with what your are doing

Shel · Accepted Answer · 2016-01-27 15:15:24Z

The previous answer was correct, but I can't comment yet. I put your code in a plunk with the script order corrected and it works fine:

http://plnkr.co/edit/kIb0y2?p=preview

Do you have the path to the Author.js file correct? It needs to be in the same directory for referencing it without any other path info to work. Test to see if it is loading by putting an alert at the top of the file. If you don't get the alert, tinker with the path in the src attribute for the script until you get it.

//Author.js code
alert("Author.js file loaded!");
var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller("MyController", function ($scope) {
    $scope.authors = [
       { 'name': 'Xyz' },
        { 'name': 'abc' }
    ];

});

Collectives™ on Stack Overflow

AngularJS controller function is not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related