CODEWITHSUNDEEP
.netangularjsasp.net-mvc
AndrewC10
AndrewC10

Reputation: 357

AngularJS Not Displaying Message Properly

I am a beginner programmer learning angular and following along with a Music Store Application. I am having some trouble displaying a message in angularJS and was wondering if its a problem in the code, or something else. My expected result is to simply display "Manish Kumar" on the page. However, my actual result is simply displaying {{message}} from the html. It's as if its not picking up the JS controller reference. Please note the example was done in VS 2013, while I'm using 2015. Any help is appreciated, as I am a beginner. Thanks!!

My Code & Files:

Index HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/angular.js"></script>
    <script src="../Scripts/theMusic.js"></script> 
    <script src="../Scripts/MusicListController.js"></script>
</head>
<body>
    <div ng-app="theMusic">
        <div ng-controller="MusicListController">
            {{message}}
        </div>  
    </div> 
</body>
</html>

MusicListController:

(function (app) {
    var MusicListController = function ($scope) {
        $scope.message = "Manish Kumar";
    };
    app.controller("MusicListController", MusicListController);
}(Angular.module("theMusic")));

theMusic Class:

(function () {
    var app = Angular.module("theMusic", []);
}());

Upvotes: 0

Views: 300

Answers (1)

VjyV
VjyV

Reputation: 334

Please try this type i think solve your problem just make some changes.

(function () {
    var app = angular.module("theMusic", []);
}());

(function (app) {
    var MusicListController = function ($scope) {
        $scope.message = "Manish Kumar";
    };
    app.controller("MusicListController", MusicListController);
}(angular.module("theMusic")));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/angular.js"></script>
    <script src="../Scripts/theMusic.js"></script> 
    <script src="../Scripts/MusicListController.js"></script>
</head>
<body>
    <div ng-app="theMusic">
        <div ng-controller="MusicListController">
            {{message}}
        </div>  
    </div> 
</body>
</html>

Upvotes: 1

Related Questions