Cria um GerenciadosDeListaDeTarefas para buscar todas ou uma por id

www/js/controllers.js

@@ -1,24 +1,17 @@
 angular.module('app.controllers', [])
 
-.controller('MinhasListasCtrl', function($scope) {
-  $scope.minhasListas = [
-    { _id: '1', name: 'Lista de compras 1' },
-    { _id: '2', name: 'Lista de compras 2' },
-  ];
-
+.controller('MinhasListasCtrl', function($scope, GerenciadorDeListasDeTarefas) {
+  $scope.minhasListas = GerenciadorDeListasDeTarefas.buscarTodas()
 
 })
 
-.controller('ListaDetalhesCtrl', function($scope, $stateParams) {
-  //                                              ^^^^^^^^^^^^
-  // $stateParams é um objeto que guarda os rótulos que vc definiu com ":" na definição de rota.
-  //  Hein!??! Explico:
-  // Na linha 30 de routes.js a gente definiu a rota "/minhas-listas/:listaId", não foi?
-  // Quando a url "/minhas-listas/123" for acessada o $stateParams.listaId vai retornar o valor "123"!
-  // Fácil, né não?! ;)
-
+.controller('ListaDetalhesCtrl', function($scope, $stateParams, GerenciadorDeListasDeTarefas) {
   var idDaLista = $stateParams.listaId;
-  // A gente vai usar esse "idDaLista" para recuperar a lista que queremos exibir os detalhes.
+  var listaDeTarefas = GerenciadorDeListasDeTarefas.buscarPorId(idDaLista);
+
+  // Torna a lista de tarefas que encontramos pelo id disponível para o HTML
+  $scope.lista = listaDeTarefas;
 
+  console.log("Lista de tarefas encontrada: ", listaDeTarefas);
 })
 

www/js/services.js

@@ -1,6 +1,50 @@
 angular.module('app.services', [])
 
-.factory('BlankFactory', [function(){
+// Usamos Factories (ou Services) para compartilhar código entre controllers - essa é a melhor definição por ora! ;)
+// Como estamos programando em portugues, à partir de agora sempre falarei "Serviço", ok?
+// 
+// Aqui definimos um Serviço que terá como rótulo as operações que queremos fazer sobre nossa Lista.
+// Cada rótulo vai tá associado à um função - sim, podemos ter rótulos apontando para funções!!
+// Exemplo:
+//  GerenciadorDeListasDeTarefas.buscarTodas() vai retornar um array com ... todas as listas!
+//  GerenciadorDeListasDeTarefas.buscarPorId('123') vai retornar o objeto Lista cujo _id é ... 123!
+// 
+// Sacou, né?!
+// 
+// Já já, vai ser aqui que faremos o request para o nosso servidor!
+
+.factory('GerenciadorDeListasDeTarefas', [function(){
+  //      ^^^^^^^^^^^^^^^^^^^
+  // Esse nome é que vc vai usar como parâmetro nos seus controllers
+
+  var arrayInternoDeListasDeTarefas = [
+      { _id: '1', name: 'Lista de compras 1' },
+      { _id: '2', name: 'Lista de compras 2' },
+    ]
+
+  var GerenciadorDeListasDeTarefas = {
+
+    buscarTodas: function() {
+      return arrayInternoDeListasDeTarefas;
+    },
+
+    buscarPorId: function(idDaListaDeTarefaQueQueroEncontrar) {
+      var listaDeTarefaEncontrada;
+
+      for (var i = 0; i < arrayInternoDeListasDeTarefas.length; i++) {
+
+        var listaDeTarefaDaVez = arrayInternoDeListasDeTarefas[i];
+        if(listaDeTarefaDaVez._id === idDaListaDeTarefaQueQueroEncontrar){
+          listaDeTarefaEncontrada = listaDeTarefaDaVez
+        }
+      }
+
+      return listaDeTarefaEncontrada;
+    }
+
+  };
+
+  return GerenciadorDeListasDeTarefas;
 
 }])
 

www/templates/listaDetalhes.html

@@ -1,9 +1,7 @@
-<ion-view title="Nome da Lista" id="page4" class=" ">
+<ion-view title="{{ lista.name }}" id="page4" class=" ">
+<!--             ^^^^^^^^^^^^^^^^
+  Ver controller.js#linha 13
+-->
     <ion-content padding="true" class="has-header">
-        <ion-list id="nomeDaLista-list2" class=" ">
-            <ion-item id="nomeDaLista-list-item8" class="  ">Item 1</ion-item>
-            <ion-item id="nomeDaLista-list-item9" class="  ">Item 2</ion-item>
-            <ion-item id="nomeDaLista-list-item10" class="  ">Item 3</ion-item>
-        </ion-list>
     </ion-content>
 </ion-view>

www/templates/minhasListas.html

@@ -7,17 +7,6 @@
               id="minhasListas-list-item4"
               ng-repeat="item in minhasListas" 
               ui-sref="menu.listaDetalhes({ listaId: item._id })">
-              <!--                         ^^^^^^^^^^^^^^^^^^^
-               Aqui a gente tá dizendo para o Ionic construir o link substituindo o ":listaId" pelo 
-               valor que "_id" de cada item.
-
-               Exemplo:
-                 Para a Lista { _id: '1', name: 'Lista de compras 1' },  o ui-sref="menu.listaDetalhes({ listaId: item._id })" vai gerar a url: "/minhas-listas/1".
-
-                Ver controller.js, linha 12
-                Ver routes.js, linha 30
-
-               -->
               {{ item.name }}
               <i class="icon ion-ios-arrow-right"></i>
             </ion-item>