What's the point of creating a directive in this angular.js example?

Question

So I was following a tutorial on code academy on Angular.js. I understood every step and these are the final files which displays a simple game board. My question is: why did we need to go through the trouble of creating a directive called game and linking that to game.html for displaying the content? We already have the $scope given in the ScopeController file. Why couldn't we just go to the index.html file and just display using expressions with ng-repeat like this: {{scope.visitor_score}}. So couldn't we have just done that all in the index.html file instead of making a directive?

index.html:

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="GameboardApp">
    <div class="header">
      <h1 class="logo">GameBoard</h1>
    </div>

    <div class="main" ng-controller="ScoreController">
      <div class="container">

        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>

        </div>

      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/ScoreController.js"></script>

    <!-- Directives -->
    <script src="js/directives/game.js"></script>

  </body>
</html>

app.js:

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

ScopeController.js

app.controller('ScoreController', ['$scope', function($scope) {
  $scope.scores = [
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Charlotte",
        name: "Hornets"
      },
      home_team: {
        city: "New York",
        name: "Knicks"
      },
      period: "Final",
      visitor_score: 110,
      home_score: 82
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Dallas",
        name: "Mavericks"
      },
      home_team: {
        city: "Los Angeles",
        name: "Clippers"
      },
      period: "Final",
      visitor_score: 100,
      home_score: 120
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Brooklyn",
        name: "Nets"
      },
      home_team: {
        city: "Detroit",
        name: "Pistons"
      },
      period: "Third Quarter",
      visitor_score: 69,
      home_score: 74
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Indiana",
        name: "Pacers"
      },
      home_team: {
        city: "Philadelphia",
        name: "76ers"
      },
      period: "Third Quarter",
      visitor_score: 70,
      home_score: 72
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "San Antonio",
        name: "Spurs"
      },
      home_team: {
        city: "Minnesota",
        name: "Timberwolves"
      },
      period: "Halftime",
      visitor_score: 58,
      home_score: 43
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Orlando",
        name: "Magic"
      },
      home_team: {
        city: "Portland",
        name: "Trail Blazers"
      },
      period: "First Quarter",
      visitor_score: 13,
      home_score: 26
    }    
  ]  
}]);

game.html:

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period">{{ info.period }} </p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score">{{ info.visitor_score }} </h2>
      <h3>
        <span class="visitor-city">{{ info.visitor_team.city }}  </span><br/>
        <span class="visitor-name">{{ info.visitor_team.name }} </span>
      </h3>
    </div>
    <div class="dash col-xs-3">
      <h2>-</h2>
    </div>
    <div class="home col-xs-4">
      <h2 class="home-score">{{ info.home_score }} </h2>
      <h3>
        <span class="home-city">{{ info.home_team.city }} </span><br/>
        <span class="home-name">{{ info.home_team.name }} </span>
      </h3>
    </div>
  </div>
</div>

game.js:

app.directive('game',function(){
  return{
    restrict: 'E',
    scope: {
      info: '='
    },
    templateUrl: 'js/directives/game.html'
  }
}
              );

Okay, am I correct when I say that just for this app, we could do it all in the index.html file. Like is my logic right? I'm just trying to understand the concept. Say just for this question, we don't need to make a directive right? — Angular, Sep 24 '15 at 23:07
That is a tiny app. Can't put 100's or 1000's of components in one file and manage it very well — charlietfl, Sep 24 '15 at 23:07
For small instance...correct. Tutorials are intended to expose you to what you can do though and many angular apps are huge. Better to learn scalability right from the start — charlietfl, Sep 24 '15 at 23:08
when you say for small instance, you mean like for "small apps" like this right? Or do you mean that my logic is "somewhat" right? — Angular, Sep 24 '15 at 23:10
Right...small app instance like this one page that doesn't have 100's of different routes and tons of different view components — charlietfl, Sep 24 '15 at 23:11
Alright thanks so much! I can't mark correct answer aha I think you commented instead. Thanks a lot tho! — Angular, Sep 24 '15 at 23:13

score 0 · Answer 1 · edited May 23 '17 at 12:15

Yes, you could. But you'd better not.

Clean code is simple and direct. Clean code reads like well-written prose.

---- Grady Booch, author of Object-Oriented Analysis and Design with Applications

It's the matter of getting your code clean, beautiful and reusable.

Indeed, suppose you will need to show that repeated list on 10 differnt pages. Copypasting these 22 lines would be a very, very, very bad idea.

If you have it only in one place, well, you might want to leave it with ng-repeat, but it's likely you're going to reuse that, so you will have to refactor later anyway.

I think it might be useful for you to read some of Bob Martin's books or check out his videos, thay are awesome.

Cheers!

What's the point of creating a directive in this angular.js example?

1 Answers1