Se eu quiser adicionar outra controller na mesma página(view), como eu deveria fazer ?!
Ex: uma controller com dados de Usuario.
Solucionado
Se eu quiser adicionar outra controller na mesma página(view), como eu deveria fazer ?!
Ex: uma controller com dados de Usuario.
hoje, com a Alura e o Google Gemini
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 :)