MSTECH wiki - Contribuições do usuário [pt-br]

Arquivo:Diagram Avalia+.jpg

2016-12-27T16:33:52Z

Thiago.silvestre: Thiago.silvestre carregada uma nova versão de Arquivo:Diagram Avalia+.jpg

Imagem das tabelas do Sistema Avalia+

Avalia+

2016-11-29T10:09:52Z

Thiago.silvestre: /* Arquitetura */

==Descrição==

Descrever nesta área o que é o produto, quais as necessidades de negócio pretende atender, a quem se destina.

==Funcionalidades de Ouro==

Nesta seção, insira 3 ou 4 funcionalidades que '''diferenciam''' e destacam o produto. De preferência coloque apenas os nomes das funcionalidades

==Link do Product Backlog==

Nesta seção, insira o link do Product Backlog do produto

==Arquitetura==
[[Arquivo:Avalia+3.png]]

==Arquitetura BD==

[[:Arquivo:Diagram Avalia+.jpg|Imagem da modelagem de tabelas]]

==Arquitetura Front-End==

<p>O Avalia+ não se utiliza de rotas virtuais do ArgularJS, diferentemente de uma aplicação SPA[http://tableless.com.br/criando-uma-aplicacao-single-page-com-angularjs/]).</p>
<p>
Todos os componentes (construídos internamente) do Avalia+ (controllers, directives, filters, services e etc) são construídos baseados no pattern IIFE[https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/]
</p>

===Estrutura funcional===

- Pastas (negrito) <br/>
- Arquivos (negrito + itálico)

*<b>css</b>
**<b>vendor</b>
***<b>angular-motion</b>
****<b>modules</b> - animações utilizaveis com angularJS ng-animate
***<b><i>awesome-bootstrap-checkbox.css</i></b> - customizações de layout realizadas sobre os campos checkbox/radio do html
***<b><i>bootstrap.css</i></b> - franework
***<b><i>font-awesome.css</i></b> - customização de fontes para bootstrap
**<b><i>prova.css</i></b> - estilos para gerar .pdf da prova
**<b><i>style.scss</i></b> - estilos gerais do sistema
*<b>fonts</b> - fontes awesome/material
*<b>images</b> - imagens gerais do sistema/manual do sistema em .pdf
*<b>js</b>
**<b>angular</b>
***<b>controllers</b> - rotas 'físicas' asp.NET
***<b>directives</b>
****<b>_bundle</b> - todas as diretivas utilizadas no sistema
****<b><i>directives.js</i></b> - modulo centralizador de diretivas
***<b>filters</b>
****<b>_bundle</b> - todos os filtros utilizados no sistema
***<b>models</b> - todos os 'models' são serviços que são construídos com base na utilização dos serviços nativos '$http/$resource'
***<b>services</b>
****<b>_bundle</b> - todos os serviços utilizados no sistema
****<b><i>ApiSetting.js</i></b> - config. Api
****<b><i>services.js</i></b> - modulo centralizador de serviços
****<b><i>authenticationinterceptor.service.js</i></b> - modulo responsável por interceptar todas requisições realizadas sobre AJAX
**<b>vendor</b>
***<b>angular</b> - framework AngularJS
***<b>compressor</b> - realiza a compressão de arquivos de imagem (.jpg ideal) utilizando canvas do html
***<b>datepicker</b> - plugin para exibição e utilização de calendário
***<b>highcharts</b> - plugin para exibição gráficos
***<b>redactor</b> - plugin editor de textos
***<b>resumable</b> - plugin para realizar uploads com possibilidade de pause
***<b><i>bootstrap-3.2.0.js</i></b>
***<b><i>jquery-2.1.1.js</i></b>
***<b><i>jquery-ui.js</i></b>
***<b><i>mathJax.js</i></b> - framework para exibição de formulas matemáticas complexas através de <b>LaTeX, MathML[http://docs.mathjax.org/en/latest/tex.html]</b>
***<b><i>moment.js</i></b> - plugin para formatação de datas
*<b>tests</b>

===Controllers===

<p>Todos os controllers AngularJS (construídos internamente) são baseados em:</p>
<p>- <b>getter</b></p>
<p>
* na maioria dos controllers é injetado os módulos base (centralizadores) ['services', 'filters', 'directives]
</p>
<p>
<pre>
angular.module('appMain', ['services', 'filters', 'directives']);
</pre>
</p>
<p>- <b>setter</b></p>
<p>
* nome é baseado no prefix + suffix : [nome da View asp.NET] + ["Controller"]
</p>
<p>
<pre>
angular.module('appMain').controller("FormAbsenceReasonController", FormAbsenceReasonController);

function FormAbsenceReasonController() {};
</pre>
</p>
<p>- <b>injector</b></p>
<p>
* realiza as injeções de dependências
<pre>
FormAbsenceReasonController.$inject = ['$scope', '$rootScope', '$window', '$notification', '$util', 'AbsenceReasonModel'];
</pre>
</p>
<p>- <b>instanciar function no escopo </b></p>
<p>
* funções que são criadas e atribuídas ao escopo angular devem possuir um nome para facilitar o rastreamento de erros no console. Funções anônimas atribuídas diretamente ao escopo do Angular perdem a rastreabilidade em determinados casos.
* funções atribuídas ao escopo ficam visíveis através dos $scopes do angular, algumas pessoas preferem utilizar funções no escopo se realmente for necessário seu uso na view (.html), e optam por deixa-las privadas (não atribuídas ao escopo angular).
* se for implementado o uso de testes unitários devido ao ciclo de vida do angular o Jasmine[http://jasmine.github.io/] só consegue enxergar funções públicas (presentes no escopo do angular), recomenda-se cautela quando ao uso de funções privadas em soluções angular.
<pre>
//função publica: para acesso no escopo do angularJS
$scope.minhaFuncPublic = function __minhaFuncPublic() { };

//função publica: para acesso no escopo do angularJS, porém anônima
$scope.minhaFuncPublicAnonymous = function () { };

//função privada: sem acesso no escopo do angularJS
function minhaFunc() { };
</pre>
</p>
====Exemplo controller AngularJS====
<p><b>- arquivo: formAbsenceReasonController.js</b></p>
<p>
<pre>
/**
* function Cadastro/Edição Absence Reason Controller
* @namespace Controller
* @author Julio Cesar da Silva - 02/03/2016
*/
(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormAbsenceReasonController", FormAbsenceReasonController);

FormAbsenceReasonController.$inject = ['$scope', '$rootScope', '$window', '$notification', '$util', 'AbsenceReasonModel'];

function FormAbsenceReasonController($scope, $rootScope, $window, $notification, $util, AbsenceReasonModel) {

$scope.params = $util.getUrlParams();
$scope.absenceReason = { Description: undefined };

function Init() {

$notification.clear();

if ($scope.params.Id !== undefined) {

AbsenceReasonModel.findSimple({ Id: $scope.params.Id }, function (result) {

if (result.success) {
$scope.absenceReason = result.absenceReason;
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
});
}
};

$scope.setNewDefault = function setNewDefault() {
if (!$scope.absenceReason.IsDefault) {
angular.element('#modal').modal('show');
}
$scope.absenceReason.IsDefault = true;
};

$scope.salvar = function __salvar() {

if ($scope.verifica()) {

AbsenceReasonModel.save($scope.absenceReason, function (result) {

if (result.success) {
$notification.success(result.message);
$window.location.href = '/AbsenceReason/List';
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
});
}
};

$scope.voltar = function __voltar() {
$window.location.href = '/AbsenceReason/List';
};

$scope.verifica = function __verifica() {

if (!$scope.absenceReason.Description) {
$notification.alert('O campo "Descrição" é obrigatório.');
angular.element('#description').focus();
return false;
}
return true;
};

Init();
};

})(angular, jQuery);
</pre>
</p>

<p><b>- arquivo: ~\AbsenceReason\Form.html</b></p>
<p>
<pre>
<!DOCTYPE html>
<html data-ng-app="appMain">
<head>
<meta charset="utf-8" />
<title>FormAbsenceReason</title>
</head>
<body>
<div class="wellCustom" data-ng-controller="FormAbsenceReasonController">

</div>
</body>
</html>
</pre>
</p>

===Directives===

<p>
Quase todas as diretivas ficam centralizadas no module <b>directives</b>, com exceção de algumas third party (tooltip, popover e etc).
</p>
<p>
A vantagem de adotar um modulo centralizador é que as diretivas que são injetadas são somente aquelas carregadas (arquivo .js) pelo BunfleConfig.cs.
</p>
<br/>

====alert====
<p>dependência: <b>../services/_bundle/notification/notification.js</b></p>
<p>Composto por 2 diretivas:</p>
<p>
* <b>alert</b> - responsável por 'vigiar' o service <b>$notification</b> e criar/excluir uma nova notificação visual (html).
* <b>autoClose</b> - responsável por 'empilhar' as notificações em chamadas assíncronas e remover no término do tempo de permanência na pilha.
</p>
<p>
- exemplo:
<pre>
<alert></alert>
</pre>
</p>
<br/>

====checkbox-group====
<p>Utiliza um model para armazenar uma lista de checkbox selecionados</p>
<p>
- exemplo:
<pre>
<div data-ng-repeat="($indexPeriodo, periodo) in periodoCurso.lista track by $indexPeriodo">
<input id="checkbox_{{$indexPeriodo}}" type="checkbox" checklist-model="periodoCurso.selecionados" checklist-value="periodo" />
<label for="checkbox_{{$indexPeriodo}}">{{periodo.Description}}</label>
</div>
</pre>
</p>
<br/>

====collapse====
<p>Realiza o controle de <b>collapse (bootstrap)</b> em elementos de um ng-repeat. Utilizado no sistema somente <i>/Parameter</i></p>
- exemplo:
<pre>
<div class="accPadrao" ng-model="grupos" data-bs-collapse>
<div class="cards" ng-repeat="(catIndex,category) in categories track by catIndex">
<div class="tituloAcc" data-bs-collapse-toggle>
<h4>
{{category.Description}}
<i class="material-icons">{{ grupos == $index ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</i>
</h4>
</div>
<div class="panel-collapse" data-bs-collapse-target>
conteúdo aqui
</div>
</div>
</div>
</pre>
<br/>

====datepicker-directive====
<p>Realiza o controle do plugin datepicker no escopo do angularJS</p>
<p><b>dependência:</b> vendor/datepicker.js</p>
- exemplo:
<pre>
<input id="dateStart" type="text" placeholder="Data de Início" data-ng-model="dateStart" datepicker/>
</pre>
<br/>

====fieldinteger====
<p>Permite somente a entrada de caracteres numéricos.</p>
- exemplo:
<pre>
<input type="text" data-ng-model="idade" fieldinteger />
</pre>
<br/>

====highcharts-ng====
<p>Realiza a manipulação do plugin.</p>
- exemplo:
<pre>
<highchart class="chart" config="chart"></highchart>
</pre>
<br/>

====item-brief====
<p>Mostra o resumo detalhado de um item. (Obrigatório id do item)</p>
- exemplo:
<pre>
<item-brief item-id="{{item.Id}}" can-print="false"></item-brief>
</pre>
<br/>

====menu====
<p>Controla e constrói o menu do sistema. (localizado na master page)</p>
- exemplo:
<pre>
<div menu user='@{Html.RenderAction("NomeUsuarioLogado","Layout");}' system='@ViewBag.Title'></div>
</pre>
<br/>

====modal====
<p>Constrói uma modal. Utiliza-se da diretiva nativa <b>ng-transclude</b> para obter html específico, obedece ao escopo pai do 'controller' (escopo público)</p>
<p> Caso necessário customização das características da modal, utilizar convencional do bootstrap sem a directiva. </p>
- exemplo:
<pre>
<modal id="cancelModal" modal-title="<p>Deseja realmente sair?</p>">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-right">
<button type="button" class="btnPadrao" ng-click="cancel();">Sim</button>
<button type="button" class="btnCancelar2" data-dismiss="modal">Não</button>
</div>
</div>
</div>
</modal>
</pre>
<br/>

====modal-alert====
<p> Notificações internas ao escopo da modal. (Necessário construir no controller objeto de notificações)</p>
- exemplo:
<pre>
<modal-alert notification="notification.objNotification"></modal-alert>
</pre>
<br/>

====ng-change-file====
<p> Chamada de callback quando <b>input['file']</b> sofre uma alteração. Utilizável para realização de upload de arquivos dentro do escopo do controller.</p>
- exemplo:
<pre>
<input id="fileInport" type="file" data-ng-change-file="upload">
</pre>
<br/>

====ng-title====
<p> Mostrar title em options gerador pela diretiva nativa <b>ng-options</b> na tag <b><select></b></p>
- exemplo:
<pre>

<script>
$scope.pessoas.lista = [{Id: 1, Description:'João'}, {Id: 2, Description:'Paulo'}, {Id: 3, Description:'Ana'}, {Id: 4, Description:'Mayra'}];
</script>

<select class="form-control"
ng-options="pessoa as pessoa.Description for pessoa in pessoas.lista"
ng-title="pessoas.lista"
ng-title-propertie="Description"
ng-title-index="1"
ng-title-selected>
<option value="">--Selecione--</option>
</select>
</pre>
<br/>

====ng-show-loading====
<p> Mostra/oculta html de loading. Utilizado dentro do template da diretiva <b>/directives/_bundle/preloading/preloading.js</b></p>
- exemplo:
<pre>
<div id="preloading" ng-show-loading class="ng-cloak loading-box"><label>{{message}}</label></div>
</pre>
<br/>

====notification-filter====
<p> Descontinuada... Os filtros do sistema não seguem um mesmo padrão de construção nos controles, o que torna a diretiva dispensável</p>
<br/>

====page====
<p>Realiza o controle da paginação.</p>
<p><b>dependência: </b> "services/_bundle/pager/service.js" necessário injeção de dependência no controller - <b>$pager</b> </p>
<p>Há 2 formas de indicar 'paginador':</p>
* atributo "pager" funciona com objetos do escopo bind-two-way do angular, passagem de vários níveis de objeto
* atributo "varkey" funciona com somente 1 nível de objeto
- exemplo 1:
<pre>
<page method="getUploadQueueStatus()"
pager="pagerUploadQueue.paginate"
total-pages="{{pagerUploadQueue.pages}}"
total-itens="{{pagerUploadQueue.totalItens}}"
page-size="pagerUploadQueue.pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>
</pre>
- exemplo 2:
<pre>
<page method="Paginate()"
varkey="paginate "
total-pages="{{pages}}"
total-itens="{{totalItens}}"
page-size="pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>
</pre>
- exemplo no controller
<pre>
$scope.paginate = $pager(ReportCorrectionModel.getDres);
$scope.totalItens = 0;
$scope.pages = 0;
$scope.pageSize = 10;
$scope.message = false;
$scope.listResult = null;

$scope.search = function __search() {
if (!validateDate() || !validate()) return;
$scope.pages = 0;
$scope.totalItens = 0;
$scope.paginate.indexPage(0);
$scope.pageSize = $scope.paginate.getPageSize();
$scope.searcheableFilter = angular.copy($scope.filters);
Paginate();
};

function Paginate() {
$scope.paginate.paginate($scope.searcheableFilter).then(function (result) {
if (result.success) {
if (result.lista.length > 0) {
$scope.paginate.nextPage();
$scope.listResult = result.lista;
$scope.QuantidadeTotal = result.QuantidadeTotal;
if (!$scope.pages > 0) {
$scope.pages = $scope.paginate.totalPages();
$scope.totalItens = $scope.paginate.totalItens();
}
} else {
$scope.message = true;
$scope.listResult = null;
}
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
}, function () {
$scope.message = true;
$scope.listResult = null;
});
};
$scope.Paginate = Paginate;

</pre>
<br/>

====tooltip/popover====
<p> Responsável por construir as tooltips/popovers do sistema: </p>
<p>
* Para utilização de popover há dependência da tooltip - <b>directives/_bundle/popover/tooltip.js</b>
* <b>directives/_bundle/popover/helpers/dimensions.js</b>
* <b>css/vendor/angular-motion/**.css</b>, aplica as animações
</p>
- exemplo popover:
<pre>

<button class="btnMais"
type="button"
data-ng-click="setMenu(item.Item.ItemId, item.Item.LastVersion, item.Item.BaseTextId)"
data-placement="top" data-trigger="focus"
data-custom-class="itemListPopover"
data-template="Assets/js/angular/controllers/item/listItemMenu.html"
data-animation="popover-fade"
data-container="body"
data-bs-popover="popovermenu">
<i class="material-icons">view_list</i>
</button>


<div class="popover" tabindex="-1" ng-show="content">
<div class="arrow"></div>
<div class="popover-content">
<ul class="listaPopover">
<li>
<i class="material-icons">create</i>
<a href="javascript:void(0)" ng-click="popovermenu.editar(popovermenu.id); $hide()">Editar</a>
</li>
<li ng-hide="item.Item.ItemNarrated" ng-click="popovermenu.addItem(popovermenu.id); $hide()">
<i class="material-icons">add</i>
<a href="javascript:void(0)">Adicionar Item</a>
</li>
<li ng-click="popovermenu.excluir(popovermenu.id); $hide()">
<i class="material-icons">close</i>
<a href="javascript:void(0)">Excluir</a>
</li>
</ul>
</div>
</div>

//utilização no controller
$scope.popovermenu = {
title: "empty",
content: "empty",
id: undefined,
lastVersion: undefined,
visualizar: visualizarCallback, //function
editar: editarCallback, //function
excluir: excluirCallback, //function
addItem: addItemCallback, //function
};
</pre>

- exemplo tooltip com title:
<pre>
<button type="button"
class="btnPadrao"
data-btn-checkbox=""
data-btn-checkbox-true="1"
data-btn-checkbox-false="0"
data-trigger="hover"
data-type="success"
data-title="Aqui vai a descrição do que esse elemento representa."
data-placement="top"
data-container="body"
data-bs-tooltip>
<i class="material-icons">add</i>
</button>
</pre>

- exemplo tooltip com template:
<pre>


<div style="cursor:pointer; right: 15px;"
data-trigger="hover"
data-type="success"
data-template="Assets/js/angular/controllers/test/currentFiltersDiscipline.html"
data-placement="bottom"
data-animation="am-fade"
data-container="body"
data-bs-tooltip
class="notificationFilter">{{popoverFiltersDisciplines.selecteds.length}}
</div>


<div class="tooltip in">
<div class="tooltip-inner html-bind-trusted imgResponsive">
<div data-ng-if="popoverFiltersDisciplines.selecteds.length!=0">Filtros selecionados</div>
<hr data-ng-if="popoverFiltersDisciplines.selecteds.length!=0" />
<ul style="list-style:none; padding: 0px 0px 0px 0px;">
<li data-ng-repeat="($index, filter) in popoverFiltersDisciplines.selecteds track by $index" style="margin: 10px 0px 0px 0px">
<i class="material-icons">check</i> {{filter.Description}}
</li>
</ul>
<span data-ng-if="popoverFiltersDisciplines.selecteds.length==0">Nenhum filtro selecionado</span>
</div>
</div>
</pre>
<br/>

====preloading====
<p>Indica que há requisições Ajax em progresso no sistema. Trabalha baseando-se no service <b>$httpTransform</b> presente no arquivo <b>/service/authenticationinterceptor.service.js</b> </p>
- exemplo:
<pre>
<preloading message="Carregando..."></preloading>
</pre>

====radio-select====
<p>Seleção de radio.</p>
- exemplo:
<pre>
<div radio-select
radiolist="situationList"
radioselected="selectedObjSituation"
custom-class="radio-inline"
style="margin: 0 -84px;">
</div>
</pre>

====rating====
<p>Rating de dificuldades do sistema.</p>
- exemplo:
<pre>
<div rating-directive
id="dificuldade"
list="dificuldade.lista"
difficulty="dificuldade.objDificuldade"
lock="false">
</div>
</pre>

====redactor-directive====
<p>Controlar o plugin redactor.js através de uma directiva angularJS.</p>
* <b>images</b> - model que armazena os ids dos arquivos utilizados dentro do redactor
* <b>model</b> - armazena o texto html gerado pelo redactor
* <b>tipo</b> - indica para qual campo (tabela) o arquivo presente no redactor pertence
* <b>plugins</b> - foram criados plugins internos para o redactor, veja: vendor/redactor
- exemplo:
<pre>
<textarea redactor
id="textoBase"
name="textoBase"
class="form-control"
images="textobase.Files"
data-ng-model="textobase.Description"
tipo="@((Byte)EnumFileType.BaseText)">
</textarea>
</pre>

====report-filters====
<p>Filtros laterais para relatórios devido a 3 tela utilizarem a mesma sequência de filtros eles foram transformados em diretiva</p>
- exemplo:
<pre>
<report-filters filters="filters" global="global"></report-filters>
</pre>

====tags-input====
<p>Cria um campo do tipo tags</p>
- exemplo:
<pre>

<tags-input ng-model="tags">
</tags-input>

//formato aceito
$scope.tags = [{ text: 'just' }, { text: 'some' }, { text: 'cool' }];

</pre>

====uploader====
<p>Realiza o upload de arquivos.</p>
* <b>upload.js</b> - realiza o upload
* <b>uploader.js</b> - verifica as alterações do input['file']
- exemplo:
<pre>
<div upload
type="File"
trash="true"
placeholder="um arquivo"
callback="fileUploadSuccess"
component="modelFile">
</div>
</pre>

====writemaths====
<p>Mostra o preview das fórmulas matemáticas LaTex digitadas no plugin redactor.</p>
- exemplo:
<pre>
<div writemaths position="center top" previewposition="center bottom">
<textarea redactor
id="textoBase"
name="textoBase"
class="form-control"
images="textobase.Files"
ng-model="textobase.Description"
tipo="@((Byte)EnumFileType.BaseText)">
</textarea>
</div>
</pre>

===Filters===
Filtros são a maneira mais dinâmica de formatar dados na dinâmica bind do angular.

====minimize====
<p>Aplica reticências em um bind a partir do length indicado</p>
* recomenda-se utilização de tooltip para exibição do texto na integra.
- exemplo:
<pre>

$scope.meuTexto = "Um texto que extremamente longo pode ser minificado";

<div>
{{meuTexto | minimize:20}}
</div>

//resultado seria
"Um texto que extrema..."

</pre>

====moment====
<p>Formatador de dadas utilizando-se do plugin moment.</p>
- exemplo para formato ISO 8601
<pre>

$scope.createDate = "2016/01/01";

<div>
{{createDate | moment:"DD/MM/YYYY":true}}
</div>

//resultado seria
"01/01/2016"

</pre>

- exemplo para formato <b>/date()/json</b> -> /Date(1224043200000)/
<pre>

$scope.createDate = new Date();

<div>
{{createDate | moment:"DD/MM/YYYY"}}
</div>

//resultado seria
"01/01/2016"

</pre>

====trustedHtml====
<p>Converte html não confiável para confiável, utilizado em locais com <b>ng-bind-html</b></p>
- exemplo:
<pre>

$scope.meuHtml = "<div>Meu texto</div>";

<div ng-bind-html="meuHtml | trustedHtml"></div>

//resultado seria, sem o filtro o bind daria erro de trust
"Meu texto"

</pre>

====capitalize====
<p>Converte a 1ª letra em ToUpperCase </b></p>
- exemplo:
<pre>

$scope.label= "código";

<div> {{label | capitalize}}</div>

//resultado seria: "Código"

</pre>

====between====
<p> Utilizado na diretiva de paginação do sistema.</p>

====changeBlankSpace====
<p>Realiza a conversão de caracteres de espaçamento nas transações i/o do redactor.
Troca os caracteres de espaçamento de <b>\s</b> para <b> </b>. Assim os espaços em branco são respeitados no ng-bind</p>
- exemplo:
<pre>

<div ng-bind-html="(abstract.textbase | changeBlankSpace) | trustedHtml"></div>

</pre>

====tagToString====
<p>Quando um <b>texto base</b> possuí somente imagens o filtro retorna uma string indicando <b><somente imagem></b></p>
- exemplo:
<pre>

{{ itens.Statement | tagToString }}

</pre>

===Models===
A camada de comunicação do sistema, os models são mapeados segundo os controllers presentes no asp.Net, são serviços que são injetados nos controllers (angularjs) que irão interagir com 1 ou mais controller (asp.Net). No Avalia+ o serviço foi contruído com o componente nativo <b>$resource</b>. Como ele vem sendo utilizado desde o começo resolveu adota-lo como padrão. No entanto, uma possível futura melhoria ou abordagem seria interessante fazer o uso de <b>$http</b>.
-exemplo:
<pre>

/*
* File-Model
*/
(function () {
angular.module('services').factory('FileModel', ['$resource', function ($resource) {

// Model
var model = {

'uploadFile': {
method: 'POST',
url: base_url('File/UploadFile')
},
'upload': {
method: 'POST',
url: base_url('File/Upload')
},
'delete': {
method: 'POST',
url: base_url('File/LogicalDelete')
},
'searchUploadedFiles': {
method: 'GET',
url: base_url('File/SearchUploadedFiles')
},
'existsLinkedFiles': {
method: 'GET',
url: base_url('File/ExistsLinkedFiles')
},
'checkFileExists': {
method: 'GET',
url: base_url('File/CheckFileExists')
},
'checkFilePathExists': {
method: 'GET',
url: base_url('File/CheckFilePathExists')
}
};

// Retorna o serviço
return $resource('', {}, model);

}]);
})();

</pre>

===Services===
Serviços básicos do sistema.

====notification====
<p>Controla a pilha de notificações do sistema, pilha que é utilizada pela diretiva <b>alert.js</b>.</p>
-exemplo:
<pre>


<alert></alert>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$notification'];

function FormController($scope, $notification) {
$notification.alert('minha mensagem aqui.');
};

})(angular, jQuery);

</pre>

====pager====
<p>Controla a paginação utilizada no sistema. Dependente da diretiva <b>page.js</b>.</p>
<p>Há duas maneiras de indicar para a diretiva quem é a instancia que controla a paginação:</p>
*{object} pager="paginate" recebe a instância do $pager <b>$scope, exemplo -> $scope.nivel1.nivel2.paginate</b>
*{string} varkey="paginate" recebe o nome da instância presente no $parent (Só funciona para objetos de 1 único nivel no <b>$scope, exemplo -> $scope['paginate']</b>)
-exemplo:
<pre>


<page method="search()"
pager="paginate"
total-pages="{{pages}}"
total-itens="{{totalItens}}"
page-size="pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$pager', 'SkillModel'];

function FormController($scope, $pager, SkillModel) {

$scope.paginate = $pager(SkillModel.searchByMatrix); //deve receber o service $resource
$scope.message = false;
$scope.pages = 0;
$scope.totalItens = 0;
$scope.pageSize = 10;
};

})(angular, jQuery);

</pre>

====util====
<p>Centralizador de utilidades do sistema, inclusive a function responsável por obter os parâmetros presente na query string da url</p>
-exemplo:
<pre>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$util'];

function FormController($scope, $util) {

$scope.params = $util.getUrlParams();
};

})(angular, jQuery);

</pre>

====ApiSetting====
Responsável por configurar requisições de comunicação com API. Vide utilização no service de interceptação de requisições

====authenticationinterceptor.service====
<p>Todas as requisições (request/response/error) partindo dos componentes nativos <b>$resource/$http</b> serão interceptadas antes de seguir o fluxo normal client/server/client. </p>
*$httpTransform -> serviço presente no interceptor responsável por contabilizar a pilha de requisições <b>ngShowLoading.js/preloading.js</b> utilizam-se desse serviço para mostrar o loader do sistema.
*Para controllers (angularJS) que não se comunicam com API basta <b>não</b> configurar o service $ApiSetting
*Para controllers (angularJS) que se comunicam com APi segue abaixo o exemplo de como config. o service
-examplo:
<pre>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("CorrectionController", CorrectionController)
.config($config);

CorrectionController.$inject = ['$scope'];
$config.$inject = ['$apiSettingConfigProvider'];

function $config($apiSettingConfigProvider) {
var params = $apiSettingConfigProvider.getUrlParams();
$apiSettingConfigProvider.setUrlMethodExcluded("GetAuthorize");
$apiSettingConfigProvider.setUrlAuthentication(base_url("/MeuControllerASPNET/GetAuthorize"));
};

function CorrectionController($scope) {
}

})(angular, jQuery);

