Se eu quiser adicionar outra controller na mesma página(view), como eu deveria fazer ?!
Ex: uma controller com dados de Usuario.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Se eu quiser adicionar outra controller na mesma página(view), como eu deveria fazer ?!
Ex: uma controller com dados de Usuario.
Oi Jean!
Crie o controller em seu script, importe-o em index.html. Dai, diretamente no template que você deseja utilizá-lo, adicione a diretiva .ng-controller apontando para o controller.
Por mais que no sistema de rotas estejamos associando um controller para a view, ainda podemos diretamente no template referenciar outro controller.
Eu criei um arquivo chamado "usuarios-controller.js" na pasta controller, o codigo ficou assim:
angular.module("alurapic", []).controller("UsuariosController", function($scope){
$scope.usuario = {
nome: "Jean",
idade: "23 anos"
}
});O meu index na tag
ficou assim:<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Alurapic</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script src="js/lib/angular.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/fotos-controller.js"></script>
<script src="js/controllers/usuarios-controller.js"></script>
</head>O corpo
ficou assim:<body>
<div ng-controller="FotosController">
<div >
<h1 >Alurapic</h1>
</div>
<div ng-repeat="foto in fotos" >
<div class="panel-heading">
<h3 class="panel-title">{{foto.titulo}}</h3>
</div>
<div>
<img width="200" src="{{foto.url}}" alt="{{foto.titulo}}" />
</div>
</div>
</div>
<div ng-controller="UsuariosController">
{{usuario.nome}}
{{usuario.idade}}
</div>
</body>Ao executar não apareceu nada, e deu um erro:
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FotosController&p1=not%20a%20function%2C%20got%20undefined at angular.min.js:6 at Rb (angular.min.js:19) at sb (angular.min.js:20) at angular.min.js:75 at angular.min.js:57 at r (angular.min.js:7) at B (angular.min.js:56) at g (angular.min.js:51) at g (angular.min.js:51) at g (angular.min.js:51)
Como proceder ?!
Faltou colocar o ng-app referenciando o seu módulo do angular: 'alurapic'.
Lembrando que ao declarar o módulo, deve se passar as dependências: angular.module("alurapic", ['dependências'])
Ao apenas referenciar o módulo, na criação de um controller por exemplo, nao é necessário o segundo parâmetro:
angular.module("alurapic").controller...
Espero ter ajudado.
Excelente comentário Paulo!
Eu removi o segundo parametro ao declarar o módulo:
angular.module("alurapic").controller("UsuariosController", function($scope){
$scope.usuario = {
nome: "Jean",
idade: "23 anos"
}
});e funcionou, ajudou muito..rs :)