Naming ng-app breaks data-binding in angularjs

Question

I am working on my first website with AngularJS. My app works fine when I declare ng-app in the html tag. However, data binding stops working when I try to assign a name to the ng-app directive so that I can create a module with controllers and filters.

Here is my working code:

<!doctype html>
<html data-ng-app>
    <head>
        <meta charset="utf-8">
        <title>Twittiment</title>
        <link href="search_client.css" type="text/css" rel="stylesheet" />
        <link href="tweet.css" type="text/css" rel="stylesheet" />
        <script src="jquery.min.js"></script>
        <script src="search_client.js"></script>
        <script src="/js/highcharts.js"></script>
    </head>

    <body data-ng-controller="TweetCtrl">
        <div id="main">
            <div id="search_box">
                <h1 id="title">Twitter Sentiment Analysis</h1>

                <input name="search_terms" autofocus="autofocus" data-ng-model="query" />
                <button id="search_button" data-ng-click="search()">Search</button>
                <div id="data"></div>I can add:{{1+3}}</div>
            <div id="search_results">Search tweets:
                <input name="filter" data-ng-model="text" /><span>Displaying {{(tweets|filter:text).length}} of {{tweets.length}} tweets</span>

                <div class="tweet" data-ng-repeat="tweet in tweets | filter:text">
                    <div class="tweet_left">
                        <div class="tweet_image"> <a href="https://twitter.com/{{tweet.user.screen_name}}">
                        <img src="{{tweet.user.profile_image_url}}">
                    </a>

                        </div>
                    </div>
                    <div class="tweet_right">
                        <div class="tweet_triangle"></div>
                        <div class="tweet_row">
                            <div class="tweet_username"> <a href="https://twitter.com/{{tweet.user.screen_name}}" target="search">{{tweet.user.screen_name}}</a>
 <span class="tweet_name">{{tweet.user.name}}</span>
 <span class="delete_tweet">Mark as irrelevant</span>
                                <input class="close_button" type="image" src="/xmark.jpg" alt="submit" ng-click="delete($index)">
                            </div>
                        </div>
                        <div class="tweet_row">
                            <div class="tweet_text">{{tweet.text}}</div>
                        </div>
                        <div class="tweet_row">
                            <div class="tweet_timestamp">
                                <img class="stream_bluebird" src="bird_16_blue.png"> <span class="retweets">{{tweet.retweet_count}} retweets</span>
 <a href="http://twitter.com/{{tweet.user.screen_name}}/status/{{tweet.id}}" target="search" class="tweet_time_link">{{tweet.created_at}}</a>

                                <img src="reply.png" class="imageof_reply"> <a href="http://twitter.com/intent/tweet?in_reply_to={{tweet.id}}" target="search">Reply</a>

                                <img src="retweet.png" class="imageof_retweet"> <a href="http://twitter.com/intent/retweet?tweet_id={{tweet.id}}" target="search">Retweet</a>

                                <img src="favorite.png" class="imageof_favorite"> <a href="http://twitter.com/intent/favorite?tweet_id={{tweet.id}}" target="search">Favorite</a>

                            </div>
                        </div>
                    </div>
                    <div class="sentiment" data-ng-controller="RatingCtrl">
                        <div class="rating" data-ng-model="tweet.polarity">{{tweet.polarity}}</div>
                        <button data-ng-click="changeRating('Positive')">
                            <img class="positive" src="/thumbs-up-button.jpg">
                        </button>
                        <button data-ng-click="changeRating('Neutral')">
                            <img class="neutral" src="/thumbs-sideways-button.jpg">
                        </button>
                        <button data-ng-click="changeRating('Negative')">
                            <img class="negative" src="/thumbs-down-button.jpg">
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="total">
             <h2 id="totalTitle"></h2>

            <div>{{tweets.length}}</div>
            <div id="totalPos"></div>
            <div id="totalNeut"></div>
            <div id="totalNeg"></div>
        </div>
        <div id="container" style="width:40%; height:400px;"></div>
        <script src="/ang-Twittiment/app/lib/angular/angular.js"></script>
    </body>
</html>

JS:

function TweetCtrl($scope, $http) {
    $scope.search = function () {
        $http({
            method: 'GET',
            url: 'http://localhost:8080/search_server.php?q=' + $scope.query
        }).success(function (data) {
            $scope.tweets = data;
        })
            .error(function (data) {
            alert("search error")
        });
    };
    $scope.delete = function (idx) {
        $scope.tweets.splice(idx, 1);
    };
}

function RatingCtrl($scope) {
    $scope.changeRating = function (rating) {
        $scope.tweet.polarity = rating;
    }
}

And here is the code that doesn't work:

<html data-ng-app="myApp">

JS:

var myAppModule = angular.module('myApp', []);

myAppModule.controller('TweetCtrl', function ($scope, $http) {
    $scope.search = function () {
        $http({
            method: 'GET',
            url: 'http://localhost:8080/search_server.php?q=' + $scope.query
        }).success(function (data) {
            $scope.tweets = data;
        })
            .error(function (data) {
            alert("search error")
        });
    };
    $scope.delete = function (idx) {
        var person_to_delete = $scope.tweets[idx];

        $scope.tweets.splice(idx, 1);
    };
});

myAppModule.controller('RatingCtrl', function ($scope) {
    $scope.changeRating = function (rating) {
        $scope.tweet.polarity = rating;
    }
});

Can anyone tell me why data binding stops whenever I assign a name to the ng-app directive? Is there a step I'm missing when configuring the module? Any help would be greatly appreciated, please let me know if more information is needed.

Don't see anything obviously wrong, would start dropping console.log statements around to see what's getting created and what's not. — shaunhusain
– shaunhusain, Commented Jul 20, 2013 at 22:25
what's with the data attribute prefix? what is it for? try removing that first. — Eliran Malka
– Eliran Malka, Commented Jul 20, 2013 at 22:42
@EliranMalka angular automatically strips this, it's there to make the document HTML5 compliant, there are some other gotchas (can't use custom element names in IE without declaring them first in IE <= 8 I believe) that angular has some tricks for. — shaunhusain
– shaunhusain, Commented Jul 20, 2013 at 22:46
oh i see, nice to know. i assume that could have been done also be declaring an ng namespace for the document. well that's outside the scope here.. — Eliran Malka
– Eliran Malka, Commented Jul 20, 2013 at 23:10
Thank you all for your responses. I was able to fix my problem by loading the angular library before my javascript file. I was receiving this error: Reference Error: angular is not defined. — sh3nan1gans
– sh3nan1gans, Commented Jul 22, 2013 at 4:43

Abhishek Goswami · Accepted Answer · 2013-11-19 09:59:27Z

4

actually you need to put your angular.js file reference before angular.module statement so it can identify angular otherwise when you will check the javascript error it shows angular is not define

answered Nov 19, 2013 at 9:59

Abhishek Goswami

411 silver badge3 bronze badges

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

Comments

Tushar Sharma · Accepted Answer · 2013-09-13 09:40:12Z

0

var myAppModule = angular.module('myAppModule', []);

This should do it.

When you declare ng-app="myApp", angular compiler searches for controllers registered with "myApp", but the controllers are registered with "myAppModule"

answered Sep 13, 2013 at 9:40

Tushar Sharma

3471 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Naming ng-app breaks data-binding in angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related