I'm new to Angular and I would like some advice on how I can improve my code. The main things that I want to focus on are decoupling and code correctness.
HTML:
<body ng-controller="myController as myCtrl">
<fieldset>
Select movie to display:
<button ng-click="myCtrl.change('mortalkombat')">Mortal Kombat</button>
<button ng-click="myCtrl.change('princessbride')">Princess Bride</button>
<button ng-click="myCtrl.change('sherlockholmes')">Sherlock Holmes</button>
<button ng-click="myCtrl.change('tmnt')">TMNT</button>
<button ng-click="myCtrl.change('tmnt2')">TMNT2</button>
</fieldset>
<div ng-show="myCtrl.movie !== ''">
<h1>{{myCtrl.info[0] + " (" + myCtrl.info[1] + ")"}}</h1>
<div id=outerbox>
<div id=overview>
<div>
<img ng-src="{{myCtrl.movie}}/overview.png" alt="general overview" />
</div>
<dl ng-repeat="over in myCtrl.overview">
<dt>{{over.split(':')[0]}}</dt>
<dd>{{over.split(':')[1]}}</dd>
</dl>
</div>
<div id=reviews>
<div id=banner>
<img ng-src="{{myCtrl.pic}}" alt="{{myCtrl.alt}}"/>
{{myCtrl.info[2] + "%"}}
</div>
<div class=revcol>
<span ng-repeat="rev in myCtrl.reviews | limitTo : (myCtrl.reviews.length / 2 |number:0)">
<p>
<img ng-src="{{myCtrl.image(rev['type'])}}" alt="{{rev['type']}}"/>
<q>{{rev['comment']}}</q>
</p>
<p>
<img src="/critic.gif" alt="Critic"/>
{{rev['name']}} <br/>
{{rev['from']}}
</p>
</span>
</div>
<div class=revcol>
<span ng-repeat="rev in myCtrl.reviews | limitTo : -(myCtrl.reviews.length / 2)">
<p>
<img ng-src="{{myCtrl.image(rev['type'])}}" alt="{{rev['type']}}"/>
<q>{{rev['comment']}}</q>
</p>
<p>
<img src="/critic.gif" alt="Critic"/>
{{rev['name']}} <br/>
{{rev['from']}}
</p>
</span>
</div>
</div>
<div id=footer>
<p>(1-{{myCtrl.reviews.length}}) of {{myCtrl.reviews.length}}</p>
</div>
</div>
JS:
(function(){
var app = angular.module('myApp', []);
app.controller('myController', ['$http', function($http){
this.movie = '';
var myApp = this;
myApp.info = [];
myApp.overview = [];
myApp.over = [];
myApp.pic = '';
myApp.alt = '';
myApp.reviews = [];
this.change = function(movie){
this.movie = movie;
$http.get("./" + movie + "/info.txt").success(function(data){
myApp.info = data.split('\n');
console.log(myApp.info);
myApp.rank();
});
$http.get("./" + movie + "/overview.txt").success(function(data){
myApp.overview = data.split('\n');
console.log(myApp.overview);
});
$http.get("./" + movie + "/reviews.json").success(function(data){
myApp.reviews = data;
console.log(myApp.reviews);
});
};
this.rank = function(){
if(myApp.info[2] >= 60){
myApp.pic = "/freshbig.png";
myApp.alt = "Fresh";
}
else{
myApp.pic = "/rottenbig.png";
myApp.alt = "Rotten";
}
};
this.image = function(r){
if(r === 'FRESH'){
return "/fresh.gif";
}
else{
return "/rotten.gif";
}
};
}]);
})();
