...
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Utilizando directives Directives - Controller |
|---|
| linenumbers | true |
|---|
|
shieldApp.controller( 'PeriodCtrl', ['$scope', '$http', '$property', '$resourceLocator', '$dialog', function ( $scope, $http, $property, $resourceLocator, $dialog ) {
// ...
$scope.view = {
// ...
detailDialog: $dialog.new()
// ...
};
// ...
}]); |
...
| Âncora |
|---|
| what-is-partial |
|---|
| what-is-partial |
|---|
|
...
| Âncora |
|---|
| what-is-controller |
|---|
| what-is-controller |
|---|
|
O que é um Controller?
| Âncora |
what-is-De acordo com a Wikipedia, um controller pode enviar comandos para sua visão associada para alterar a apresentação da visão do modelo (por exemplo, percorrendo um documento). Ele também pode enviar comandos para o modelo para atualizar o estado do modelo (por exemplo, editando um documento).
Adaptando a citação para o contexto do AngularJS, o controller interage com directives (presentes em elementos HTML nos partials) através do escopo, podendo modificar o comportamento na apresentação de conteúdos ou regras para o usuário final.
O exemplo abaixo mostra como o controller PeriodCtrl preenche uma combo-box na partial period-list.html através da directive ng-option.
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | xml |
|---|
| title | Utilizando Controllers - Partial |
|---|
| linenumbers | true |
|---|
|
<!-- ... -->
<select class="select field-short" ng-model="model.enabled" tl-key="enabled" ng-options="key.bool() as value for (key, value) in view.status">
<option value=""></option>
</select>
<!-- ... --> |
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | js |
|---|
| title | Utilizando Controllers - Controller |
|---|
| linenumbers | true |
|---|
|
shieldApp.controller( 'PeriodCtrl', ['$scope', '$http', '$property', '$resourceLocator', '$dialog', function ( $scope, $http, $property, $resourceLocator, $dialog ) {
// ...
$scope.view = {
// ...
status: $property.range({object: 'period', attribute: 'enabled'}),
// ...
};
// ...
}]); |
| Informações |
|---|
|
Acesse o código-fonte do partial period-list.html e do controller PeriodCtrl. |
| Âncora |
|---|
| what-is-scope |
|---|
| what-is-scope |
|---|
|
O que é um Scope?
Estrutura
Conforme a imagem abaixo, o projeto é estruturado por pastas, cada qual refletindo a responsabilidade de seus componentes. Como este projeto é inteiramente composto de arquivos Javascript, não existem dependencias de outros projetos.
...