HyperText Markup Language
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header></header> <nav></nav> <main> <section> <article></article> </section> <aside> </aside> </main> </body> </html>
Permite a representação de dados HTML de forma mais semântica.
<div> <div>07/11/2015</div> <div>MeetUP DevParaná</div> <div> <span>FCV</span> <div> <span>Avenida Horácio Raccanello Filho, 5950</span> <span>Maringá</span> <span>Paraná</span> </div> </div> </div>
<div itemscope itemtype="http://schema.org/Event"> <div itemprop="startDate" content="2015-11-07T14:00">07/11/2015 14:00</div> <div itemprop="name">MeetUP DevParaná</div> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">FCV</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">Avenida Horácio Raccanello Filho, 5950</span> <span itemprop="addressLocality">Maringá</span> <span itemprop="addressRegion">Paraná</span> </div> </div> </div>
HTML aprimorado para aplicativos da web!
HTML é ótimo para declarar documentos estáticos, mas vacila quando tentamos usá-lo para declarar visualizações dinâmicas em aplicações web. AngularJS permite estender elementos HTML para a sua aplicação. O resultado é expressivo, legível e rápido para se desenvolver.
Não fui eu quem disse.
Aplicações inteiramente contidas no browser que não precisam fazer requisições de novas páginas no servidor.
Criação de módulos reutilizáveis ficou fácil.
Por consequência disso, atualmente com uma busca no NPM por angular retornam em 4.323 resultados e no bower 6.043.
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> </head> <body> <div> <label>Nome:</label> <input type="text" ng-model="seuNome" placeholder="Seu nome"> <hr> <h1>Olá {{seuNome}}!</h1> </div> </body> </html>
<div ng-controller="UsuarioCtrl as ctrl"> <form ng-submit="ctrl.submit()" name="usuarioForm" novalidate> <div> <label>Usuário<label> <input type="text" name="usuario" ng-model="ctrl.usuario" ng-minlength="5" ng-maxlength="10" required> <div ng-show="usuarioForm.$submitted || usuarioForm.usuario.$touched"> <div ng-show="usuarioForm.usuario.$error.required">Preencha seu nome.</div> <div ng-show="usuarioForm.usuario.$error.minlength">Deve ter mais de 5 caracteres.</div> <div ng-show="usuarioForm.usuario.$error.maxlength">Deve ter menos de 10 caracteres.</div> </div> <div> <div> <button type="submit" ng-disabled="usuarioForm.$invalid">Salvar</button> </div> </form> </div>
Como o AngularJS lida com manipulação do DOM e renderiza UI/Componentes reutilizáveis.
Desde trechos HTML simples até componentes complexos com comportamentos específicos definidos pelo desenvolvedor.
(function() { 'use strict'; angular .module('gsTable', []); })();
(function() { 'use strict'; angular .module('gsTable') .directive('gsTable', tableDirective); function tableDirective() { var directive = { link: link, templateUrl: 'components/table/templates/table.html', restrict: 'EA' }; return directive; function link(scope, element, attrs) { if (!attrs.columns) throw 'Columns não informadas.'; scope.columns = attrs.columns.split(','); } } })();
<table> <thead> <tr> <th ng-if="columns" ng-repeat="colum in columns" ng-bind="colum"></th> </tr> </thead> <tbody> <tr ng-if="content.length > 0" ng-repeat="rows in content"> <td ng-repeat="value in rows" ng-bind="value"></td> </tr> <tr ng-if="content.length == 0"> <td cols="{{columns.length}}">Nenhum registro</td> </tr> </tbody> </table>
(function() { 'use strict'; angular .module('app', ['gsTable']); })();
(function() { angular.module('app') .controller('MainCtrl', MainCtrl); function MainCtrl($scope, $http) { $http.get('data.json').then(function(response) { $scope.content = response.data.content; }, function(error) { console.error(error); }); } })();
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Mais poder ao HTML com AngularJS</title> <script src="public/lib/angular/angular.min.js"></script> <script src="components/table/module.js"></script> <script src="components/table/directive/table.js"></script> <script src="app.js"></script> <script src="controller.js"></script> </head> <body> <main ng-controller="MainCtrl as ctrl"> <gs-table></gs-table> </main> </body> </html>
O HTML (em parceria com JavaScript) está ficando poderoso para criação de aplicações fazendo uso de componentes reutilizáveis.
Usem e escrevam seus custom elements! : )