var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),g=(e,a)=>{for(var s in a)t(e,s,{get:a[s],enumerable:!0})},i=(e,a,s,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of h(a))!N.call(e,c)&&c!==s&&t(e,c,{get:()=>a[c],enumerable:!(l=m(a,c))||l.enumerable});return e};var v=(e,a,s)=>(s=e!=null?d(u(e)):{},i(a||!e||!e.__esModule?t(s,"default",{value:e,enumerable:!0}):s,e)),f=e=>i(t({},"__esModule",{value:!0}),e);var r=k((T,o)=>{o.exports=_jsx_runtime});var y={};g(y,{default:()=>x,frontmatter:()=>j});var n=v(r()),j={title:"Diretivas do AngularJS",date:"2023-07-19",tags:["Angular","Guide","Componentes","Framework"],draft:!0,summary:"Aprenda sobre o que s\xE3o diretivas e como implementar."};function p(e){let a=Object.assign({p:"p",img:"img",h1:"h1",a:"a",span:"span",strong:"strong",h2:"h2",ul:"ul",li:"li",pre:"pre",code:"code"},e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.p,{children:(0,n.jsx)(a.img,{alt:"",src:"https://angularjs.org/img/angularjs-for-header-only.svg"})}),(0,n.jsxs)(a.h1,{id:"observa\xE7\xF5es-importantes",children:[(0,n.jsx)(a.a,{href:"#observa\xE7\xF5es-importantes","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Observa\xE7\xF5es importantes"]}),(0,n.jsx)(a.p,{children:"Este artigo tem finalidades de facilita\xE7\xE3o para os iniciantes da tecnologia como eu, minha ideia \xE9 mostrar de um ponto de vista mais simples poss\xEDvel. Estou aprendendo Angular e na medida que for solidificando meus conhecimentos, registrarei atraves deste Blog"}),(0,n.jsxs)(a.h1,{id:"indica\xE7\xF5es",children:[(0,n.jsx)(a.a,{href:"#indica\xE7\xF5es","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Indica\xE7\xF5es"]}),(0,n.jsx)(a.p,{children:(0,n.jsx)(a.a,{href:"https://angularjs.org/",children:"Documenta\xE7\xE3o Angularjs"})}),(0,n.jsxs)(a.h1,{id:"diretivas",children:[(0,n.jsx)(a.a,{href:"#diretivas","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"Diretivas"]}),(0,n.jsxs)(a.p,{children:["Basicamente s\xE3o extens\xF5es da linguagem de ",(0,n.jsx)(a.strong,{children:"HTML"})," que permitem a implanta\xE7\xE3o de novos comportamentos de forma declarativa. Angular cont\xE9m todos os registros de diretivas atras de procurar se existe alguma para implementar seus comportamentos"]}),(0,n.jsxs)(a.h2,{id:"ng-app",children:[(0,n.jsx)(a.a,{href:"#ng-app","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"ng-app"]}),(0,n.jsx)(a.ul,{children:(0,n.jsx)(a.li,{})}),(0,n.jsx)(a.pre,{className:"language-html",children:(0,n.jsxs)(a.code,{className:"language-html code-highlight",children:[(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token doctype",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"ng-app"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"litaTelefonica",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"lang"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"en",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"head"]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"charset"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"viewport",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"content"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"title"]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),"ng-app",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"src"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"angular.js",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token script"}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"script"]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsx)(a.span,{className:"token language-javascript",children:` `})})]}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsxs)(a.span,{className:"token language-javascript",children:[" angular",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access function method",children:"module"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token string",children:'"listaTelefone"'}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"["}),(0,n.jsx)(a.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:";"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsxs)(a.span,{className:"token language-javascript",children:[" angular",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access function method",children:"module"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token string",children:'"listaTelefonica"'}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access function method",children:"controller"}),(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token string",children:'"listaTelefonicaCtrl"'}),(0,n.jsx)(a.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(a.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"("}),(0,n.jsx)(a.span,{className:"token parameter",children:"$scope"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(a.span,{className:"token punctuation",children:"{"}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsxs)(a.span,{className:"token language-javascript",children:[" $scope",(0,n.jsx)(a.span,{className:"token punctuation",children:"."}),(0,n.jsx)(a.span,{className:"token property-access",children:"app"})," ",(0,n.jsx)(a.span,{className:"token operator",children:"="})," ",(0,n.jsx)(a.span,{className:"token string",children:'"Lista Telefonica"'}),` `]})})}),(0,n.jsx)(a.span,{className:"code-line",children:(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsxs)(a.span,{className:"token language-javascript",children:[" ",(0,n.jsx)(a.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(a.span,{className:"token punctuation",children:")"}),` `]})})}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsx)(a.span,{className:"token script",children:(0,n.jsx)(a.span,{className:"token language-javascript",children:" "})}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"body"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"ng-controller"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"listaTelefonicaCtrl",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:"<"}),"h4"]})," ",(0,n.jsx)(a.span,{className:"token attr-name",children:"ng-bind"}),(0,n.jsxs)(a.span,{className:"token attr-value",children:[(0,n.jsx)(a.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(a.span,{className:"token punctuation",children:'"'}),"app",(0,n.jsx)(a.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(a.span,{className:"token punctuation",children:">"})]}),(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(a.span,{className:"code-line",children:` {{app}} `}),(0,n.jsxs)(a.span,{className:"code-line",children:[" ",(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(a.span,{className:"code-line",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsxs)(a.span,{className:"token tag",children:[(0,n.jsx)(a.span,{className:"token punctuation",children:""})]}),` `]})]})}),(0,n.jsxs)(a.h1,{id:"ng-repeat",children:[(0,n.jsx)(a.a,{href:"#ng-repeat","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(a.span,{className:"icon icon-link"})}),"ng-repeat"]}),(0,n.jsx)(a.p,{children:"Permite a itera\xE7\xE3o sobre listas e objetos"})]})}function b(e={}){let{wrapper:a}=e.components||{};return a?(0,n.jsx)(a,Object.assign({},e,{children:(0,n.jsx)(p,e)})):p(e)}var x=b;return f(y);})(); ;return Component;

Under Construction 🚧