Angular js

<html>
<head>
<title>AngularJs - ToDo App</title>
</head>
<body>
</body>
</html>

Utilizando diretivas
Diretivas são extensões da linguagem HTML que nos permitem definições
de novos comportamentos de forma declarativa

ngApp
Definindo as fronteiras da aplicação

<html ng-app='todoApp'>
<head>
<meta charset='utf-8'>
<script src='js/angular.min.js'></script>
</head>
<script>
angular.module('todoApp',[]);
</script>
<body>
</body>
</html>

ngController
Vincula um elemento da View ao Controller

<head>
</head>
<script>
angular.module('todoApp').controller('mainCtrl',function($scope){
$scope.app = ‘Hello world’;
});
</script>
<body>
<div ng-controller="mainCtrl">
{{app}}
</div>
</body>
</html>

ngBind
Substitui o elemento por uma expressão

<head>
</head>
<script>
$scope.app = ‘Hello world’;
});
</script>
<body>
<span ng-bind="app"></span>
</div>
</body>
</html>

<head>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<script>
$scope.app = 'Todo App';
});
</script>
<body>
<div class="jumbotron">
{{app}}
</div>
</div>
</body>
</html>

ngRepeat
Iterando sobre os itens de uma coleção

<body>
<h3>{{app}}</h3>
<table class="table table-striped">
<tr>
<th>A fazer</th>
</tr>
<tr ng-repeat="todo in todos">
<td>{{todo.afazer}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>

ngModel
Vincula uma propriedade ao $scope

<body>
<h3>{{app}}</h3>
<tr>
<th>A fazer</th>
</tr>
</tr>
</table>
<input class="form-control" type="text" ng-model="tarefas.afazer"
placeholder="Tarefa">
</div>
</div>
</body>

ngClick
Atribui um comportamento ao evento de click

<body>
<h3>{{app}}</h3>
<tr>
<th>A fazer</th>
</tr>
</tr>
</table>
<input class="form-control" type="text" ng-model="tarefa.afazer"
<input class="btn btn-primary btn-block" ng-click="novaTarefa(tarefa)" type="button"
value="salvar">
</div>
</div>
</body>

ngDisabled
Desabilita dinamicamente um elemento

<body>
<h3>{{app}}</h3>
<tr>
<th>A fazer</th>
</tr>
</tr>
</table>
<input class="form-control" type="text" ng-
model="tarefa.afazer" placeholder="Tarefa">
<input class="btn btn-primary btn-block" ng-
disabled="!tarefa.afazer" ng-click="novaTarefa(tarefa)" type="button"
value="salvar">
</div>
</div>
</body>

ngOptions
Renderiza as opções de um select

<h3>{{app}}</h3>
<tr>
<th>A fazer</th>
<th>Dia</th>
</tr>
<td>{{todo.dia.nome}}</td>
</tr>
</table>
<input class="form-control" type="text" ng-model="tarefa.afazer"
<select class="form-control" ng-model="tarefa.dia" ng-
options="dias.nome group by dias.semana for dias in diasdasemana">
<option value="">Selecione um dia da semana </option>
</select>
value="salvar">
{{tarefa}}

<h3>{{app}}</h3>
<tr>
<th>A fazer</th>
<th>Dia</th>
</tr>
</tr>
</table>
model="tarefa.afazer" placeholder="Tarefa">
<select class="form-control" ng-model="tarefa.dia" ng-
options="dias.abrev as dias.nome group by dias.semana for dias in diasdasemana">
</select>
value="salvar">
{{tarefa}}
</div>

ngClass
Aplicando classe e estilos dinamicamente

<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
</tr>
<tr ng-class="{concluido:todo.concluida}"ng-
repeat="todo in todos">
<td> <input type="checkbox" ng-
model="todo.concluida" /> </td>
</tr>
</table>

<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
</tr>
<tr ng-
class="{concluido:todo.concluida,italico:todo.concluida}"ng-repeat="todo in
todos">
</tr>
</table>

<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
</tr>
<tr ng-class="{'concluido
italico':todo.concluida}"ng-repeat="todo in todos">
</tr>
</table>

<select class="form-control" ng-model="todo.dia" ng-
options="dias.nome group by dias.semana for dias in diasdasemana">
</select>
disabled="!todo.afazer" ng-click="novaTarefa(todo)" type="button" value="salvar">
<input class="btn btn-danger btn-block" ng-
click="excluirTarefas(todos)" type="button" value="Remover concluidos"/>
</div>

Validação de formulários
Fazendo validações de campos de
formulários

<form name="formTodos">
<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
<th>Data</th>
</tr>
</tr>
</table>
model="todo.afazer" placeholder="Tarefa">
<select class="form-control" ng-model="todo.dia"
ng-options="dias.nome group by dias.semana for dias in diasdasemana">

$valid e $invalid
Consultando a validade de um campo ou
formulário

<h3>{{app}}</h3>
É valido {{formTodos.$valid}}
<br>
É invalido {{formTodos.$invalid}}
<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
<th>Data</th>
</tr>
</tr>
</table>
model="todo.afazer" placeholder="Tarefa" ng-required="true">

<input class="form-control" name="afazer"
type="text" ng-model="todo.afazer" placeholder="Tarefa" ng-required="true">
<select class="form-control" ng-model="todo.dia"
ng-options="dias.nome group by dias.semana for dias in diasdasemana">
<option value="">Selecione um dia da semana
</option>
</select>
disabled="formTodos.afazer.$invalid" ng-click="novaTarefa(todo)" type="button"
value="salvar">

Filtros
Transforma o resultado de uma expressão,
realizando operações como formatação de datas,
conversão de moedas ordenação de Arrays

uppercase
Transforma uma string em maiúsculas

<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
</tr>
<td>{{todo.afazer |
uppercase}}</td>
</tr>
</table>
<input class="form-c

Filter
Filtra o resultado de uma expressão

model="busca" placeholder="Buscar">
<tr>
<th></th>
<th>A fazer</th>
<th>Dia</th>
<th>Data</th>
</tr>
italico':todo.concluida}"ng-repeat="todo in todos | filter:busca">
<td>{{todo.data}}</td>
</tr>
</table>

Integração com back end
$http
- get(url,config)
- post(url,data,config)
- put(url,data,config)
- delete(url,config)
- head(url,config)
- jsonp(url,config)

angular.module('todoApp').controller('mainCtrl',function($scope,$http){
$http.get('http://localhost:3412/todos').success(function(resp){
$scope.todos = resp;
console.log(resp);
}).error(function(err){
});

angular.module('todoApp').controller('mainCtrl',function($scope,$http){
$http.get('http://localhost:3412/todos').success(function(resp){
console.log(resp);
});
$scope.novaTarefa = function(todo){
$scope.todos.push(angular.copy(todo) );
delete $scope.todo;
}
$http.get('http://localhost:3412/dias').success(function(resp){
$scope.diasdasemana= resp;
console.log(resp);
});

Organizando o projeto
Specific Style

Um serviço é um “singleton”, ou seja , um
objeto único criado na inicialização da
aplicação e que está disponível para ser
injetado em outros componentes

angular.module('todoApp').factory('todosAPI',function($http){
var _getTodos = function(){
return $http.get('http://localhost:3412/todos');
}
var _saveTodo = function(todo){
http.post('http://localhost:3412/todos',todo);
}
return{
getTodos : _getTodos,
saveTodo : _saveTodo
}
});

angular.module('todoApp').controller('mainCtrl',function($scope,todosAPI){
todosAPI.getTodos().success(function(resp){
console.log(resp);
});

angular.module('todoApp').service('diassemanaAPI',function($http){
var _getDias = function(){
return $http.get('http://localhost:3412/dias');
}
this.getDias = _getDias;
});

angular.module('todoApp').controller('mainCtrl',function($scope,todosAPI,diasseman
aAPI){
todosAPI.getTodos().success(function(resp){
console.log(resp);
});
$scope.novaTarefa = function(todo){
$scope.todos.push(angular.copy(todo) );
delete $scope.todo;
}
diassemanaAPI.getDias().success(function(resp){
$scope.diasdasemana= resp;
console.log(resp);
});

angular.module('todoApp').value('config',{
baseUrl : "http://localhost:3412"
})

angular.module('todoApp').provider('serial',function(){
var tamanho = 5;
this.setTamanhoSerial = function(tam){
tamanho = tam
}
this.$get = function(){
return{
gerar : function(){
var serial="";
while(serial.length < tamanho){
serial+=
String.fromCharCode(Math.floor(Math.random() * 64) + 32);
}
return serial;
}
}
}
})

angular.module('todoApp').config(function(serialProvider){
serialProvider.setTamanhoSerial(10);
})

angular.module('todoApp').filter('etc',function(){
return function(input){
}
})

angular.module('todoApp').filter('etc',function(){
return function(input, tamanho){
if(input)
input = input.substr(0, tamanho || 3)+'...'
return input;
}
})

angular.module('todoApp').directive('todoAlert',function(){
return{
template : '<div class="todo-alerta">{{erro}}</div>'
}
})

angular.module('todoApp').directive('todoAlert',function(){
return{
templateUrl : '<div class="todo-alerta">{{erro}}</div>'
}
})

angular.module('todoApp').config(function($routeProvider){
$routeProvider.when('/',{
templateUrl : 'templates/principal.html'
}).when('/novo',{
templateUrl : 'templates/novo.html'
})
$routeProvider.otherwise({redirectTo:'/'})
});

Email : junqueira.andre33@gmail.com
Git : https://github.com/andreluisjunqueira
Twitter:@junqueiraandre1

Angular js

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Semelhante a Angular js

Semelhante a Angular js (20)

Angular js