Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Criando componentes com AngularJS
1. Criando
Componentes
com
AngularJS
São exatamente 02:40 em Recife-PE... =D
Bom à ideia desse tutorial não é explicar como funciona o AngularJS e
sim como criar componentes e utiliza-lo. Caso tenha interesse em saber
como funciona o AngularJS temos um tutorial muito bom do Fábio
Vedovelli.
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. 2 – Criando o JavaScript
angular.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 para
douglas.lira.web@gmail.com ou posta no grupo angularjs-
br@googlegroups.com assim fortalece o conhecimento do grupo e ajuda
a quem está iniciando.
Valeu! =)