SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
Tutorial
AngularJS
Episódio 05
Diretivas
O que são diretivas?

Diretivas são como Angular dá superpoderes
ao browser.
Principais diretivas
●
●
●
●
●
●
●
●

ng-app
ng-controller
ng-bind
ng-model
ng-repeat
ng-show
ng-hide
ng-click
Diretiva ng-app

Usada para fazer o bootstrap de sua aplicação.
Diretiva ng-controller

Define um controller para o trecho de código.
Diretiva ng-bind

O mesmo que {{var}}
Diretiva ng-model

“Amarra” uma campo input a uma propriedade
do controller.
Diretiva ng-repeat

Itera sobre um array (for each).
Diretiva ng-show

Deixa visível um elemento de acordo com uma
expressão booleana.
Diretiva ng-hide

Esconde um elemento de acordo com o valor
de uma expressão booleana.
Diretiva ng-click

Define o comportamento que um clique terá.
http://plnkr.co/1RSHJh

Mais conteúdo relacionado

Destaque

Destaque (20)

Directivas en angular js
Directivas en angular jsDirectivas en angular js
Directivas en angular js
 
Curso AngularJS - 6. formularios
Curso AngularJS - 6. formulariosCurso AngularJS - 6. formularios
Curso AngularJS - 6. formularios
 
Directivas en AngularJS
Directivas en AngularJSDirectivas en AngularJS
Directivas en AngularJS
 
Angular js com diretivas
Angular js com diretivasAngular js com diretivas
Angular js com diretivas
 
Apresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UIApresentação AngularJS - Angular UI
Apresentação AngularJS - Angular UI
 
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
 
Curso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladoresCurso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladores
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
Curso AngularJS - 1. introducción
Curso AngularJS - 1. introducciónCurso AngularJS - 1. introducción
Curso AngularJS - 1. introducción
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman  | Seminário
ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 

Semelhante a Tutorial AngularJS - episódio 5 - diretivas

Semelhante a Tutorial AngularJS - episódio 5 - diretivas (20)

AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e RotasAngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
 
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended BrasíliaIntrodução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
Introdução ao Desenvolvimento Web com AngularJS - Google I/O Extended Brasília
 
Asp.Net Mvc Dev Days09 V3 Pt
Asp.Net Mvc Dev Days09 V3 PtAsp.Net Mvc Dev Days09 V3 Pt
Asp.Net Mvc Dev Days09 V3 Pt
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório
 
Angular js
Angular jsAngular js
Angular js
 
TDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernasTDC2016SP - TypeScript em aplicações modernas
TDC2016SP - TypeScript em aplicações modernas
 
Novidades do AngularJS 2.0
Novidades do AngularJS 2.0Novidades do AngularJS 2.0
Novidades do AngularJS 2.0
 
Apresentação M V C
Apresentação M V CApresentação M V C
Apresentação M V C
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
Angular.JS - Estado Atual
Angular.JS - Estado AtualAngular.JS - Estado Atual
Angular.JS - Estado Atual
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Angular 2
Angular 2Angular 2
Angular 2
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Grails
GrailsGrails
Grails
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
 
Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)Projetos reativos com Angular, RxJS e Redux (ngRx)
Projetos reativos com Angular, RxJS e Redux (ngRx)
 

Mais de Jose Naves Moura Neto

Mais de Jose Naves Moura Neto (13)

Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016Iniciando no desenvolvimento android 2016
Iniciando no desenvolvimento android 2016
 
Tutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - LayoutTutorial Android episódio 02 - Layout
Tutorial Android episódio 02 - Layout
 
Tutorial Android - Activities
Tutorial Android - ActivitiesTutorial Android - Activities
Tutorial Android - Activities
 
Preparando APKs para publicação na Google Play
Preparando APKs para publicação na Google PlayPreparando APKs para publicação na Google Play
Preparando APKs para publicação na Google Play
 
Como iniciar o desenvolvimento Android
Como iniciar o desenvolvimento AndroidComo iniciar o desenvolvimento Android
Como iniciar o desenvolvimento Android
 
Tutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http servicesTutorial AngularJS - episódio 9 - $http services
Tutorial AngularJS - episódio 9 - $http services
 
Tutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviçosTutorial AngularJS - episódio 8 - serviços
Tutorial AngularJS - episódio 8 - serviços
 
Tutorial AngularJS - episódio 2 - mvc
Tutorial AngularJS - episódio 2 -  mvcTutorial AngularJS - episódio 2 -  mvc
Tutorial AngularJS - episódio 2 - mvc
 
Tutorial AngularJS - episódio 2 - Hello World
Tutorial AngularJS - episódio 2 -  Hello WorldTutorial AngularJS - episódio 2 -  Hello World
Tutorial AngularJS - episódio 2 - Hello World
 
Tutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambienteTutorial AngularJS - episódio 1 - ambiente
Tutorial AngularJS - episódio 1 - ambiente
 
MEAN
MEANMEAN
MEAN
 
Programação reativa com Meteor
Programação reativa com MeteorProgramação reativa com Meteor
Programação reativa com Meteor
 
[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6[Java] Contexts and Dependency Injection em JEE6
[Java] Contexts and Dependency Injection em JEE6
 

Último

Último (9)

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - SISTEMAS DISTRIBUÍDOS E REDES - 52_2024.docx
ATIVIDADE 1 - SISTEMAS DISTRIBUÍDOS E REDES - 52_2024.docxATIVIDADE 1 - SISTEMAS DISTRIBUÍDOS E REDES - 52_2024.docx
ATIVIDADE 1 - SISTEMAS DISTRIBUÍDOS E REDES - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
Luís Kitota AWS Discovery Day Ka Solution.pdf
Luís Kitota AWS Discovery Day Ka Solution.pdfLuís Kitota AWS Discovery Day Ka Solution.pdf
Luís Kitota AWS Discovery Day Ka Solution.pdf
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
 
Programação Orientada a Objetos - 4 Pilares.pdf
Programação Orientada a Objetos - 4 Pilares.pdfProgramação Orientada a Objetos - 4 Pilares.pdf
Programação Orientada a Objetos - 4 Pilares.pdf
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 

Tutorial AngularJS - episódio 5 - diretivas