Web apps com AngularJS – HTML – AngularJS

View Github Repository Open presentation in a new window

guiseek

See all presentation from guiseek

Web apps com AngularJS – HTML – AngularJS

0 0

mais-poder-ao-html-com-angularjs

Slides Mais poder ao HTML com AngularJS

On Github guiseek / mais-poder-ao-html-com-angularjs

Web apps com AngularJS

Mais poder ao HTML com AngularJS

@Gui Seek

HTML

HyperText Markup Language

Tags

  • Palavras entre parênteses angulares
  • Marcação semântica
  • Hierarquia de elementos
  • Atributos e valores

Exemplo

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

Micro dados

Permite a representação de dados HTML de forma mais semântica.

Exemplo sem 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>

Exemplo com semântica

<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>

Web Components

  • Templates
  • Decorators
  • Custom Elements
  • Shadow DOM
  • Imports
  • Templates Designers na view (HTML e CSS) e engenheiros na lógica e integração com backend.
  • Decorators Comportamento individual, estático ou visual, sem afetar comportamentos de outros elementos.
  • Custom Elements Nomes e scripts criados pelo desenvolvedor.
  • Shadow DOM Parte do código encapsulada e escondida pelo browser
  • Imports Custom elements empacotados e lidos como um recurso.

AngularJS

HTML aprimorado para aplicativos da web!

Por quê AngularJS?

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.

Frameworks MV*

Backbone.js Ember.js Knockout.js Angular.js Cappuccino JavaScript MVC Meteor Spice.js Riot.js CanJS

JavaScript The Right Way

Criado pelo Google, Angular.js é como um polyfill para o futuro do HTML.

Não fui eu quem disse.

Características do AngularJS

SPA (Single Page Applications)

Aplicações inteiramente contidas no browser que não precisam fazer requisições de novas páginas no servidor.

Características do AngularJS

  • Separação de responsabilidades
    • Controllers
    • Services
    • Factories
    • Directives
    • Providers
  • Estrutura MVC ou MVWhatever
  • Injeção de dependências (Dependency Injection)
  • Ligação de dados (Data Binding)
  • Rotas

Modularização com AngularJS

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.

Exemplo de app simples

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

Dando poder ao HTML com diretivas do AngularJS

<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>

Diretivas

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.

Criando uma diretiva

  • Modulo
  • Diretiva
  • Template

Código do modulo

(function() {
  'use strict';

  angular
    .module('gsTable', []);
})();

Código da diretiva

(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(',');
    }
  }
})();

Código do template

<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>

Usando a diretiva

  • App module
  • Main controller
  • Index html

Código do modulo

(function() {
  'use strict';

  angular
    .module('app', ['gsTable']);

})();

Código do controller

(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);
    });
  }
})();

Código do html

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

Isso é possível somente com AngularJS?

Não!

  • Web Components http://webcomponents.org/
  • Polymer https://www.polymer-project.org/1.0/

Ok, ok, mas quem está usando?

Google

Google map component

Conclusão

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

Valeu!

- Meu GitHub - Sobre minha carreira

Web apps com AngularJS Mais poder ao HTML com AngularJS @Gui Seek