Escolar Documentos
Profissional Documentos
Cultura Documentos
Ferramentas
IDE
Bower
Grunt
Node (NPM)
Outras Bibliotecas Auxiliares
Eclipse
https://jsfiddle.net/
+
Curso Front-End (AngularJS + Bootstrap)
JavaScript
O que é?
JavaScript é uma linguagem de programação interpretada.
Foi originalmente implementada como parte dos
navegadores web para que scripts pudessem ser
executados do lado do cliente e interagissem com o
usuário sem a necessidade deste script passar pelo
servidor, controlando o navegador, realizando
comunicação assíncrona e alterando o conteúdo do
documento exibido.
Chamada da função e
envia da saída para o console
Abra o arquivo index.html com o Chrome
Curso Front-End (AngularJS + Bootstrap) 9
JavaScript
Ferramenta de Desenvolvedores
Em todos os navegadores mais modernos existe uma
ferramenta nativa que oferece algumas funcionalidades
que permitem ajudar no desenvolvimento
Para acessar a ferramenta de desenvolvimento do
Chromium aperte a tecla F12
No caso do exemplo anterior da raíz quadrada a aba
Console ficará da seguinte maneira
Saída da linha:
console.log(square(2));
<script type="text/javascript">
var square = function (number) {
return number * number;
}
console.log(square(2));
</script>
function operations(number1) {
function sum(number2) {
return number1 + number2;
}
return sum;
}
var func_sum = operations(3);
var result1 = func_sum(5);
console.log(result1);
var result2 = operations(3)(5);
console.log(result2);
</script>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
Curso Front-End (AngularJS + Bootstrap) 12
JavaScript
Debug
Com a Ferramenta do Desenvolvedor aberta (F12) acesse
a aba Source
Arquivo que
Iremos manipular
Código do Arquivo
Controles de
depuração
Breakpoint
Situação das
variáveis
console.log(mycar.make);
Mostra novamente o
fabricante do meu carro
Especificação JSON: http://json.org/
Curso Front-End (AngularJS + Bootstrap) 15
JavaScript
Hierarquia do objeto JavaScript
function Exemplo() {
this.metodo = function() {
console.log(objeto.propriedade),
console.log(objeto.metodo());
try {
throw "myException";
} catch (e) {
console.log(e);
} finally {
console.log("Always execute");
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Introdução
O que é?
O AngularJS é um framework baseado em MVC (Models
Views Controls). O propósito do AngularJS é tirar a View e
até o Controller do servidor, sendo assim você trabalha
somente com arquivos .html estáticos, e quando precisar
de dados é realizado uma requisição via AJAX, assim todo
o processo é processado via Client, dando a possibilidade
de você criar HTML dinâmico, com isso você ganha muita
velocidade em sua aplicação, sem depender do servidor
para criar seu HTML.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body>
<h1>Meu Primeiro App AngularJS </h1> Carrega o arquivo principal
</body> do framework
</html>
Abra o arquivo index.html com o Chrome
Teste de Expressão
...
</div>
<p>1 + 2 = {{ 1 + 2 }}</p>
</body>
...
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Directives
Diretivas
São usadas para extender as marcações do HTML
https://code.angularjs.org/1.4.9/docs/api/ng/directive
Curso Front-End (AngularJS + Bootstrap) 32
AngularJS // Directives
Diretiva ng-repeat
Esta diretiva repete elementos HTML para cada item
dentro de uma coleção
<div ng-app
ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
Uma diretiva pode assumir algumas formas:
Como atributo: <a custom-button>Click me</a>
Como elemento: <custom-button>Click me</custom-button>
Como classe CSS: <a class="custom-button">Click me</a>
Como comentário: <!-- directive: custom-button -->
<script>
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
</script>
http://www.sitepoint.com/practical-guide-angularjs-directives/
<script>
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Teste de nomenclatura de diretivas';
}]);
</script>
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Controllers
Para que servem
Inicializar um escopo (variável $scope)
Adicionar comportamentos ao escopo (variável $scope)
Para que NÃO serve
Manipular a árvore DOM
Formatar campos
Filtrar saídas
Compartilhar código ou estados entre controllers
Gerenciar o ciclo de vida de outros componentes
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
app.controller('Controller',['$scope','service', function($scope,service) {
...
}]);
...
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
};
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeno';
};
}]);
</script>
fullName: function() {
var studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Services
O que é
Os Services são funções javascript e são responsáveis para
fazer apenas a tarefas específicas. Isso os torna uma entidade
individual que é de fácil manutenção e testável
Os serviços são normalmente injetado usando o mecanismo
de injeção de dependência do AngularJS
Por padrão o AngularJS fornece diversos serviços embutidos
como $http, $route, $window, $location, etc
Service: trabalha muito parecido com o Factory, a direfença é que o
Service nos da como retorno uma uma instancia dele mesmo ao invés
de retornar um novo objeto como em Factory, em outras palavras é
como se estivese-mos utilizando um new ServiceName()
Provider: são muito parecidos com Services e Factories, mas são
completamente configurável, o que pode tornar eles um pouco mais
complexos. Você só precisa retornar seu serviço em uma função
chamada $get que nos dá a API publica daquele serviço, em outras
palavras o que vier dentro do nosso retorno em $get funciona
exatamente como um factory por exemplo.
Curso Front-End (AngularJS + Bootstrap) 51
AngularJS // Services
Factory, Service e Provider
Factory:
function removeTodo(todo) {
// Sua implementação
}
return {
Retorna o objeto que
todoList: todoList,
addTodo: addTodo, contém as funções para
removeTodo: removeTodo serem usadas posteriormente
};
});
app.service('todoListService', function() {
this.todoList = [];
});
return {
todoList: todoList,
Retorna o objeto que
addTodo: addTodo, contém as funções para
removeTodo: removeTodo serem usadas posteriormente
};
}
};
});
Curso Front-End (AngularJS + Bootstrap) 54
AngularJS // Services
Factory, Service e Provider
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) { return a * b }
return factory;
});
mainApp.service('CalcService', function(MathService) {
this.square = function(a) { return MathService.multiply(a, a); }
});
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() { $scope.result = CalcService.square($scope.number); }
});
</script>
$scope.value = appInfoValue.version;
$scope.const = appInfoValue.version;
}]);
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Views
O que é?
Até agora vimos diversas Views, pois elas nada mais são que
estruturas HTML que podem ou não ter Diretivas
customizadas e comportamentos especificos
As Views possuem diversos comportamentos que ajudam na
criação dos aplicativos, como:
Templates
Rotas
Filters
Forms
Entre outros
</div>
</div>
<div ng-app="">
<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button><br/>
<script>
angular.module("myapp", [])
.controller("studentController", function($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
}
$scope.reset();
});
</script>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) { $scope.master = angular.copy(user); };
$scope.reset = function() { $scope.user = angular.copy($scope.master); };
$scope.reset();
}]);
</script>
.simple-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>
E nos campos de nome e e-mail adione o atributo required:
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><br />
Altere o botão de reset para o seguinte código:
<input type="button" ng-click="reset(form)" value="Reset" />
Altere a função de reset para o seguinte código:
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};
Curso Front-End (AngularJS + Bootstrap) 73
AngularJS // Views
Forms – Validações (Cont.)
Adicione o atributo name na tag form da seguinte maneira:
<form name="form" novalidate class="simple-form">
<script>
angular.module('customTriggerExample', [])
.controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);
</script>
<script>
angular.module('debounceExample', [])
.controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);
</script>
Outro exemplo de utilização seria:
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
<script>
var INTEGER_REGEXP = /^\-?\d+$/;
var app = angular.module('form-example1', []).directive('integer', function() { return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.integer = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue))
return true;
if (INTEGER_REGEXP.test(viewValue))
return true;
return false;
}; } }; });
</script>
+
Curso Front-End (AngularJS + Bootstrap)
AngularJS // Requisições AJAX
O que é?
O AngularJS prove um controle de requisições asincronas via
HTTP(s) que funciona como um serviço para ler dados a partir
do servidor
O Angularjs precisa de um retorno com dados em formato
JSON
Segue um exemplo:
...
$http.get(url).success( function(response) {
$scope.students = response;
});
...
<script>
angular.module("myapp", [])
.controller("ajaxController", ['$scope', '$http', function($scope, $http) {
$http({
method: 'GET',
url: 'http://10.200.232.59/rest-data/data.php'
}).then(function successCallback(response) {
$scope.retorno = response;
console.log(response.data);
}, function errorCallback(response) {
$scope.retorno = response;
console.log(response.data);
});
}]);
</script>
+
Curso Front-End (AngularJS + Bootstrap)
Armazenamento Local
O que é?
Um recurso do HTML5 permite salvar dados localmente no
navegador utilizando:
Local Storage: armazena dados sem data de expiração.
Armazenamento chave-valor, contudo no campo valor podemos
armazenar até 5MB de dados, podendo ser uma estutura JSON
http://www.w3.org/TR/webstorage/
Session Storage: armazena dados para uma sessão (os dados são
perdidos quando a aba do navegador é fechada)
http://www.w3.org/TR/webstorage/
Cookie: armazena pequena quantidade de dados com data de
expiração
Web SQL Database: também é possível armazenar localmente
utilizando uma base de dados SQL
http://dev.w3.org/html5/webdatabase/
<script>
var myApp = angular.module('myApp', ['LocalStorageModule']);
myApp.controller('MainCtrl', function($scope, localStorageService) {
$scope.save = function(chave, valor) {
localStorageService.set(chave, valor);
}
$scope.restore = function(chave) {
$scope.valor = localStorageService.get(chave);
}
});
</script>
+
Curso Front-End (AngularJS + Bootstrap)
Bootstrap e Responsividade
O que é?
Bootstrap: é o mais popular framework HTML, CSS, e JS para
desenvolvimento de projetos responsivo e focado para
dispositivos móveis na web.
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputP" class="form-control" placeholder="Password">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" placeholder="Password">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="button" class="btn btn-default">Submit</button>
</form>
+
Curso Front-End (AngularJS + Bootstrap)
Projeto Final
Requisitos
Layout Responsivo
HEADER
Acessar a API REST
Funcionalidades
Listar Bookmarks
Adicionar Bookmark
Alterar Bookmark
MENU
Excluir Bookmark Início CONTENT
Listagem
Adicionar
Jboss 7.1.1.Final
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
...
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
...
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2">
MENU
</div>
<div class="col-sm-9 col-md-10" ng-view></div>
</div>
</div>
Crie o arquivo home.html na raíz da pasta /views com o seguinte
conteúdo:
{{title}}
Adicione o arquivo home.js ao HTML do index.html:
...
<script src="scripts/app.js"></script>
Adicione
...
a seguinte linha
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
<style> .sidebar, .main { top: 75px; } </style>
</head>
...
Publique o projeto e visualise o resultado no navegador
Curso Front-End (AngularJS + Bootstrap) 132
Projeto Final
Situação Atual
Publique novamente no JBoss e visualiza no navegador
+
Curso Front-End (AngularJS + Bootstrap)