Embed Size (px)
Citation preview
ANGULARJS II
Por Ismael Gomes Costa
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
ANGULARJS II
Por Ismael Gomes Costa
FILTERS
Filters
ANGULARJS II
Filtro simples:
{{expression | filter}}
Filtro combinado:
{{expression | filter1 | filter2}}
ANGULARJS II
Por Ismael Gomes Costa
FILTERS EMBEDDED
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
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
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
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
ANGULARJS II
Por Ismael Gomes Costa
FORM VALIDATION
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" />
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}/"
/>
ANGULARJS II
Por Ismael Gomes Costa
$pristine, $dirty, $error
$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)
$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>
ANGULARJS II
Por Ismael Gomes Costa
Services
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.
ANGULARJS II
Por Ismael Gomes Costa
Scopes
Scopes
ANGULARJS II
$scope - Cada controller e diretiva tem o seu.
$rootScope – Global, use com moderação (nunca, se for possível).
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>
ANGULARJS II
Por Ismael Gomes Costa
Testes Unitários
Testes Unitários
ANGULARJS II
Jasmine - Testes.
Karma – Roda os testes do Jasmine.
ANGULARJS II
Por Ismael Gomes Costa
Automatizando o fluxo
Testes Unitários
ANGULARJS II
GruntJS.
Bower.
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
