Muitas pessoas hoje me perguntam porque usar angularjs, como
aprender a usar uma framework baseada em client side e javascript?
Hoje vou apresentar o que angularjs tem como usar para
iniciantes, e alguns cursos gratuitos.
Cursos gratuitos
- http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
- https://quizzpot.com/courses/introduccion-a-angular-js
- https://docs.angularjs.org/guide/introduction
E o AngularJS, quero conhece-lo.!
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Agora vem o grande feito do AngularJS.
O acesso a todo o DOM do HTML e usar o binding das diretivas
do AngularJS.
As principais:
O ng-app que da acesso ao módulo que você criou para sua
aplicação.
O ng-model que cria uma instância ou variável para acessar o
valor do input, entre outras tags html.
O ng-controller que da acesso ao controller criado da
controller do AngularJS.
Exemplo de código:
- Criando um módulo
var myApp =
angular.module('myApp');
<body ng-app="myApp">
<div ui-view></div>
</body>
O método module cria um módulo para sua aplicação, ele te da
acesso ao universo do DOM do HTML, para manipulação e uso entre sua camada
view.
A criação de uma controller para manipular os dados e
criação de métodos de acesso, segue exemplo:
myApp.controller('loginController',
['$scope', 'loginService', '$state',
function($scope, loginService, $state){
/*
Method
when authetications for user approved
*/
$scope.loginAcess
= function(email, pass){
$state.go("exemplo");
};
}]);
A chamada do método e declaração da controller:
<form
ng-controller="loginController">
E a
chamada:
<input
type="button" value="Entrar" class="button
button-positive" ng-click="loginAcess(email,pass)">
Mas como consigo ter acesso aos valores digitados?
Segue a resposta:
<div class="margin">
<input type="email" required placeholder="Email"
min="20" maxlength="100" id="email"
ng-model="email">
</div>
<div
class="margin">
<input type="password"
required placeholder="Senha" min="6"
maxlength="12" id="pass" ng-model="pass">
</div>
Lembre-se que o ng-model eu crio uma variável de chamada
para aquele input e com isso consigo manipular os dados.
Essa diretivas listadas, são as básicas, temos mais
diretivas de uso, vou listar mas não vou detalhar, tem na documentação da API a
descrição e ensinando como usar. Site: https://docs.angularjs.org/guide/introduction
- ng-bind
- ng-class
- ng-click
-
ng-animate
- ng-view
- ng-repeat
Entre outras...
E porque usar?
Hoje vejo o motivo de usar o AngularJS pois facilita o uso e
manipulação do DOM do HTML. Facilita e separa as camadas para que camada
frontend seja frontend e backend fica totalmente backend. E não renderiza no
servidor fica totalmente client side.
