1) O que é AngularJS?
AngularJS é um framework web JavaScript que foi desenvolvido pela Google no ano de 2009. Ele é voltado para o desenvolvimento de aplicações web dinâmicas e single-page, utilizando a arquitetura MVC (Model View Controller). Ele ajuda no desenvolvimento ágil das aplicações, com utilização mais fácil de HTML, otimização de desempenho e interface do usuário. O AngularJS usa injeção de dependência contrariamente a frameworks JavaScript que utilizam eventos como forma de comunicação entre objetos.
2) Como instalar o AngularJS no Symfony?
Para instalar o AngularJS em seu projeto Symfony, você vai precisar baixar o AngularJS e armazená-lo em um diretório no seu projeto. Você pode baixar o arquivo do site oficial do AngularJS (https://angularjs.org/), que estará disponível na forma de um arquivo .js. Depois de baixar, coloque-o no diretório /web/js/ do seu projeto Symfony. Depois disso, basta importar o arquivo em seu template:
<script src="/js/angular.min.js"></script>3) Como usar o AngularJS dentro de um template do Symfony?
Para inserir o AngularJS dentro do seu template do Symfony, você deve incluir a diretiva ng-app no HTML. Esta diretiva informa ao AngularJS que este é o escopo do aplicativo:
<html ng-app="meuApp"></html>Neste exemplo, o angular está sendo utilizado na tag HTML e uma referência à variável “meuApp” foi incluída.
4) Como utilizar o AngularJS no Controller do Symfony?
O Controller é uma classe que representa a camada intermediária da aplicação. Ele trata as solicitações do usuário e pode atualizar a view. O Symfony suporta dois padrões de projeto MVC, o “Front Controller” e o padrão “Page Controller”. O padrão “Front Controller” concentra toda a lógica de controle em uma única classe, enquanto que o padrão “Page Controller” utiliza uma classe de controlador para cada ação. O AngularJS requer o padrão “Front Controller”. Para usar o AngularJS em um Controller, você deve criar uma nova classe e chamá-la dentro de uma ação:
class MeuController extends Controller {
public function minhaAcaoAction(){
return $this->render('meu-template.html.twig');
}
}
5) Como utilizar o AngularJS no Twig?
O Twig é o sistema de templates padrão do Symfony. Ele permite a criação de templates mais robustos e organizados. Para usar o AngularJS em um template Twig, você deve incluir o código AngularJS na tag “head”:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>Em seguida, você deve incluir “ng-app” no HTML:
<html ng-app="meuApp"></html>6) Como fazer um binding com AngularJS?
Binding é a forma de atualizar as informações dentro do template de acordo com o modelo escrito em JavaScript. O AngularJS permite o uso de duas direções para o Binding:
{{ variavelDoModelo }}Este exemplo atualizará o template de acordo com o modelo em JavaScript somente na página atual. Para fazer a atualização do modelo em JavaScript de acordo com o Template, utiliza-se:
<input type="text" ng-model="nome" />Sempre que o valor for alterado no modelo em JavaScript, o valor será atualizado no template.
7) Como criar um Controller no AngularJS?
Para criar um Controller no AngularJS, você deve iniciar criando um módulo:
var meuApp = angular.module('meuApp',[]);Este exemplo define um módulo chamado meuApp, que está vazio e sem dependências. Em seguida, crie um controller:
meuApp.controller('MeuController', function($scope) {
$scope.nome = 'Exemplo';
});
8) Como fazer um POST e GET com AngularJS?
Para fazer um POST ou um GET usando AngularJS, você deve usar o serviço $http:
angular.module('meuApp').controller('MeuController', function($scope, $http) {
$http.get('/api/users').then(function(response) {
$scope.usuarios = response.data;
});
$scope.adicionarUsuario = function(novoUsuario){
$http.post('/api/users',novoUsuario).then(function(response) {
$scope.usuarios.push(response.data);
});
}
});
9) Como utilizar as diretivas do AngularJS?
As Directivas são atributos em HTML que utilizam JavaScript para adicionar novas funcionalidades à tag existente ou criar novas tags personalizadas com a tag existente. Os exemplos são:
<div ng-show="usuarioLogado">Seu nome é: {{ nome }}.</div>Este exemplo mostra o valor dentro da tag div se a condição for verdadeira.
<img ng-src="{{logo}}">Este exemplo define as propriedades src da imagem para sua logo.
10) Como criar um simples formulário usando AngularJS?
Para criar um formulário em AngularJS, você deve usar a tag “form” e definir o método “ng-submit”:
<form ng-submit="addUser(user)">
<p>Name:<br>
<input type="text" ng-model="user.name">
</p>
<p>Age:<br>
<input type="text" ng-model="user.age">
</p>
<p><button type="submit">Add</button></p>
</form>
Neste exemplo, “ng-submit” será chamado quando o formulário for submetido. O método addUser é chamado com o objeto user de entrada.