angular expression not showing value

Question

I have the following code in html file

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <link href="Styles.css" rel="stylesheet"
</head>
<body ng-app="FirstModule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Likes</th>
                    <th>DisLikes</th>
                    <th>Likes/Dislikes</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td>{{ technology.name}}</td>
                    <td>{{ technology.likes}}</td>
                    <td>{{ technology.dislikes}}</td>
                    <td>
                        <input type="button" value="Like" ng-click="incrementLikes(technology)" />
                         <input type="button" value="Like" ng-click="incrementDisLikes(technology)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

And the code in js is

/// <reference path="angular.min.js" />
var myApp = angular.module("FirstModule", []);
var myController = function ($scope) {



    var technologies = [
                         { name: "C#", likes: 0, dislikes: 0 },
                         { name: "ASP.NET", likes: 0, dislikes: 0 },
                         { name: "SQL", likes: 0, dislikes: 0 },
                         { name: "AngularJS", likes: 0, dislikes: 0 },
    ];

    $scope.technologies = technologies;
    $scope.incrementLikes = function (technology) {
        $scope.incrementLikes++;
    }

    $scope.incrementDisLikes = function (technology) {
        $scope.incrementDisLikes++;
    }
};

myApp.controller("myController", myController);

I am getting the following error as Error: $injector:modulerr Module Error. I am new to angularjs and trying to learn event handling. On button click likes count will increase and same for dislikes.

You have ngApp declared as MyModule - but in code you have FirstModule - you also have MyController vs myController — tymeJV
– tymeJV, Commented Mar 22, 2016 at 21:11
Everyting seems working here plnkr.co/edit/32ETCvd8KGsG9zUdfdZk?p=preview — Pankaj Parkar
– Pankaj Parkar, Commented Mar 22, 2016 at 21:18
@PankajParkar There's also the bug of trying to increment the scope functions instead of the properties on the technology object being passed in. — Lex
– Lex, Commented Mar 22, 2016 at 21:23
@Lex yes.. you are correct.. Thanks for heads up.. basically I just concentrated on the initial problem..as OP doesn't getting anything on page. — Pankaj Parkar
– Pankaj Parkar, Commented Mar 22, 2016 at 21:25

Lex · Accepted Answer · 2016-03-22 22:25:51Z

2

It's because you have this in the HTML:

<body ng-app="MyModule">

And yet you have defined your app module as:

var myApp = angular.module("FirstModule", []);

You need to change them so they are either both "MyModule" or "FirstModule".

Update
So you have corrected the module injection error, but there is also this error:

$scope.incrementLikes = function (technology) {
    $scope.incrementLikes++;
}

$scope.incrementDisLikes = function (technology) {
    $scope.incrementDisLikes++;
}

It should be:

$scope.incrementLikes = function (technology) {
    technology.likes += 1;
}

$scope.incrementDisLikes = function (technology) {
    technology.dislikes += 1;
}

You may also want to change the value on your second button to be "Dislike" instead of "Like".

Working JSFiddle

Associated code, HTML first:

<div ng-app="FirstModule" ng-controller="myController">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Likes</th>
                <th>DisLikes</th>
                <th>Likes/Dislikes</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="technology in technologies">
                <td>{{ technology.name}}</td>
                <td>{{ technology.likes}}</td>
                <td>{{ technology.dislikes}}</td>
                <td>
                    <input type="button" value="Like" ng-click="incrementLikes(technology)" />
                    <input type="button" value="Dislike" ng-click="incrementDisLikes(technology)" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

var myApp = angular.module("FirstModule", []);
var myController = function($scope) {
    var technologies = [{
        name: "C#",
        likes: 0,
        dislikes: 0
    }, {
        name: "ASP.NET",
        likes: 0,
        dislikes: 0
    }, {
        name: "SQL",
        likes: 0,
        dislikes: 0
    }, {
        name: "AngularJS",
        likes: 0,
        dislikes: 0
    }, ];

    $scope.technologies = technologies;

    $scope.incrementLikes = function(technology) {
        technology.likes += 1;
    }

    $scope.incrementDisLikes = function(technology) {
        technology.dislikes += 1;
    }
};

myApp.controller("myController", myController);

edited Mar 22, 2016 at 22:25

answered Mar 22, 2016 at 21:12

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

4 Comments

Lex Over a year ago

@curiousDev I updated the question to address the error after your module inject error was resolved.

Lex Over a year ago

Explain what is not working now. Did you check the JSFiddle I posted?

curiousDev Over a year ago

Same error Error: $injector:modulerr Module Error andi run from visual studio

Lex Over a year ago

I have given you a JSFiddle. I just updated the answer to include the code from that JSFiddle. I'm not sure what else I can give you, but if you are still experiencing the module injection error then there is some syntax error somewhere in your code or a mismatch between module names in your javascript and HTML. Take a look at what I have provided, compare it to what you have and see if you can spot the issue.

Collectives™ on Stack Overflow

angular expression not showing value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related