Your SlideShare is downloading. ×
CriandoComponentes                        com          AngularJSSão exatamente 02:40 em Recife-PE... =DBom à ideia desse t...
1 – Preparando o HTML<html ng-app="EstudoAngular">… Incluir JQuery, JQueryUI, AngularJS e CSS do Bootstrap<div ng-controll...
2 – Criando o JavaScriptangular.module(componentes,[]).directive("windowModal",function(){    return {       restrict: "E"...
Upcoming SlideShare
Loading in...5
×

Criando componentes com AngularJS

1,297

Published on

Criando componentes com AngularJS

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,297
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Criando componentes com AngularJS"

  1. 1. CriandoComponentes com AngularJSSão exatamente 02:40 em Recife-PE... =DBom à ideia desse tutorial não é explicar como funciona o AngularJS esim como criar componentes e utiliza-lo. Caso tenha interesse em sabercomo funciona o AngularJS temos um tutorial muito bom do FábioVedovelli.
  2. 2. 1 – Preparando o HTML<html ng-app="EstudoAngular">… Incluir JQuery, JQueryUI, AngularJS e CSS do Bootstrap<div ng-controller="GrupoProdutoController"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Grupo</th> <th>Ação</th> </tr> </thead> <tbody> <tr ng-repeat="grupo in listgrupoproduto"> <td>{{grupo.titulo}}</td> <td> <a href="javascript:void(0);" class="btn" ng-click="editar(grupo);" >[E]</a> </td> </tr> </tbody> </table> <window-modal></window-modal></div>
  3. 3. 2 – Criando o JavaScriptangular.module(componentes,[]).directive("windowModal",function(){ return { restrict: "E", template: "<div id="teste" style="display: none"></div>" }});//******************************************************************************var app = angular.module(EstudoAngular, ["componentes"]);app.controller(GrupoProdutoController, function($scope){ $scope.listgrupoproduto = [ {titulo: Grupo 01}, {titulo: Grupo 02}, {titulo: Grupo 03} ]; $scope.editar = function(grupoproduto) { $("#teste").dialog({ title: grupoproduto.titulo }); }});Obs.: Qualquer dúvida pode mandar um e-mail paradouglas.lira.web@gmail.com ou posta no grupo angularjs-br@googlegroups.com assim fortalece o conhecimento do grupo e ajudaa quem está iniciando.Valeu! =)

×