AngularJS: Iniciando com Controladores

<!DOCTYPE html>
<html ng-app="vote.app">

<head>
  <meta charset="UTF-8">
  <title>Blog do Gabriel Feitosa> AngularJS: Iniciando com Controladores</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>
    <a href="http://gabrielfeitosa.com" target="_blank">Blog do Gabriel Feitosa</a>
  </h1>
  <h2>
    AngularJS: Iniciando com Controllers 
  </h2>
  <div ng-controller="VotacaoController as votacao">

    <form>
      <input ng-model="votacao.item.nome" placeholder="Informe um item" />
      <button ng-click="votacao.adicionar()">Add</button>
    </form>

    <br>
    <br>

    <table>
      <tr>
        <th>
          Item
        </th>
        <th>
          Classificação
        </th>
      </tr>
      <tr ng-repeat="i in votacao.items" ng-class-even="'even'">
        <td>{{i.nome}}</td>
        <td>
          <a ng-click="votacao.like($index)">like</a><span class="like"> ({{i.like}})</span>
          <a ng-click="votacao.unlike($index)">unlike</a><span class="unlike"> ({{i.unlike}})</span>
        </td>
      </tr>
    </table>

    <br>
    <br>
    <button ng-click="votacao.reset()">Reset</button>
    <br>
    <br>
    <h2>
      JSON
    </h2>
    <pre ng-class="{pre: votacao.items.length}">
        {{votacao.items | json}}
    </pre>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="vote.app.js"></script>
  <script src="votacao.controller.js"></script>
  
</body>
</html>

/* Put your css in here */

a {
  text-decoration: underline;
  cursor: pointer;
}

table{
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

table th{
  background-color: silver;
  padding: 10px;
  
}

table td{
  padding: 10px;
}

table td span{
  font-weight: bold;
}

.pre {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.even{
  background-color: #D0DEF3;
}

.like{
  color: blue;
}

.unlike{
  color: red;
}

(function(){
  
  // Definindo o módulo e o controlador
  angular.module('vote.app')
  .controller('VotacaoController', VotacaoController);

  // Injeção de dependência
  VotacaoController.$inject = [];

  function VotacaoController() {
    var self = this;
    
    self.items = [];

    //Declarando as funções que serão expostas à view
    self.adicionar = adicionar;
    self.remover = remover;
    self.like = like;
    self.unlike = unlike;
    self.reset = reset;

    prepararNovoItem();

    
    //////////FUNÇÕES/////////////
    // essa função não é acessível através da view
    function prepararNovoItem() {
      self.item = {
        nome: '',
        like: 0,
        unlike: 0
      };
    }
  
    function adicionar() {
      self.items.push(self.item);
      prepararNovoItem();
    }

    function remover(index) {
      self.items.splice(index, 1);
    }

    function like(index) {
      self.items[index].like++;
    }

    function unlike(index) {
      self.items[index].unlike++;
    }

    function reset() {
      self.items = [];
      prepararNovoItem();
    }

  }
  
})();

(function() {

  angular.module('vote.app', []);

})();