suissa/ex010-engularjs-workshop-be-mean

## ex010-engularjs-workshop-be-mean
<!doctype html>
<html data-ng-app="workshopBeMEAN">
  <head>

    <title>{{ workshop }}</title>
    <style>
      .user-avatar {
        width: 200px;
      }
      .user-label {
        font-weight: bold;
      }
    </style>
  </head>
  <body>

    <div data-ng-controller='BeerController'>
    <!-- Exibição do array de cervejas setado no BeerController -->
      {{ cervejas }}

      <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>

      <a href="" data-ng-click="predicate = 'name'; reverse=!reverse">Nome</a>

      <!-- Listamos as cervejas do nosso escopo a diretiva ng-repeat -->
      <table>
        <thead>
          <tr>
            <th data-ng-click='ordenar("name")'>Nome</th>
            <th data-ng-click='ordenar("price")'>Preço</th>
          </tr>
        </thead>
        <tbody>
          <tr data-ng-repeat='beer in cervejas | orderBy:predicate:reverse'>
            <td>{{ beer.name }}</td>
            <td>{{ beer.price }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div data-ng-controller='UserController'>
      <button data-ng-click='rodar()'>Usuario</button>
      <p data-ng-show='mostraUser'>
        <img class='user-avatar' data-ng-src="{{user.avatar_url}}" alt="">
        <br />
        <span class='user-label'>Login:</span> {{user.login}}
        <br />
        <span class='user-label'>Name:</span> {{user.name}}
        <br />
        <span class='user-label'>Company:</span> {{user.company}}
        <br />
        <span class='user-label'>Blog:</span> {{user.blog}}
        <br />
        <span class='user-label'>Email:</span> {{user.email}}
        <br />
        <span class='user-label'>Location:</span> {{user.location}}
      </p>
    </div>

    <script src="angular.min.js"></script>
    <script>
      angular.module('workshopBeMEAN', ['workshopFilters', 'workshopControllers'])

      // Criando módulod e controllers
      angular.module('workshopControllers', [])
      // Criando o EnderecoController
      .controller('UserController', ['$scope', '$http',
        function($scope, $http){

          $scope.mostraUser = false;

          // exemplo de função que irá rodar com um CLICK
          $scope.rodar = function(){
            $scope.mostraUser = !$scope.mostraUser;
          }

          // delete $http.defaults.headers.common['X-Requested-With'];

          var url = 'https://api.github.com/users/suissa';
          var method = 'GET';
          $http({
            url: url,
            method: method
          }).
          success(function(data){
            console.log('Data: ', data);
            $scope.user = data;
          }).
          error(function(err){
            console.log('Erro: ', err);
          });
        }
      ])
      .controller('BeerController', ['$scope', '$http',
        function($scope, $http){

          $scope.reverse = true;
          $scope.predicate = 'name';

          $scope.ordenar = function(predicado){
            $scope.reverse = !$scope.reverse;
            $scope.predicate = predicado;
          }
          var cerveja1 = {name: 'kaiser', price: 2};
          var cerveja2 = {name: 'skol', price: 3};
          var cerveja3 = {name: 'glacial', price: 4};
          var cerveja4 = {name: 'polar', price: 6};

          // ADICIONANDO AS CERVEJAS NO SCOPE DO CONTROLLER
          $scope.cervejas = [cerveja1, cerveja2, cerveja3, cerveja4];

      }]);

      angular.module('workshopFilters', [])
        .filter('reverseName', function () {
          return function (text) {
            if(text)
              return text.split("").reverse().join("");
          };
        })
        .filter('truncate', function () {
          return function (text, length, end) {
            if (isNaN(length))
                length = 10;
            if (end === undefined)
                end = "...";
            if (text.length <= length || text.length - end.length <= length) {
                return text;
            }
            else {
                return String(text).substring(0, length-end.length) + end;
            }
          };
      });
    </script>
  </body>
</html>
	<!doctype html>
	<html data-ng-app="workshopBeMEAN">
	<head>

	<title>{{ workshop }}</title>
	<style>
	.user-avatar {
	width: 200px;
	}
	.user-label {
	font-weight: bold;
	}
	</style>
	</head>
	<body>

	<div data-ng-controller='BeerController'>
	<!-- Exibição do array de cervejas setado no BeerController -->
	{{ cervejas }}

	<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>

	<a href="" data-ng-click="predicate = 'name'; reverse=!reverse">Nome</a>

	<!-- Listamos as cervejas do nosso escopo a diretiva ng-repeat -->
	<table>
	<thead>
	<tr>
	<th data-ng-click='ordenar("name")'>Nome</th>
	<th data-ng-click='ordenar("price")'>Preço</th>
	</tr>
	</thead>
	<tbody>
	<tr data-ng-repeat='beer in cervejas \| orderBy:predicate:reverse'>
	<td>{{ beer.name }}</td>
	<td>{{ beer.price }}</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div data-ng-controller='UserController'>
	<button data-ng-click='rodar()'>Usuario</button>
	<p data-ng-show='mostraUser'>
	<img class='user-avatar' data-ng-src="{{user.avatar_url}}" alt="">
	<br />
	<span class='user-label'>Login:</span> {{user.login}}
	<br />
	<span class='user-label'>Name:</span> {{user.name}}
	<br />
	<span class='user-label'>Company:</span> {{user.company}}
	<br />
	<span class='user-label'>Blog:</span> {{user.blog}}
	<br />
	<span class='user-label'>Email:</span> {{user.email}}
	<br />
	<span class='user-label'>Location:</span> {{user.location}}
	</p>
	</div>

	<script src="angular.min.js"></script>
	<script>
	angular.module('workshopBeMEAN', ['workshopFilters', 'workshopControllers'])

	// Criando módulod e controllers
	angular.module('workshopControllers', [])
	// Criando o EnderecoController
	.controller('UserController', ['$scope', '$http',
	function($scope, $http){

	$scope.mostraUser = false;

	// exemplo de função que irá rodar com um CLICK
	$scope.rodar = function(){
	$scope.mostraUser = !$scope.mostraUser;
	}

	// delete $http.defaults.headers.common['X-Requested-With'];

	var url = 'https://api.github.com/users/suissa';
	var method = 'GET';
	$http({
	url: url,
	method: method
	}).
	success(function(data){
	console.log('Data: ', data);
	$scope.user = data;
	}).
	error(function(err){
	console.log('Erro: ', err);
	});
	}
	])
	.controller('BeerController', ['$scope', '$http',
	function($scope, $http){

	$scope.reverse = true;
	$scope.predicate = 'name';

	$scope.ordenar = function(predicado){
	$scope.reverse = !$scope.reverse;
	$scope.predicate = predicado;
	}
	var cerveja1 = {name: 'kaiser', price: 2};
	var cerveja2 = {name: 'skol', price: 3};
	var cerveja3 = {name: 'glacial', price: 4};
	var cerveja4 = {name: 'polar', price: 6};

	// ADICIONANDO AS CERVEJAS NO SCOPE DO CONTROLLER
	$scope.cervejas = [cerveja1, cerveja2, cerveja3, cerveja4];

	}]);

	angular.module('workshopFilters', [])
	.filter('reverseName', function () {
	return function (text) {
	if(text)
	return text.split("").reverse().join("");
	};
	})
	.filter('truncate', function () {
	return function (text, length, end) {
	if (isNaN(length))
	length = 10;
	if (end === undefined)
	end = "...";
	if (text.length <= length \|\| text.length - end.length <= length) {
	return text;
	}
	else {
	return String(text).substring(0, length-end.length) + end;
	}
	};
	});
	</script>
	</body>
	</html>