Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Bloco de código
themeEclipse
languagejs
titleUtilizando directives Directives - Controller
linenumberstrue
 shieldApp.controller( 'PeriodCtrl', ['$scope', '$http', '$property', '$resourceLocator', '$dialog', function ( $scope, $http, $property, $resourceLocator, $dialog ) {
	
	// ...
 
	$scope.view = {
		
		// ...

		detailDialog: $dialog.new()

		// ...

	};
 
	// ...
	
}]);

...

Informações
titleCódigo Atualizado

Acesse o código-fonte do partial period-list.html e do controller PeriodCtrl .

Âncora
what-is-partial
what-is-partial

...

Âncora
what-is-controller
what-is-controller

 

O que é um Controller?

 

Âncorawhat-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
themeEclipse
languagexml
titleUtilizando Controllers - Partial
linenumberstrue
<!-- ... -->
 
<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
themeEclipse
languagejs
titleUtilizando Controllers - Controller
linenumberstrue
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
titleCódigo Atualizado

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.

...