2
\$\begingroup\$

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";
            }
        };

    }]);
})();
\$\endgroup\$
1
\$\begingroup\$

I think you need to decouple the view (html part) from the controller. You can do this by using $scope.

For example, instead of writing

<span ng-repeat="rev in myCtrl.reviews | limitTo : (myCtrl.reviews.length / 2 |number:0)">

You should

<span ng-repeat="rev in reviews | limitTo : (reviews.length / 2 |number:0)">

In the controller you put reviews in the $scope. Please see this doc https://docs.angularjs.org/tutorial/step_02

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.