Tutorial AngularJS - episódio 5 - diretivas
-
Upload
jose-naves-moura-neto -
Category
Technology
-
view
566 -
download
0
description
Transcript of Tutorial AngularJS - episódio 5 - diretivas
![Page 1: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/1.jpg)
Tutorial AngularJSEpisódio 05Diretivas
![Page 2: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/2.jpg)
O que são diretivas?
Diretivas são como Angular dá superpoderesao browser.
![Page 3: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/3.jpg)
Principais diretivas● ng-app● ng-controller● ng-bind● ng-model● ng-repeat● ng-show● ng-hide● ng-click
![Page 4: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/4.jpg)
Diretiva ng-app
Usada para fazer o bootstrap de sua aplicação.
![Page 5: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/5.jpg)
Diretiva ng-controller
Define um controller para o trecho de código.
![Page 6: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/6.jpg)
Diretiva ng-bind
O mesmo que {{var}}
![Page 7: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/7.jpg)
Diretiva ng-model
“Amarra” uma campo input a uma propriedade do controller.
![Page 8: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/8.jpg)
Diretiva ng-repeat
Itera sobre um array (for each).
![Page 9: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/9.jpg)
Diretiva ng-show
Deixa visível um elemento de acordo com uma expressão booleana.
![Page 10: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/10.jpg)
Diretiva ng-hide
Esconde um elemento de acordo com o valor de uma expressão booleana.
![Page 11: Tutorial AngularJS - episódio 5 - diretivas](https://reader033.fdocuments.us/reader033/viewer/2022060120/559315dd1a28abd15f8b4645/html5/thumbnails/11.jpg)
Diretiva ng-click
Define o comportamento que um clique terá.