Luke Samuel Luke Samuel - 6 months ago 26
AngularJS Question

Angularjs controller is breaking my expressions

I just finished the CodeSchool course on Angularjs and have been messing with updating a current website of mine. Funnily enough, if I write controller or directive code, it doesn't work. But it seems to work fine using anyone else's code. Therefore, I strongly suspect something is wrong with my app code, but I just can't seem to find it for the life of me.

Omitted code is represented by

...omit
and is available if its actually relevant and I am wrong.

Here's the relevant html:

<!DOCTYPE html>
<html ng-app="main" lang="en">
<head>
...omit
<!--Script Includes-->
<script src="/script/jquery.min.js"></script>
<script src="/script/bootstrap.min.js"></script>
<script src="/script/angular.min.js"></script>
<script src="/script/main.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
...omit
<div class="container content">
...omit
<div id="schedule">
<h1>See us in Concert</h1>
<ul class="list-group" ng-controller="ScheduleController as schedCtrl">
<li class="list-group-item">{{ 5 + 5 }}</li>
<li class="list-group-item">Highlights <span class="badge">{{schedCtrl.highlight.count}}</span></li>
<li class="list-group-item">Upcoming <span class="badge">{{schedCtrl.now.count}}</span></li>
<li class="list-group-item" ng-repeat="next in schedCtrl.future">{{next.month}} <span class="badge">{{next.count}}</span></li>
</ul>
</div>
...omit
</div>
</body>
</html>


And 'main.js':

(function () {
'use strict';
var app = angular.module('main', [ ]);

app.controller('ScheduleController', [$http, function ($http) {
// Some test data
this.highlight.count = 2;
this.now.count = 5;
this.future = [{month: "June", count: 7}, {month: "July", count: 4}];
}]);
})();


I've read over it several times and searched countless pages for a solution but I just can't seem to get it to work. Rather than treating the expressions as expressions it simply treats them as text, printing out the expression itself.

Answer

There are multiple errors in your code. Going by simpler way of coding use the following example:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container content">
        <div id="schedule">
            <h1>See us in Concert</h1>
            <ul class="list-group">
                <li class="list-group-item">{{ 5 + 5 }}</li>
                <li class="list-group-item">Highlights <span class="badge">{{highlight.count}}</span></li>
                <li class="list-group-item">Upcoming <span class="badge">{{now.count}}</span></li> 
                <li class="list-group-item" ng-repeat="x in future">{{x.month}} <span class="badge">{{x.count}}</span></li> 
            </ul>
        </div>
<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    // Some test data
    $scope.highlight = {count:2};
    $scope.now = {count : 5};
    $scope.future = [{month: "June", count: 7}, {month: "July", count: 4}];
});
</script> 
</body>
</html>

enter image description here

Comments