Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

2,129 views

Published on

Criando componentes com AngularJS

  • Be the first to comment

  • Be the first to like this

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! =)

×