</pre>

===Versões dos frameworks===

{| border=1
|-
| Framework || versão || customizado p/ necessidade interna || Ref.
|-
| angularJS || 1.4.9 || <center>não</center> || https://angularjs.org/
|-
| compressor || 0.1 || <center>sim</center> || Mstech
|-
| datepicker || 2012 || <center>sim</center> || http://www.eyecon.ro/bootstrap-datepicker
|-
| highcharts || 4.0.4 || <center>não</center> || http://www.highcharts.com/
|-
| redactor || 10.2.5 || <center>sim</center> || https://imperavi.com/redactor/
|-
| resumable || x.x || <center>não</center> || http://github.com/23/resumable.js
|-
| bootstrap || 3.2.0 || <center>não</center> || http://getbootstrap.com/
|-
| jquery || 2.1.1 || <center>não</center> || https://jquery.com/
|-
| jqueryui || 1.10.3 || <center>não</center> || http://jqueryui.com
|-
| mathJax|| x.x || <center>não</center> || https://www.mathjax.org/
|-
| moment || 2.10.6 || <center>não</center> || http://momentjs.com/
|}

===Estrutura de pastas===

<pre>

├───css
│ │ prova.css
│ │ style.css
│ │ style.css.map
│ │ style.min.css
│ │ style.scss
│ │
│ ├───vendor
│ │ │ awesome-bootstrap-checkbox.css
│ │ │ bootstrap.css
│ │ │ font-awesome.css
│ │ │
│ │ └───angular-motion
│ │ │ angular-motion.css
│ │ │
│ │ └───modules
│ │ collapse.css
│ │ fade-and-slide.css
│ │ fade.css
│ │ flip.css
│ │ menu.css
│ │ popover-fade.css
│ │
│ └───_bundle
│ angular.css
│
├───fonts
│
├───images
│
├───js
│ ├───angular
│ │ ├───controllers
│ │ │ ├───absenceReason
│ │ │ │ formAbsenceReasonController.js
│ │ │ │ listAbsenceReasonController.js
│ │ │ │
│ │ │ ├───adherence
│ │ │ │ adherenceController.js
│ │ │ │
│ │ │ ├───answerSheet
│ │ │ │ answerSheetLotController.js
│ │ │ │ answerSheetStudentController.js
│ │ │ │ batchDetailsController.js
│ │ │ │ customTooltip.html
│ │ │ │ schoolLotMenu.html
│ │ │ │ testLotMenu.html
│ │ │ │
│ │ │ ├───cognitiveCompetence
│ │ │ │ formCognitiveCompetenceController.js
│ │ │ │ listCognitiveCompetenceController.js
│ │ │ │
│ │ │ ├───correction
│ │ │ │ correctionController.js
│ │ │ │ correctionResultController.js
│ │ │ │
│ │ │ ├───correlatedSkill
│ │ │ │ formCorrelatedSkillController.js
│ │ │ │
│ │ │ ├───discipline
│ │ │ │ formDisciplineController.js
│ │ │ │ listDisciplineController.js
│ │ │ │
│ │ │ ├───evaluationMatrix
│ │ │ │ evaluationMatrixController.js
│ │ │ │ evaluationMatrixListController.js
│ │ │ │
│ │ │ ├───file
│ │ │ │ fileController.js
│ │ │ │ fileMenu.html
│ │ │ │
│ │ │ ├───home
│ │ │ │ homeController.js
│ │ │ │
│ │ │ ├───item
│ │ │ │ formItemController.js
│ │ │ │ listItemController.js
│ │ │ │ listItemMenu.html
│ │ │ │
│ │ │ ├───itemLevel
│ │ │ │ formItemLevelController.js
│ │ │ │ listItemLevelController.js
│ │ │ │
│ │ │ ├───itemType
│ │ │ │ itemTypeFormController.js
│ │ │ │ itemTypeListController.js
│ │ │ │
│ │ │ ├───modelEvaluationMatrix
│ │ │ │ modelEvaluationMatrixController.js
│ │ │ │ modelEvaluationMatrixListController.js
│ │ │ │
│ │ │ ├───modelTest
│ │ │ │ modelTestController.js
│ │ │ │ modelTestListController.js
│ │ │ │
│ │ │ ├───parameter
│ │ │ │ parameterController.js
│ │ │ │ parameterMenu.html
│ │ │ │ parameterVersionableMenu.html
│ │ │ │
│ │ │ ├───performanceLevel
│ │ │ │ formPerformanceLevelController.js
│ │ │ │ listPerformanceLevelController.js
│ │ │ │
│ │ │ ├───reportAnswerSheet
│ │ │ │ reportAnswerSheetDREController.js
│ │ │ │ reportAnswerSheetFilesController.js
│ │ │ │ reportAnswerSheetSchoolController.js
│ │ │ │
│ │ │ ├───reportCorrection
│ │ │ │ reportClasseController.js
│ │ │ │ reportDREController.js
│ │ │ │ reportSchoolController.js
│ │ │ │ reportStudentController.js
│ │ │ │
│ │ │ ├───reportItem
│ │ │ │ reportItemController.js
│ │ │ │
│ │ │ ├───reportTest
│ │ │ │ graphicPerformanceSchoolController.js
│ │ │ │ performanceItemController.js
│ │ │ │ performanceSchoolController.js
│ │ │ │ performanceSkillController.js
│ │ │ │
│ │ │ ├───test
│ │ │ │ indexRequestRevokeMenu.html
│ │ │ │ menu-test-import-tpl.html
│ │ │ │ testAdministrateController.js
│ │ │ │ testController.js
│ │ │ │ testImportController.js
│ │ │ │ testListController.js
│ │ │ │ testListMenu.html
│ │ │ │ testReportController.js
│ │ │ │ testRequestRevokeController.js
│ │ │ │ testResponsesController.js
│ │ │ │ testRevokeController.js
│ │ │ │
│ │ │ └───testType
│ │ │ formTestTypeController.js
│ │ │ listTestTypeController.js
│ │ │
│ │ ├───directives
│ │ │ │ directives.js
│ │ │ │
│ │ │ └───_bundle
│ │ │ ├───alert
│ │ │ │ alert.css
│ │ │ │ alert.js
│ │ │ │
│ │ │ ├───checkbox-group
│ │ │ │ ckeckbox-group.js
│ │ │ │
│ │ │ ├───collapse
│ │ │ │ collapse.js
│ │ │ │
│ │ │ ├───datepicker
│ │ │ │ datepicker-directive.js
│ │ │ │
│ │ │ ├───fieldinteger
│ │ │ │ fieldinteger.js
│ │ │ │
│ │ │ ├───highcharts
│ │ │ │ highcharts-ng.js
│ │ │ │
│ │ │ ├───item-brief
│ │ │ │ item-brief.html
│ │ │ │ item-brief.js
│ │ │ │
│ │ │ ├───menu
│ │ │ │ menu.html
│ │ │ │ menu.js
│ │ │ │ sitemas.html
│ │ │ │
│ │ │ ├───modal
│ │ │ │ modal.js
│ │ │ │
│ │ │ ├───modal-alert
│ │ │ │ modal-alert.js
│ │ │ │
│ │ │ ├───ng-change-file
│ │ │ │ ng-change-file.js
│ │ │ │
│ │ │ ├───ng-title
│ │ │ │ ng-title.js
│ │ │ │
│ │ │ ├───ngShowLoading
│ │ │ │ ngShowLoading.js
│ │ │ │
│ │ │ ├───notification-filter
│ │ │ │ notification.filter.js
│ │ │ │
│ │ │ ├───page
│ │ │ │ page.css
│ │ │ │ page.js
│ │ │ │
│ │ │ ├───popover
│ │ │ │ │ popover.html
│ │ │ │ │ popover.js
│ │ │ │ │ tooltip.html
│ │ │ │ │ tooltip.js
│ │ │ │ │
│ │ │ │ └───helpers
│ │ │ │ date-parser.js
│ │ │ │ debounce.js
│ │ │ │ dimensions.js
│ │ │ │ parse-options.js
│ │ │ │ raf.js
│ │ │ │
│ │ │ ├───preloading
│ │ │ │ preloading.css
│ │ │ │ preloading.js
│ │ │ │
│ │ │ ├───radio-select
│ │ │ │ radio-select.js
│ │ │ │
│ │ │ ├───rating
│ │ │ │ rating-directive.js
│ │ │ │ rating.css
│ │ │ │
│ │ │ ├───redactor-directive
│ │ │ │ redactor-directive.js
│ │ │ │
│ │ │ ├───reportFilters
│ │ │ │ filtersTpl.html
│ │ │ │ reportFilters.js
│ │ │ │
│ │ │ ├───tags-input
│ │ │ │ ng-tags-input.css
│ │ │ │ ng-tags-input.js
│ │ │ │
│ │ │ ├───uploader
│ │ │ │ upload.js
│ │ │ │ uploader.js
│ │ │ │
│ │ │ └───writemaths
│ │ │ rangy-core.js
│ │ │ textinputs_jquery.js
│ │ │ writemaths-directive.js
│ │ │ writemaths.css
│ │ │ writemaths.js
│ │ │
│ │ ├───filters
│ │ │ │ filters.js
│ │ │ │
│ │ │ └───_bundle
│ │ │ ├───between
│ │ │ │ between.js
│ │ │ │
│ │ │ ├───changeBlankSpace
│ │ │ │ changeBlankSpace.js
│ │ │ │
│ │ │ ├───minimize
│ │ │ │ minimize.js
│ │ │ │
│ │ │ ├───moment
│ │ │ │ moment.js
│ │ │ │
│ │ │ ├───tagToString
│ │ │ │ tagToString.js
│ │ │ │
│ │ │ └───trustedHtml
│ │ │ trustedHtml.js
│ │ │
│ │ ├───models
│ │ │ ├───AbsenceReason
│ │ │ │ absenceReasonModel.js
│ │ │ │
│ │ │ ├───adherence
│ │ │ │ adherenceApiModel.js
│ │ │ │ adherenceModel.js
│ │ │ │
│ │ │ ├───answerSheet
│ │ │ │ answerSheetModel.js
│ │ │ │
│ │ │ ├───cognitiveCompetence
│ │ │ │ cognitiveCompetenceModel.js
│ │ │ │
│ │ │ ├───correction
│ │ │ │ correctionApiModel.js
│ │ │ │ correctionModel.js
│ │ │ │
│ │ │ ├───correlatedSkill
│ │ │ │ correlatedSkillModel.js
│ │ │ │
│ │ │ ├───course
│ │ │ │ courseModel.js
│ │ │ │
│ │ │ ├───discipline
│ │ │ │ disciplineModel.js
│ │ │ │
│ │ │ ├───evaluationMatrix
│ │ │ │ evaluationMatrixModel.js
│ │ │ │
│ │ │ ├───evaluationMatrixCourse
│ │ │ │ evaluationMatrixCourseModel.js
│ │ │ │
│ │ │ ├───EvaluationMatrixCourseCurriculumGrade
│ │ │ │ EvaluationMatrixCourseCurriculumGradeModel.js
│ │ │ │
│ │ │ ├───file
│ │ │ │ fileModel.js
│ │ │ │
│ │ │ ├───formatType
│ │ │ │ formatTypeModel.js
│ │ │ │
│ │ │ ├───Integration
│ │ │ │ ├───course
│ │ │ │ │ courseModel.js
│ │ │ │ │
│ │ │ │ ├───curriculumGrade
│ │ │ │ │ curriculumGradeModel.js
│ │ │ │ │
│ │ │ │ ├───levelEducation
│ │ │ │ │ levelEducationModel.js
│ │ │ │ │
│ │ │ │ └───modality
│ │ │ │ modalityModel.js
│ │ │ │
│ │ │ ├───item
│ │ │ │ itemModel.js
│ │ │ │
│ │ │ ├───itemLevel
│ │ │ │ itemLevelModel.js
│ │ │ │
│ │ │ ├───itemSituation
│ │ │ │ itemSituationModel.js
│ │ │ │
│ │ │ ├───itemType
│ │ │ │ itemTypeModel.js
│ │ │ │
│ │ │ ├───modelEvaluationMatrix
│ │ │ │ modelEvaluationMatrixModel.js
│ │ │ │
│ │ │ ├───modelSkillLevel
│ │ │ │ modelSkillLevelModel.js
│ │ │ │
│ │ │ ├───modelTestModel
│ │ │ │ modelTestModel.js
│ │ │ │
│ │ │ ├───parameter
│ │ │ │ parameterModel.js
│ │ │ │
│ │ │ ├───performanceLevel
│ │ │ │ performanceLevelModel.js
│ │ │ │
│ │ │ ├───reportAnswerSheet
│ │ │ │ reportAnswerSheetModel.js
│ │ │ │
│ │ │ ├───reportCorrection
│ │ │ │ reportCorrectionModel.js
│ │ │ │
│ │ │ ├───reportItem
│ │ │ │ reportItemModel.js
│ │ │ │
│ │ │ ├───reportTest
│ │ │ │ reportTestModel.js
│ │ │ │
│ │ │ ├───skill
│ │ │ │ skillModel.js
│ │ │ │
│ │ │ ├───test
│ │ │ │ testAdministrateModel.js
│ │ │ │ testImportExportModel.js
│ │ │ │ testListModel.js
│ │ │ │ testModel.js
│ │ │ │ testRequestRevokeModel.js
│ │ │ │ testRevokeModel.js
│ │ │ │
│ │ │ ├───TestPerformanceLevel
│ │ │ │ testPerformanceLevelModel.js
│ │ │ │
│ │ │ ├───testType
│ │ │ │ testTypeModel.js
│ │ │ │
│ │ │ ├───testTypeCourse
│ │ │ │ testTypeCourseModel.js
│ │ │ │
│ │ │ ├───testTypeCourseCurriculumGrade
│ │ │ │ testTypeCourseCurriculumGradeModel.js
│ │ │ │
│ │ │ ├───testTypeItemLevel
│ │ │ │ testTypeItemLevelModel.js
│ │ │ │
│ │ │ └───typeLevelEducation
│ │ │ typeLevelEducationModel.js
│ │ │
│ │ └───services
│ │ │ authenticationinterceptor.service.js
│ │ │ services.js
│ │ │ ApiSetting.js
│ │ │
│ │ └───_bundle
│ │ ├───notification
│ │ │ notification.js
│ │ │
│ │ ├───pager
│ │ │ services.js
│ │ │
│ │ ├───util
│ │ │ util.js
│ │
│ └───vendor
│ │ bootstrap-3.2.0.js
│ │ jquery-2.1.1.js
│ │ jquery-ui.js
│ │ mathJax.js
│ │ moment.js
│ │
│ ├───angular-1.4.9
│ │ │ angular-animate.js
│ │ │ angular-aria.js
│ │ │ angular-cookies.js
│ │ │ angular-loader.js
│ │ │ angular-message-format.js
│ │ │ angular-messages.js
│ │ │ angular-mocks.js
│ │ │ angular-resource.js
│ │ │ angular-route.js
│ │ │ angular-sanitize.js
│ │ │ angular-scenario.js
│ │ │ angular-touch.js
│ │ │ angular.js
│ │ │
│ │ └───i18n
│ ├───compressor
│ │ compressor.js
│ │
│ ├───datepicker
│ │ datepicker.css
│ │ datepicker.js
│ │
│ ├───highcharts-4.0.4
│ │ │ highcharts-3d.js
│ │ │ highcharts-all.js
│ │ │ highcharts-more.js
│ │ │ highcharts.js
│ │ │
│ │ └───modules
│ │ exporting.js
│ │ no-data-to-display.js
│ │
│ ├───redactor
│ │ accents.gif
│ │ accents_ext.gif
│ │ arrows.gif
│ │ brackets.gif
│ │ clips.js
│ │ fontcolor.js
│ │ fontfamily.js
│ │ fontsize.js
│ │ foreign.gif
│ │ function.png
│ │ greeklower.gif
│ │ greekupper.gif
│ │ imagemanager.js
│ │ mathLatex.css
│ │ mathLatex.js
│ │ matrix.gif
│ │ operators.gif
│ │ redactor-font.eot
│ │ redactor.css
│ │ redactor.js
│ │ redactor.less
│ │ relations.gif
│ │ subsupset.gif
│ │ symbols.gif
│ │ table.js
│ │
│ └───resumable-js
│ resumable.js
│ test.html
│
└───tests
│ conf.js
│ jasmine-runner.html
│ karma.conf.js
│ package.json
│
├───e2e
│ └───controllers
│ OMRController.e2e.js
│
└───unit
│ razor.js
│
├───controllers
│ fileController.test.js
│ formItemController.test.js
│
├───directives
├───factories
├───filters
├───models
└───services

