O documento apresenta um cronograma de tópicos sobre AngularJS II, incluindo filters, validação de formulários, injeção de dependências, services, scopes e testes unitários. É fornecido detalhes sobre como usar diferentes filters embutidos como currency, date e json para formatar dados, e como validar formulários com requisitos, tamanhos mínimos e máximos, e padrões.

1. ANGULARJS II
Por Ismael Gomes Costa

2. Cronograma
1. Filters
2. Filters Embedded
3. Form Validation
4. $pristine, $dirty, $error
5. Injeção de Dependências
6. Services
7. Scopes
8. Testes unitários
9. Automatizando o fluxo
ANGULARJS II

3. ANGULARJS II
Por Ismael Gomes Costa
FILTERS

4. Filters
ANGULARJS II
 Filtro simples:
{{expression | filter}}
 Filtro combinado:
{{expression | filter1 | filter2}}

5. ANGULARJS II
Por Ismael Gomes Costa
FILTERS EMBEDDED

6. Filters Embedded - Currency
ANGULARJS II
 Currency:
{{ 10 | currency}} = $10.00
{{ 10 | currency: 'R$‘ }} = R$10.00
 Internacionaliação
<script src="js/lib/angular-locale_pt-br.js"></script>
{{ 10 | currency: 'R$‘ }} = R$10,00
 Referência:
https://docs.angularjs.org/api/ng/filter/currency

7. Filters Embedded - Date
ANGULARJS II
 Date:
{{ data | date }} = Dec 10, 2013.
{{ data | date:'MMMM dd/MM/yyyy HH:mm:ss' }} = December 10/12/2013 21:42:10
 Internacionaliação
<script src="js/lib/angular-locale_pt-br.js"></script>
{{ data | date:'MMMM dd/MM/yyyy HH:mm:ss' }} = Dezembro 10/12/2013 21:42:10
 Referência:
https://docs.angularjs.org/api/ng/filter/date

8. Filters Embedded - Json
ANGULARJS II
 json:
{{ car | json }} =
{
"plate": "6MBV006",
"color": "Blue",
"entrance": "2013-12-09T23:46:15.186Z"
}
 Referência:
https://docs.angularjs.org/api/ng/filter/json

9. Filters Embedded - Outros
ANGULARJS II
 limitTo:
MinhaStringCompleta = {{ expression | limitTo:10 }} = MinhaStrin
 Lowercase:
MinhaString = {{ expression | lowercase }} = minhastring
 OrderBy:
{{ expression | orderBy:predicate:reverse }}
https://docs.angularjs.org/api/ng/filter/orderBy

10. ANGULARJS II
Por Ismael Gomes Costa
FORM VALIDATION

11. Form Validation
ANGULARJS II
<input
type="text"
name="plateField"
ng-model="car.plate"
placeholder="What's the plate?"
ng-required="true"
/>
<input
type="text"
name="plateField"
ng-model="car.plate"
placeholder="What's the plate?"
ng-required="true"
ng-minlength="6"
ng-maxlength="10"
/>

12. Form Validation
ANGULARJS II
<input
type="text"
name="plateField"
ng-model="car.plate"
placeholder="What's the plate?"
ng-required="true"
ng-minlength="6"
ng-maxlength="10"
ng-pattern="/[A-Z]{3}[0-9]{3,7}/"
/>

13. ANGULARJS II
Por Ismael Gomes Costa
$pristine, $dirty, $error

14. $pristine, $dirty, $error
ANGULARJS II
 $pristine:
Verifica se o valor está limpo (não foi alterado nenhuma
vez durante a edição do form)
 $dirty
Verifica se o valor está sujo (já foi alterado em algum
momento durante a edição do form)

15. $pristine, $dirty, $error
ANGULARJS II
 $error:
Verifica se o form está inválido.
<alert ng-show="carForm.plateField.$dirty && carForm.plateField.$invalid"
topic="Something went wrong!">
<span ng-show="carForm.plateField.$error.required">
You must inform the plate of the car!
</span>
<span ng-show="carForm.plateField.$error.minlength">
The plate must have at least 6 characters!
</span>
<span ng-show="carForm.plateField.$error.maxlength">
The plate must have at most 10 characters!
</span>
<span ng-show="carForm.plateField.$error.pattern">
The plate must start with non-digits, followed by 4 to 7
numbers!
</span>
</alert>

16. ANGULARJS II
Por Ismael Gomes Costa
Services

17. Services
ANGULARJS II
 Singleton - Cada componente dependente de um
serviço obtém uma referência à única instância
gerado pela service factory.
 Lazily instantiated – Angular só instancia um service
quando um componente da aplicação depende dele.

18. ANGULARJS II
Por Ismael Gomes Costa
Scopes

19. Scopes
ANGULARJS II
 $scope - Cada controller e diretiva tem o seu.
 $rootScope – Global, use com moderação (nunca, se
for possível).

20. Scopes - $scope
ANGULARJS II
 Pode ser isolado ou não.
 Pode acessar valores dos escopos pai caso a um
controller esteja dentro do outro.
<div ng-controller="MyController">
<div ng-controller="MyController2">
</div>
</div>

21. ANGULARJS II
Por Ismael Gomes Costa
Testes Unitários

22. Testes Unitários
ANGULARJS II
 Jasmine - Testes.
 Karma – Roda os testes do Jasmine.

23. ANGULARJS II
Por Ismael Gomes Costa
Automatizando o fluxo

24. Testes Unitários
ANGULARJS II
 GruntJS.
 Bower.

25. ANGULARJS II
 BRANAS, Rodrigo. AngularJS Essentials:
Design and construct reusable, maintainable,
and modular web applications with AgularJS.
Bombaim:Birmingham, 2014.
 https://docs.angularjs.org/guide
Referências Bibliográficas