</pre>

==Outras informações==
* [[Requisitos funcionais]]
* [[Requisitos não funcionais]]
* [[Especificações mínimas de hardware e software - Avalia+]]
* [[Arquitetura do produto]]
* [[Integrações]]
* [[Manual de instalação]]

Arquivo:Avalia+3.png

2016-11-29T10:08:11Z

Thiago.silvestre:

Avalia+

2016-11-29T10:06:01Z

Thiago.silvestre:

==Descrição==

Descrever nesta área o que é o produto, quais as necessidades de negócio pretende atender, a quem se destina.

==Funcionalidades de Ouro==

Nesta seção, insira 3 ou 4 funcionalidades que '''diferenciam''' e destacam o produto. De preferência coloque apenas os nomes das funcionalidades

==Link do Product Backlog==

Nesta seção, insira o link do Product Backlog do produto

==Arquitetura==

==Arquitetura BD==

[[:Arquivo:Diagram Avalia+.jpg|Imagem da modelagem de tabelas]]

==Arquitetura Front-End==

<p>O Avalia+ não se utiliza de rotas virtuais do ArgularJS, diferentemente de uma aplicação SPA[http://tableless.com.br/criando-uma-aplicacao-single-page-com-angularjs/]).</p>
<p>
Todos os componentes (construídos internamente) do Avalia+ (controllers, directives, filters, services e etc) são construídos baseados no pattern IIFE[https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/]
</p>

===Estrutura funcional===

- Pastas (negrito) <br/>
- Arquivos (negrito + itálico)

*<b>css</b>
**<b>vendor</b>
***<b>angular-motion</b>
****<b>modules</b> - animações utilizaveis com angularJS ng-animate
***<b><i>awesome-bootstrap-checkbox.css</i></b> - customizações de layout realizadas sobre os campos checkbox/radio do html
***<b><i>bootstrap.css</i></b> - franework
***<b><i>font-awesome.css</i></b> - customização de fontes para bootstrap
**<b><i>prova.css</i></b> - estilos para gerar .pdf da prova
**<b><i>style.scss</i></b> - estilos gerais do sistema
*<b>fonts</b> - fontes awesome/material
*<b>images</b> - imagens gerais do sistema/manual do sistema em .pdf
*<b>js</b>
**<b>angular</b>
***<b>controllers</b> - rotas 'físicas' asp.NET
***<b>directives</b>
****<b>_bundle</b> - todas as diretivas utilizadas no sistema
****<b><i>directives.js</i></b> - modulo centralizador de diretivas
***<b>filters</b>
****<b>_bundle</b> - todos os filtros utilizados no sistema
***<b>models</b> - todos os 'models' são serviços que são construídos com base na utilização dos serviços nativos '$http/$resource'
***<b>services</b>
****<b>_bundle</b> - todos os serviços utilizados no sistema
****<b><i>ApiSetting.js</i></b> - config. Api
****<b><i>services.js</i></b> - modulo centralizador de serviços
****<b><i>authenticationinterceptor.service.js</i></b> - modulo responsável por interceptar todas requisições realizadas sobre AJAX
**<b>vendor</b>
***<b>angular</b> - framework AngularJS
***<b>compressor</b> - realiza a compressão de arquivos de imagem (.jpg ideal) utilizando canvas do html
***<b>datepicker</b> - plugin para exibição e utilização de calendário
***<b>highcharts</b> - plugin para exibição gráficos
***<b>redactor</b> - plugin editor de textos
***<b>resumable</b> - plugin para realizar uploads com possibilidade de pause
***<b><i>bootstrap-3.2.0.js</i></b>
***<b><i>jquery-2.1.1.js</i></b>
***<b><i>jquery-ui.js</i></b>
***<b><i>mathJax.js</i></b> - framework para exibição de formulas matemáticas complexas através de <b>LaTeX, MathML[http://docs.mathjax.org/en/latest/tex.html]</b>
***<b><i>moment.js</i></b> - plugin para formatação de datas
*<b>tests</b>

===Controllers===

<p>Todos os controllers AngularJS (construídos internamente) são baseados em:</p>
<p>- <b>getter</b></p>
<p>
* na maioria dos controllers é injetado os módulos base (centralizadores) ['services', 'filters', 'directives]
</p>
<p>
<pre>
angular.module('appMain', ['services', 'filters', 'directives']);
</pre>
</p>
<p>- <b>setter</b></p>
<p>
* nome é baseado no prefix + suffix : [nome da View asp.NET] + ["Controller"]
</p>
<p>
<pre>
angular.module('appMain').controller("FormAbsenceReasonController", FormAbsenceReasonController);

function FormAbsenceReasonController() {};
</pre>
</p>
<p>- <b>injector</b></p>
<p>
* realiza as injeções de dependências
<pre>
FormAbsenceReasonController.$inject = ['$scope', '$rootScope', '$window', '$notification', '$util', 'AbsenceReasonModel'];
</pre>
</p>
<p>- <b>instanciar function no escopo </b></p>
<p>
* funções que são criadas e atribuídas ao escopo angular devem possuir um nome para facilitar o rastreamento de erros no console. Funções anônimas atribuídas diretamente ao escopo do Angular perdem a rastreabilidade em determinados casos.
* funções atribuídas ao escopo ficam visíveis através dos $scopes do angular, algumas pessoas preferem utilizar funções no escopo se realmente for necessário seu uso na view (.html), e optam por deixa-las privadas (não atribuídas ao escopo angular).
* se for implementado o uso de testes unitários devido ao ciclo de vida do angular o Jasmine[http://jasmine.github.io/] só consegue enxergar funções públicas (presentes no escopo do angular), recomenda-se cautela quando ao uso de funções privadas em soluções angular.
<pre>
//função publica: para acesso no escopo do angularJS
$scope.minhaFuncPublic = function __minhaFuncPublic() { };

//função publica: para acesso no escopo do angularJS, porém anônima
$scope.minhaFuncPublicAnonymous = function () { };

//função privada: sem acesso no escopo do angularJS
function minhaFunc() { };
</pre>
</p>
====Exemplo controller AngularJS====
<p><b>- arquivo: formAbsenceReasonController.js</b></p>
<p>
<pre>
/**
* function Cadastro/Edição Absence Reason Controller
* @namespace Controller
* @author Julio Cesar da Silva - 02/03/2016
*/
(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormAbsenceReasonController", FormAbsenceReasonController);

FormAbsenceReasonController.$inject = ['$scope', '$rootScope', '$window', '$notification', '$util', 'AbsenceReasonModel'];

function FormAbsenceReasonController($scope, $rootScope, $window, $notification, $util, AbsenceReasonModel) {

$scope.params = $util.getUrlParams();
$scope.absenceReason = { Description: undefined };

function Init() {

$notification.clear();

if ($scope.params.Id !== undefined) {

AbsenceReasonModel.findSimple({ Id: $scope.params.Id }, function (result) {

if (result.success) {
$scope.absenceReason = result.absenceReason;
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
});
}
};

$scope.setNewDefault = function setNewDefault() {
if (!$scope.absenceReason.IsDefault) {
angular.element('#modal').modal('show');
}
$scope.absenceReason.IsDefault = true;
};

$scope.salvar = function __salvar() {

if ($scope.verifica()) {

AbsenceReasonModel.save($scope.absenceReason, function (result) {

if (result.success) {
$notification.success(result.message);
$window.location.href = '/AbsenceReason/List';
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
});
}
};

$scope.voltar = function __voltar() {
$window.location.href = '/AbsenceReason/List';
};

$scope.verifica = function __verifica() {

if (!$scope.absenceReason.Description) {
$notification.alert('O campo "Descrição" é obrigatório.');
angular.element('#description').focus();
return false;
}
return true;
};

Init();
};

})(angular, jQuery);
</pre>
</p>

<p><b>- arquivo: ~\AbsenceReason\Form.html</b></p>
<p>
<pre>
<!DOCTYPE html>
<html data-ng-app="appMain">
<head>
<meta charset="utf-8" />
<title>FormAbsenceReason</title>
</head>
<body>
<div class="wellCustom" data-ng-controller="FormAbsenceReasonController">

</div>
</body>
</html>
</pre>
</p>

===Directives===

<p>
Quase todas as diretivas ficam centralizadas no module <b>directives</b>, com exceção de algumas third party (tooltip, popover e etc).
</p>
<p>
A vantagem de adotar um modulo centralizador é que as diretivas que são injetadas são somente aquelas carregadas (arquivo .js) pelo BunfleConfig.cs.
</p>
<br/>

====alert====
<p>dependência: <b>../services/_bundle/notification/notification.js</b></p>
<p>Composto por 2 diretivas:</p>
<p>
* <b>alert</b> - responsável por 'vigiar' o service <b>$notification</b> e criar/excluir uma nova notificação visual (html).
* <b>autoClose</b> - responsável por 'empilhar' as notificações em chamadas assíncronas e remover no término do tempo de permanência na pilha.
</p>
<p>
- exemplo:
<pre>
<alert></alert>
</pre>
</p>
<br/>

====checkbox-group====
<p>Utiliza um model para armazenar uma lista de checkbox selecionados</p>
<p>
- exemplo:
<pre>
<div data-ng-repeat="($indexPeriodo, periodo) in periodoCurso.lista track by $indexPeriodo">
<input id="checkbox_{{$indexPeriodo}}" type="checkbox" checklist-model="periodoCurso.selecionados" checklist-value="periodo" />
<label for="checkbox_{{$indexPeriodo}}">{{periodo.Description}}</label>
</div>
</pre>
</p>
<br/>

====collapse====
<p>Realiza o controle de <b>collapse (bootstrap)</b> em elementos de um ng-repeat. Utilizado no sistema somente <i>/Parameter</i></p>
- exemplo:
<pre>
<div class="accPadrao" ng-model="grupos" data-bs-collapse>
<div class="cards" ng-repeat="(catIndex,category) in categories track by catIndex">
<div class="tituloAcc" data-bs-collapse-toggle>
<h4>
{{category.Description}}
<i class="material-icons">{{ grupos == $index ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</i>
</h4>
</div>
<div class="panel-collapse" data-bs-collapse-target>
conteúdo aqui
</div>
</div>
</div>
</pre>
<br/>

====datepicker-directive====
<p>Realiza o controle do plugin datepicker no escopo do angularJS</p>
<p><b>dependência:</b> vendor/datepicker.js</p>
- exemplo:
<pre>
<input id="dateStart" type="text" placeholder="Data de Início" data-ng-model="dateStart" datepicker/>
</pre>
<br/>

====fieldinteger====
<p>Permite somente a entrada de caracteres numéricos.</p>
- exemplo:
<pre>
<input type="text" data-ng-model="idade" fieldinteger />
</pre>
<br/>

====highcharts-ng====
<p>Realiza a manipulação do plugin.</p>
- exemplo:
<pre>
<highchart class="chart" config="chart"></highchart>
</pre>
<br/>

====item-brief====
<p>Mostra o resumo detalhado de um item. (Obrigatório id do item)</p>
- exemplo:
<pre>
<item-brief item-id="{{item.Id}}" can-print="false"></item-brief>
</pre>
<br/>

====menu====
<p>Controla e constrói o menu do sistema. (localizado na master page)</p>
- exemplo:
<pre>
<div menu user='@{Html.RenderAction("NomeUsuarioLogado","Layout");}' system='@ViewBag.Title'></div>
</pre>
<br/>

====modal====
<p>Constrói uma modal. Utiliza-se da diretiva nativa <b>ng-transclude</b> para obter html específico, obedece ao escopo pai do 'controller' (escopo público)</p>
<p> Caso necessário customização das características da modal, utilizar convencional do bootstrap sem a directiva. </p>
- exemplo:
<pre>
<modal id="cancelModal" modal-title="<p>Deseja realmente sair?</p>">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-right">
<button type="button" class="btnPadrao" ng-click="cancel();">Sim</button>
<button type="button" class="btnCancelar2" data-dismiss="modal">Não</button>
</div>
</div>
</div>
</modal>
</pre>
<br/>

====modal-alert====
<p> Notificações internas ao escopo da modal. (Necessário construir no controller objeto de notificações)</p>
- exemplo:
<pre>
<modal-alert notification="notification.objNotification"></modal-alert>
</pre>
<br/>

====ng-change-file====
<p> Chamada de callback quando <b>input['file']</b> sofre uma alteração. Utilizável para realização de upload de arquivos dentro do escopo do controller.</p>
- exemplo:
<pre>
<input id="fileInport" type="file" data-ng-change-file="upload">
</pre>
<br/>

====ng-title====
<p> Mostrar title em options gerador pela diretiva nativa <b>ng-options</b> na tag <b><select></b></p>
- exemplo:
<pre>

<script>
$scope.pessoas.lista = [{Id: 1, Description:'João'}, {Id: 2, Description:'Paulo'}, {Id: 3, Description:'Ana'}, {Id: 4, Description:'Mayra'}];
</script>

<select class="form-control"
ng-options="pessoa as pessoa.Description for pessoa in pessoas.lista"
ng-title="pessoas.lista"
ng-title-propertie="Description"
ng-title-index="1"
ng-title-selected>
<option value="">--Selecione--</option>
</select>
</pre>
<br/>

====ng-show-loading====
<p> Mostra/oculta html de loading. Utilizado dentro do template da diretiva <b>/directives/_bundle/preloading/preloading.js</b></p>
- exemplo:
<pre>
<div id="preloading" ng-show-loading class="ng-cloak loading-box"><label>{{message}}</label></div>
</pre>
<br/>

====notification-filter====
<p> Descontinuada... Os filtros do sistema não seguem um mesmo padrão de construção nos controles, o que torna a diretiva dispensável</p>
<br/>

====page====
<p>Realiza o controle da paginação.</p>
<p><b>dependência: </b> "services/_bundle/pager/service.js" necessário injeção de dependência no controller - <b>$pager</b> </p>
<p>Há 2 formas de indicar 'paginador':</p>
* atributo "pager" funciona com objetos do escopo bind-two-way do angular, passagem de vários níveis de objeto
* atributo "varkey" funciona com somente 1 nível de objeto
- exemplo 1:
<pre>
<page method="getUploadQueueStatus()"
pager="pagerUploadQueue.paginate"
total-pages="{{pagerUploadQueue.pages}}"
total-itens="{{pagerUploadQueue.totalItens}}"
page-size="pagerUploadQueue.pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>
</pre>
- exemplo 2:
<pre>
<page method="Paginate()"
varkey="paginate "
total-pages="{{pages}}"
total-itens="{{totalItens}}"
page-size="pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>
</pre>
- exemplo no controller
<pre>
$scope.paginate = $pager(ReportCorrectionModel.getDres);
$scope.totalItens = 0;
$scope.pages = 0;
$scope.pageSize = 10;
$scope.message = false;
$scope.listResult = null;

$scope.search = function __search() {
if (!validateDate() || !validate()) return;
$scope.pages = 0;
$scope.totalItens = 0;
$scope.paginate.indexPage(0);
$scope.pageSize = $scope.paginate.getPageSize();
$scope.searcheableFilter = angular.copy($scope.filters);
Paginate();
};

function Paginate() {
$scope.paginate.paginate($scope.searcheableFilter).then(function (result) {
if (result.success) {
if (result.lista.length > 0) {
$scope.paginate.nextPage();
$scope.listResult = result.lista;
$scope.QuantidadeTotal = result.QuantidadeTotal;
if (!$scope.pages > 0) {
$scope.pages = $scope.paginate.totalPages();
$scope.totalItens = $scope.paginate.totalItens();
}
} else {
$scope.message = true;
$scope.listResult = null;
}
}
else {
$notification[result.type ? result.type : 'error'](result.message);
}
}, function () {
$scope.message = true;
$scope.listResult = null;
});
};
$scope.Paginate = Paginate;

</pre>
<br/>

====tooltip/popover====
<p> Responsável por construir as tooltips/popovers do sistema: </p>
<p>
* Para utilização de popover há dependência da tooltip - <b>directives/_bundle/popover/tooltip.js</b>
* <b>directives/_bundle/popover/helpers/dimensions.js</b>
* <b>css/vendor/angular-motion/**.css</b>, aplica as animações
</p>
- exemplo popover:
<pre>

<button class="btnMais"
type="button"
data-ng-click="setMenu(item.Item.ItemId, item.Item.LastVersion, item.Item.BaseTextId)"
data-placement="top" data-trigger="focus"
data-custom-class="itemListPopover"
data-template="Assets/js/angular/controllers/item/listItemMenu.html"
data-animation="popover-fade"
data-container="body"
data-bs-popover="popovermenu">
<i class="material-icons">view_list</i>
</button>


<div class="popover" tabindex="-1" ng-show="content">
<div class="arrow"></div>
<div class="popover-content">
<ul class="listaPopover">
<li>
<i class="material-icons">create</i>
<a href="javascript:void(0)" ng-click="popovermenu.editar(popovermenu.id); $hide()">Editar</a>
</li>
<li ng-hide="item.Item.ItemNarrated" ng-click="popovermenu.addItem(popovermenu.id); $hide()">
<i class="material-icons">add</i>
<a href="javascript:void(0)">Adicionar Item</a>
</li>
<li ng-click="popovermenu.excluir(popovermenu.id); $hide()">
<i class="material-icons">close</i>
<a href="javascript:void(0)">Excluir</a>
</li>
</ul>
</div>
</div>

//utilização no controller
$scope.popovermenu = {
title: "empty",
content: "empty",
id: undefined,
lastVersion: undefined,
visualizar: visualizarCallback, //function
editar: editarCallback, //function
excluir: excluirCallback, //function
addItem: addItemCallback, //function
};
</pre>

- exemplo tooltip com title:
<pre>
<button type="button"
class="btnPadrao"
data-btn-checkbox=""
data-btn-checkbox-true="1"
data-btn-checkbox-false="0"
data-trigger="hover"
data-type="success"
data-title="Aqui vai a descrição do que esse elemento representa."
data-placement="top"
data-container="body"
data-bs-tooltip>
<i class="material-icons">add</i>
</button>
</pre>

- exemplo tooltip com template:
<pre>


<div style="cursor:pointer; right: 15px;"
data-trigger="hover"
data-type="success"
data-template="Assets/js/angular/controllers/test/currentFiltersDiscipline.html"
data-placement="bottom"
data-animation="am-fade"
data-container="body"
data-bs-tooltip
class="notificationFilter">{{popoverFiltersDisciplines.selecteds.length}}
</div>


<div class="tooltip in">
<div class="tooltip-inner html-bind-trusted imgResponsive">
<div data-ng-if="popoverFiltersDisciplines.selecteds.length!=0">Filtros selecionados</div>
<hr data-ng-if="popoverFiltersDisciplines.selecteds.length!=0" />
<ul style="list-style:none; padding: 0px 0px 0px 0px;">
<li data-ng-repeat="($index, filter) in popoverFiltersDisciplines.selecteds track by $index" style="margin: 10px 0px 0px 0px">
<i class="material-icons">check</i> {{filter.Description}}
</li>
</ul>
<span data-ng-if="popoverFiltersDisciplines.selecteds.length==0">Nenhum filtro selecionado</span>
</div>
</div>
</pre>
<br/>

====preloading====
<p>Indica que há requisições Ajax em progresso no sistema. Trabalha baseando-se no service <b>$httpTransform</b> presente no arquivo <b>/service/authenticationinterceptor.service.js</b> </p>
- exemplo:
<pre>
<preloading message="Carregando..."></preloading>
</pre>

====radio-select====
<p>Seleção de radio.</p>
- exemplo:
<pre>
<div radio-select
radiolist="situationList"
radioselected="selectedObjSituation"
custom-class="radio-inline"
style="margin: 0 -84px;">
</div>
</pre>

====rating====
<p>Rating de dificuldades do sistema.</p>
- exemplo:
<pre>
<div rating-directive
id="dificuldade"
list="dificuldade.lista"
difficulty="dificuldade.objDificuldade"
lock="false">
</div>
</pre>

====redactor-directive====
<p>Controlar o plugin redactor.js através de uma directiva angularJS.</p>
* <b>images</b> - model que armazena os ids dos arquivos utilizados dentro do redactor
* <b>model</b> - armazena o texto html gerado pelo redactor
* <b>tipo</b> - indica para qual campo (tabela) o arquivo presente no redactor pertence
* <b>plugins</b> - foram criados plugins internos para o redactor, veja: vendor/redactor
- exemplo:
<pre>
<textarea redactor
id="textoBase"
name="textoBase"
class="form-control"
images="textobase.Files"
data-ng-model="textobase.Description"
tipo="@((Byte)EnumFileType.BaseText)">
</textarea>
</pre>

====report-filters====
<p>Filtros laterais para relatórios devido a 3 tela utilizarem a mesma sequência de filtros eles foram transformados em diretiva</p>
- exemplo:
<pre>
<report-filters filters="filters" global="global"></report-filters>
</pre>

====tags-input====
<p>Cria um campo do tipo tags</p>
- exemplo:
<pre>

<tags-input ng-model="tags">
</tags-input>

//formato aceito
$scope.tags = [{ text: 'just' }, { text: 'some' }, { text: 'cool' }];

</pre>

====uploader====
<p>Realiza o upload de arquivos.</p>
* <b>upload.js</b> - realiza o upload
* <b>uploader.js</b> - verifica as alterações do input['file']
- exemplo:
<pre>
<div upload
type="File"
trash="true"
placeholder="um arquivo"
callback="fileUploadSuccess"
component="modelFile">
</div>
</pre>

====writemaths====
<p>Mostra o preview das fórmulas matemáticas LaTex digitadas no plugin redactor.</p>
- exemplo:
<pre>
<div writemaths position="center top" previewposition="center bottom">
<textarea redactor
id="textoBase"
name="textoBase"
class="form-control"
images="textobase.Files"
ng-model="textobase.Description"
tipo="@((Byte)EnumFileType.BaseText)">
</textarea>
</div>
</pre>

===Filters===
Filtros são a maneira mais dinâmica de formatar dados na dinâmica bind do angular.

====minimize====
<p>Aplica reticências em um bind a partir do length indicado</p>
* recomenda-se utilização de tooltip para exibição do texto na integra.
- exemplo:
<pre>

$scope.meuTexto = "Um texto que extremamente longo pode ser minificado";

<div>
{{meuTexto | minimize:20}}
</div>

//resultado seria
"Um texto que extrema..."

</pre>

====moment====
<p>Formatador de dadas utilizando-se do plugin moment.</p>
- exemplo para formato ISO 8601
<pre>

$scope.createDate = "2016/01/01";

<div>
{{createDate | moment:"DD/MM/YYYY":true}}
</div>

//resultado seria
"01/01/2016"

</pre>

- exemplo para formato <b>/date()/json</b> -> /Date(1224043200000)/
<pre>

$scope.createDate = new Date();

<div>
{{createDate | moment:"DD/MM/YYYY"}}
</div>

//resultado seria
"01/01/2016"

</pre>

====trustedHtml====
<p>Converte html não confiável para confiável, utilizado em locais com <b>ng-bind-html</b></p>
- exemplo:
<pre>

$scope.meuHtml = "<div>Meu texto</div>";

<div ng-bind-html="meuHtml | trustedHtml"></div>

//resultado seria, sem o filtro o bind daria erro de trust
"Meu texto"

</pre>

====capitalize====
<p>Converte a 1ª letra em ToUpperCase </b></p>
- exemplo:
<pre>

$scope.label= "código";

<div> {{label | capitalize}}</div>

//resultado seria: "Código"

</pre>

====between====
<p> Utilizado na diretiva de paginação do sistema.</p>

====changeBlankSpace====
<p>Realiza a conversão de caracteres de espaçamento nas transações i/o do redactor.
Troca os caracteres de espaçamento de <b>\s</b> para <b> </b>. Assim os espaços em branco são respeitados no ng-bind</p>
- exemplo:
<pre>

<div ng-bind-html="(abstract.textbase | changeBlankSpace) | trustedHtml"></div>

</pre>

====tagToString====
<p>Quando um <b>texto base</b> possuí somente imagens o filtro retorna uma string indicando <b><somente imagem></b></p>
- exemplo:
<pre>

{{ itens.Statement | tagToString }}

</pre>

===Models===
A camada de comunicação do sistema, os models são mapeados segundo os controllers presentes no asp.Net, são serviços que são injetados nos controllers (angularjs) que irão interagir com 1 ou mais controller (asp.Net). No Avalia+ o serviço foi contruído com o componente nativo <b>$resource</b>. Como ele vem sendo utilizado desde o começo resolveu adota-lo como padrão. No entanto, uma possível futura melhoria ou abordagem seria interessante fazer o uso de <b>$http</b>.
-exemplo:
<pre>

/*
* File-Model
*/
(function () {
angular.module('services').factory('FileModel', ['$resource', function ($resource) {

// Model
var model = {

'uploadFile': {
method: 'POST',
url: base_url('File/UploadFile')
},
'upload': {
method: 'POST',
url: base_url('File/Upload')
},
'delete': {
method: 'POST',
url: base_url('File/LogicalDelete')
},
'searchUploadedFiles': {
method: 'GET',
url: base_url('File/SearchUploadedFiles')
},
'existsLinkedFiles': {
method: 'GET',
url: base_url('File/ExistsLinkedFiles')
},
'checkFileExists': {
method: 'GET',
url: base_url('File/CheckFileExists')
},
'checkFilePathExists': {
method: 'GET',
url: base_url('File/CheckFilePathExists')
}
};

// Retorna o serviço
return $resource('', {}, model);

}]);
})();

</pre>

===Services===
Serviços básicos do sistema.

====notification====
<p>Controla a pilha de notificações do sistema, pilha que é utilizada pela diretiva <b>alert.js</b>.</p>
-exemplo:
<pre>


<alert></alert>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$notification'];

function FormController($scope, $notification) {
$notification.alert('minha mensagem aqui.');
};

})(angular, jQuery);

</pre>

====pager====
<p>Controla a paginação utilizada no sistema. Dependente da diretiva <b>page.js</b>.</p>
<p>Há duas maneiras de indicar para a diretiva quem é a instancia que controla a paginação:</p>
*{object} pager="paginate" recebe a instância do $pager <b>$scope, exemplo -> $scope.nivel1.nivel2.paginate</b>
*{string} varkey="paginate" recebe o nome da instância presente no $parent (Só funciona para objetos de 1 único nivel no <b>$scope, exemplo -> $scope['paginate']</b>)
-exemplo:
<pre>


<page method="search()"
pager="paginate"
total-pages="{{pages}}"
total-itens="{{totalItens}}"
page-size="pageSize"
data-arr-page-size="[10,20,30,40,50,100]"></page>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$pager', 'SkillModel'];

function FormController($scope, $pager, SkillModel) {

$scope.paginate = $pager(SkillModel.searchByMatrix); //deve receber o service $resource
$scope.message = false;
$scope.pages = 0;
$scope.totalItens = 0;
$scope.pageSize = 10;
};

})(angular, jQuery);

</pre>

====util====
<p>Centralizador de utilidades do sistema, inclusive a function responsável por obter os parâmetros presente na query string da url</p>
-exemplo:
<pre>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("FormController", FormController);

FormController.$inject = ['$scope', '$util'];

function FormController($scope, $util) {

$scope.params = $util.getUrlParams();
};

})(angular, jQuery);

</pre>

====ApiSetting====
Responsável por configurar requisições de comunicação com API. Vide utilização no service de interceptação de requisições

====authenticationinterceptor.service====
<p>Todas as requisições (request/response/error) partindo dos componentes nativos <b>$resource/$http</b> serão interceptadas antes de seguir o fluxo normal client/server/client. </p>
*$httpTransform -> serviço presente no interceptor responsável por contabilizar a pilha de requisições <b>ngShowLoading.js/preloading.js</b> utilizam-se desse serviço para mostrar o loader do sistema.
*Para controllers (angularJS) que não se comunicam com API basta <b>não</b> configurar o service $ApiSetting
*Para controllers (angularJS) que se comunicam com APi segue abaixo o exemplo de como config. o service
-examplo:
<pre>

(function (angular, $) {

'use strict';

//~SETTER
angular
.module('appMain', ['services', 'filters', 'directives']);

//~GETTER
angular
.module('appMain')
.controller("CorrectionController", CorrectionController)
.config($config);

CorrectionController.$inject = ['$scope'];
$config.$inject = ['$apiSettingConfigProvider'];

function $config($apiSettingConfigProvider) {
var params = $apiSettingConfigProvider.getUrlParams();
$apiSettingConfigProvider.setUrlMethodExcluded("GetAuthorize");
$apiSettingConfigProvider.setUrlAuthentication(base_url("/MeuControllerASPNET/GetAuthorize"));
};

function CorrectionController($scope) {
}

})(angular, jQuery);

</pre>

===Versões dos frameworks===

{| border=1
|-
| Framework || versão || customizado p/ necessidade interna || Ref.
|-
| angularJS || 1.4.9 || <center>não</center> || https://angularjs.org/
|-
| compressor || 0.1 || <center>sim</center> || Mstech
|-
| datepicker || 2012 || <center>sim</center> || http://www.eyecon.ro/bootstrap-datepicker
|-
| highcharts || 4.0.4 || <center>não</center> || http://www.highcharts.com/
|-
| redactor || 10.2.5 || <center>sim</center> || https://imperavi.com/redactor/
|-
| resumable || x.x || <center>não</center> || http://github.com/23/resumable.js
|-
| bootstrap || 3.2.0 || <center>não</center> || http://getbootstrap.com/
|-
| jquery || 2.1.1 || <center>não</center> || https://jquery.com/
|-
| jqueryui || 1.10.3 || <center>não</center> || http://jqueryui.com
|-
| mathJax|| x.x || <center>não</center> || https://www.mathjax.org/
|-
| moment || 2.10.6 || <center>não</center> || http://momentjs.com/
|}

===Estrutura de pastas===

<pre>

├───css
│ │ prova.css
│ │ style.css
│ │ style.css.map
│ │ style.min.css
│ │ style.scss
│ │
│ ├───vendor
│ │ │ awesome-bootstrap-checkbox.css
│ │ │ bootstrap.css
│ │ │ font-awesome.css
│ │ │
│ │ └───angular-motion
│ │ │ angular-motion.css
│ │ │
│ │ └───modules
│ │ collapse.css
│ │ fade-and-slide.css
│ │ fade.css
│ │ flip.css
│ │ menu.css
│ │ popover-fade.css
│ │
│ └───_bundle
│ angular.css
│
├───fonts
│
├───images
│
├───js
│ ├───angular
│ │ ├───controllers
│ │ │ ├───absenceReason
│ │ │ │ formAbsenceReasonController.js
│ │ │ │ listAbsenceReasonController.js
│ │ │ │
│ │ │ ├───adherence
│ │ │ │ adherenceController.js
│ │ │ │
│ │ │ ├───answerSheet
│ │ │ │ answerSheetLotController.js
│ │ │ │ answerSheetStudentController.js
│ │ │ │ batchDetailsController.js
│ │ │ │ customTooltip.html
│ │ │ │ schoolLotMenu.html
│ │ │ │ testLotMenu.html
│ │ │ │
│ │ │ ├───cognitiveCompetence
│ │ │ │ formCognitiveCompetenceController.js
│ │ │ │ listCognitiveCompetenceController.js
│ │ │ │
│ │ │ ├───correction
│ │ │ │ correctionController.js
│ │ │ │ correctionResultController.js
│ │ │ │
│ │ │ ├───correlatedSkill
│ │ │ │ formCorrelatedSkillController.js
│ │ │ │
│ │ │ ├───discipline
│ │ │ │ formDisciplineController.js
│ │ │ │ listDisciplineController.js
│ │ │ │
│ │ │ ├───evaluationMatrix
│ │ │ │ evaluationMatrixController.js
│ │ │ │ evaluationMatrixListController.js
│ │ │ │
│ │ │ ├───file
│ │ │ │ fileController.js
│ │ │ │ fileMenu.html
│ │ │ │
│ │ │ ├───home
│ │ │ │ homeController.js
│ │ │ │
│ │ │ ├───item
│ │ │ │ formItemController.js
│ │ │ │ listItemController.js
│ │ │ │ listItemMenu.html
│ │ │ │
│ │ │ ├───itemLevel
│ │ │ │ formItemLevelController.js
│ │ │ │ listItemLevelController.js
│ │ │ │
│ │ │ ├───itemType
│ │ │ │ itemTypeFormController.js
│ │ │ │ itemTypeListController.js
│ │ │ │
│ │ │ ├───modelEvaluationMatrix
│ │ │ │ modelEvaluationMatrixController.js
│ │ │ │ modelEvaluationMatrixListController.js
│ │ │ │
│ │ │ ├───modelTest
│ │ │ │ modelTestController.js
│ │ │ │ modelTestListController.js
│ │ │ │
│ │ │ ├───parameter
│ │ │ │ parameterController.js
│ │ │ │ parameterMenu.html
│ │ │ │ parameterVersionableMenu.html
│ │ │ │
│ │ │ ├───performanceLevel
│ │ │ │ formPerformanceLevelController.js
│ │ │ │ listPerformanceLevelController.js
│ │ │ │
│ │ │ ├───reportAnswerSheet
│ │ │ │ reportAnswerSheetDREController.js
│ │ │ │ reportAnswerSheetFilesController.js
│ │ │ │ reportAnswerSheetSchoolController.js
│ │ │ │
│ │ │ ├───reportCorrection
│ │ │ │ reportClasseController.js
│ │ │ │ reportDREController.js
│ │ │ │ reportSchoolController.js
│ │ │ │ reportStudentController.js
│ │ │ │
│ │ │ ├───reportItem
│ │ │ │ reportItemController.js
│ │ │ │
│ │ │ ├───reportTest
│ │ │ │ graphicPerformanceSchoolController.js
│ │ │ │ performanceItemController.js
│ │ │ │ performanceSchoolController.js
│ │ │ │ performanceSkillController.js
│ │ │ │
│ │ │ ├───test
│ │ │ │ indexRequestRevokeMenu.html
│ │ │ │ menu-test-import-tpl.html
│ │ │ │ testAdministrateController.js
│ │ │ │ testController.js
│ │ │ │ testImportController.js
│ │ │ │ testListController.js
│ │ │ │ testListMenu.html
│ │ │ │ testReportController.js
│ │ │ │ testRequestRevokeController.js
│ │ │ │ testResponsesController.js
│ │ │ │ testRevokeController.js
│ │ │ │
│ │ │ └───testType
│ │ │ formTestTypeController.js
│ │ │ listTestTypeController.js
│ │ │
│ │ ├───directives
│ │ │ │ directives.js
│ │ │ │
│ │ │ └───_bundle
│ │ │ ├───alert
│ │ │ │ alert.css
│ │ │ │ alert.js
│ │ │ │
│ │ │ ├───checkbox-group
│ │ │ │ ckeckbox-group.js
│ │ │ │
│ │ │ ├───collapse
│ │ │ │ collapse.js
│ │ │ │
│ │ │ ├───datepicker
│ │ │ │ datepicker-directive.js
│ │ │ │
│ │ │ ├───fieldinteger
│ │ │ │ fieldinteger.js
│ │ │ │
│ │ │ ├───highcharts
│ │ │ │ highcharts-ng.js
│ │ │ │
│ │ │ ├───item-brief
│ │ │ │ item-brief.html
│ │ │ │ item-brief.js
│ │ │ │
│ │ │ ├───menu
│ │ │ │ menu.html
│ │ │ │ menu.js
│ │ │ │ sitemas.html
│ │ │ │
│ │ │ ├───modal
│ │ │ │ modal.js
│ │ │ │
│ │ │ ├───modal-alert
│ │ │ │ modal-alert.js
│ │ │ │
│ │ │ ├───ng-change-file
│ │ │ │ ng-change-file.js
│ │ │ │
│ │ │ ├───ng-title
│ │ │ │ ng-title.js
│ │ │ │
│ │ │ ├───ngShowLoading
│ │ │ │ ngShowLoading.js
│ │ │ │
│ │ │ ├───notification-filter
│ │ │ │ notification.filter.js
│ │ │ │
│ │ │ ├───page
│ │ │ │ page.css
│ │ │ │ page.js
│ │ │ │
│ │ │ ├───popover
│ │ │ │ │ popover.html
│ │ │ │ │ popover.js
│ │ │ │ │ tooltip.html
│ │ │ │ │ tooltip.js
│ │ │ │ │
│ │ │ │ └───helpers
│ │ │ │ date-parser.js
│ │ │ │ debounce.js
│ │ │ │ dimensions.js
│ │ │ │ parse-options.js
│ │ │ │ raf.js
│ │ │ │
│ │ │ ├───preloading
│ │ │ │ preloading.css
│ │ │ │ preloading.js
│ │ │ │
│ │ │ ├───radio-select
│ │ │ │ radio-select.js
│ │ │ │
│ │ │ ├───rating
│ │ │ │ rating-directive.js
│ │ │ │ rating.css
│ │ │ │
│ │ │ ├───redactor-directive
│ │ │ │ redactor-directive.js
│ │ │ │
│ │ │ ├───reportFilters
│ │ │ │ filtersTpl.html
│ │ │ │ reportFilters.js
│ │ │ │
│ │ │ ├───tags-input
│ │ │ │ ng-tags-input.css
│ │ │ │ ng-tags-input.js
│ │ │ │
│ │ │ ├───uploader
│ │ │ │ upload.js
│ │ │ │ uploader.js
│ │ │ │
│ │ │ └───writemaths
│ │ │ rangy-core.js
│ │ │ textinputs_jquery.js
│ │ │ writemaths-directive.js
│ │ │ writemaths.css
│ │ │ writemaths.js
│ │ │
│ │ ├───filters
│ │ │ │ filters.js
│ │ │ │
│ │ │ └───_bundle
│ │ │ ├───between
│ │ │ │ between.js
│ │ │ │
│ │ │ ├───changeBlankSpace
│ │ │ │ changeBlankSpace.js
│ │ │ │
│ │ │ ├───minimize
│ │ │ │ minimize.js
│ │ │ │
│ │ │ ├───moment
│ │ │ │ moment.js
│ │ │ │
│ │ │ ├───tagToString
│ │ │ │ tagToString.js
│ │ │ │
│ │ │ └───trustedHtml
│ │ │ trustedHtml.js
│ │ │
│ │ ├───models
│ │ │ ├───AbsenceReason
│ │ │ │ absenceReasonModel.js
│ │ │ │
│ │ │ ├───adherence
│ │ │ │ adherenceApiModel.js
│ │ │ │ adherenceModel.js
│ │ │ │
│ │ │ ├───answerSheet
│ │ │ │ answerSheetModel.js
│ │ │ │
│ │ │ ├───cognitiveCompetence
│ │ │ │ cognitiveCompetenceModel.js
│ │ │ │
│ │ │ ├───correction
│ │ │ │ correctionApiModel.js
│ │ │ │ correctionModel.js
│ │ │ │
│ │ │ ├───correlatedSkill
│ │ │ │ correlatedSkillModel.js
│ │ │ │
│ │ │ ├───course
│ │ │ │ courseModel.js
│ │ │ │
│ │ │ ├───discipline
│ │ │ │ disciplineModel.js
│ │ │ │
│ │ │ ├───evaluationMatrix
│ │ │ │ evaluationMatrixModel.js
│ │ │ │
│ │ │ ├───evaluationMatrixCourse
│ │ │ │ evaluationMatrixCourseModel.js
│ │ │ │
│ │ │ ├───EvaluationMatrixCourseCurriculumGrade
│ │ │ │ EvaluationMatrixCourseCurriculumGradeModel.js
│ │ │ │
│ │ │ ├───file
│ │ │ │ fileModel.js
│ │ │ │
│ │ │ ├───formatType
│ │ │ │ formatTypeModel.js
│ │ │ │
│ │ │ ├───Integration
│ │ │ │ ├───course
│ │ │ │ │ courseModel.js
│ │ │ │ │
│ │ │ │ ├───curriculumGrade
│ │ │ │ │ curriculumGradeModel.js
│ │ │ │ │
│ │ │ │ ├───levelEducation
│ │ │ │ │ levelEducationModel.js
│ │ │ │ │
│ │ │ │ └───modality
│ │ │ │ modalityModel.js
│ │ │ │
│ │ │ ├───item
│ │ │ │ itemModel.js
│ │ │ │
│ │ │ ├───itemLevel
│ │ │ │ itemLevelModel.js
│ │ │ │
│ │ │ ├───itemSituation
│ │ │ │ itemSituationModel.js
│ │ │ │
│ │ │ ├───itemType
│ │ │ │ itemTypeModel.js
│ │ │ │
│ │ │ ├───modelEvaluationMatrix
│ │ │ │ modelEvaluationMatrixModel.js
│ │ │ │
│ │ │ ├───modelSkillLevel
│ │ │ │ modelSkillLevelModel.js
│ │ │ │
│ │ │ ├───modelTestModel
│ │ │ │ modelTestModel.js
│ │ │ │
│ │ │ ├───parameter
│ │ │ │ parameterModel.js
│ │ │ │
│ │ │ ├───performanceLevel
│ │ │ │ performanceLevelModel.js
│ │ │ │
│ │ │ ├───reportAnswerSheet
│ │ │ │ reportAnswerSheetModel.js
│ │ │ │
│ │ │ ├───reportCorrection
│ │ │ │ reportCorrectionModel.js
│ │ │ │
│ │ │ ├───reportItem
│ │ │ │ reportItemModel.js
│ │ │ │
│ │ │ ├───reportTest
│ │ │ │ reportTestModel.js
│ │ │ │
│ │ │ ├───skill
│ │ │ │ skillModel.js
│ │ │ │
│ │ │ ├───test
│ │ │ │ testAdministrateModel.js
│ │ │ │ testImportExportModel.js
│ │ │ │ testListModel.js
│ │ │ │ testModel.js
│ │ │ │ testRequestRevokeModel.js
│ │ │ │ testRevokeModel.js
│ │ │ │
│ │ │ ├───TestPerformanceLevel
│ │ │ │ testPerformanceLevelModel.js
│ │ │ │
│ │ │ ├───testType
│ │ │ │ testTypeModel.js
│ │ │ │
│ │ │ ├───testTypeCourse
│ │ │ │ testTypeCourseModel.js
│ │ │ │
│ │ │ ├───testTypeCourseCurriculumGrade
│ │ │ │ testTypeCourseCurriculumGradeModel.js
│ │ │ │
│ │ │ ├───testTypeItemLevel
│ │ │ │ testTypeItemLevelModel.js
│ │ │ │
│ │ │ └───typeLevelEducation
│ │ │ typeLevelEducationModel.js
│ │ │
│ │ └───services
│ │ │ authenticationinterceptor.service.js
│ │ │ services.js
│ │ │ ApiSetting.js
│ │ │
│ │ └───_bundle
│ │ ├───notification
│ │ │ notification.js
│ │ │
│ │ ├───pager
│ │ │ services.js
│ │ │
│ │ ├───util
│ │ │ util.js
│ │
│ └───vendor
│ │ bootstrap-3.2.0.js
│ │ jquery-2.1.1.js
│ │ jquery-ui.js
│ │ mathJax.js
│ │ moment.js
│ │
│ ├───angular-1.4.9
│ │ │ angular-animate.js
│ │ │ angular-aria.js
│ │ │ angular-cookies.js
│ │ │ angular-loader.js
│ │ │ angular-message-format.js
│ │ │ angular-messages.js
│ │ │ angular-mocks.js
│ │ │ angular-resource.js
│ │ │ angular-route.js
│ │ │ angular-sanitize.js
│ │ │ angular-scenario.js
│ │ │ angular-touch.js
│ │ │ angular.js
│ │ │
│ │ └───i18n
│ ├───compressor
│ │ compressor.js
│ │
│ ├───datepicker
│ │ datepicker.css
│ │ datepicker.js
│ │
│ ├───highcharts-4.0.4
│ │ │ highcharts-3d.js
│ │ │ highcharts-all.js
│ │ │ highcharts-more.js
│ │ │ highcharts.js
│ │ │
│ │ └───modules
│ │ exporting.js
│ │ no-data-to-display.js
│ │
│ ├───redactor
│ │ accents.gif
│ │ accents_ext.gif
│ │ arrows.gif
│ │ brackets.gif
│ │ clips.js
│ │ fontcolor.js
│ │ fontfamily.js
│ │ fontsize.js
│ │ foreign.gif
│ │ function.png
│ │ greeklower.gif
│ │ greekupper.gif
│ │ imagemanager.js
│ │ mathLatex.css
│ │ mathLatex.js
│ │ matrix.gif
│ │ operators.gif
│ │ redactor-font.eot
│ │ redactor.css
│ │ redactor.js
│ │ redactor.less
│ │ relations.gif
│ │ subsupset.gif
│ │ symbols.gif
│ │ table.js
│ │
│ └───resumable-js
│ resumable.js
│ test.html
│
└───tests
│ conf.js
│ jasmine-runner.html
│ karma.conf.js
│ package.json
│
├───e2e
│ └───controllers
│ OMRController.e2e.js
│
└───unit
│ razor.js
│
├───controllers
│ fileController.test.js
│ formItemController.test.js
│
├───directives
├───factories
├───filters
├───models
└───services

</pre>

==Outras informações==
* [[Requisitos funcionais]]
* [[Requisitos não funcionais]]
* [[Especificações mínimas de hardware e software - Avalia+]]
* [[Arquitetura do produto]]
* [[Integrações]]
* [[Manual de instalação]]