Criado por
30498
Angular js
Descrição
Informações do módulo
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Angular
Software general que puede ser selectivamente modificado por codigo adicional por el usuario para crear software especifíco.
Directivas
Grupos de codigo que extienden las capacidades de HTML
Lista de directivas
ng-app : Indica que tiene una aplicación de angular
Ejemplo "Hola mundo" con Angular js
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Hola Mundo con Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js">
</script>
</head>
<body>
{{"Hola " + "Mundo"}}
</body>
</html>
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Controladores
Ejemplos de controladores
Archivo HTML (index.html)
"
Hola controller con Angular JS
{{"Hola " + nombre}}
"
Archivo JS (controller.js)
var app = angular.module("MyFirstApp",[]);
app.controller("FirstController", function($scope){
$scope.nombre = "Fredy Fernandez ";
});
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Módulos
Para agregar un nuevo modulo debemos llamar la librería (angular.module).
El primer parámetro que recibe es el nombre del modulo, el segundo parámetro que recibe son los módulos de los que dependen el módulo que nosotros estamos creando.
ngResource : Con este modulo podremos crear un objeto reffull que se pueda comunicar un API que REST
Por ejemplo
Archivo JS (controller.js)
angular.module("MyFirstApp",[]);
.controller("FirstController", function($scope){
$scope.nombre = "Fredy Fernandez ";
}).controller("SecondController". function($scope){
});
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Dependency Injection
EJemplo
var app = angular.module("MyFirstApp",[]);
app.controller("FirstController", function($scope){
$scope.nombre = "Fredy Fernandez ";
$scope.dateDay= "03/08/2017"
$scope.nuevoComentario = {};
$scope.comentarios = [
{
comentario: "Buen Tutorial",
username: "Fredy Fernandez",
dateDay: "03/08/2017"
},
{
comentario: "Malisimo Tutorial",
username: "Jose Carrasxo",
dateDay: "03/08/2017"
}
];
$scope.agregarComentarios = function(){
$scope.comentarios.push($scope.nuevoComentario);
$scope.nuevoComentario = {};
}
});
$scope es una Dependencia
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Archivo js (controller.js)
var app = angular.module("MyFirstApp",[]);
app.controller("FirstController",function($scope, $http){
$scope.posts = [];
$scope.newPost = {};
$http.get("http://jsonplaceholder.typicode.com/posts")
.success(function(data){
console.log(data);
$scope.posts = data;
})
.error(function(err){
});
$scope.addPost = function(){
$http.post("http://jsonplaceholder.typicode.com/posts",{
title: $scope.newPost.title,
body: $scope.newPost.body,
userId: 1
})
.success(function(data, status, headers, config){
$scope.posts.push($scope.newPost);
$scope.newPost = {};
})
.error(function(error,status, headers, config){
console.log(error);
});
}
});
Arhcivo HTML (index.html
"
Hola controller con Angular JS
Enviar Datos
{{ post.title}}
{{ post.body}}
"
Descrição
Sem etiquetas
Mostrar mais
Mostrar menos
Archivo js
angular.module("ToDoList",["LocalStorageModule"])
.controller("ToDoController", function($scope, localStorageService){
if (localStorageService.get("angular-todoList")) {
$scope.todo = localStorageService.get("angular-todoList");
}else {
$scope.todo = [];
}
$scope.$watchCollection("todo",function(newValue, oldValue){
localStorageService.set("angular-todoList",$scope.todo);
})
$scope.AddActividad = function(){
$scope.todo.push($scope.newActividad);
$scope.newActividad = {};
}
$scope.clearActividad = function(){
$scope.todo = [];
}
});
Archivo html
<!DOCTYPE html>
<html ng-app="ToDoList">
<head>
<meta charset="utf-8">
<title>Hola controller con Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script src="controller.js"></script>
<script src="angular-local-storage.min.js"></script>
</head>
<body ng-controller="ToDoController">
<ul>
<li ng-repeat="Actividad in todo">
{{Actividad.descripcion}} -
{{Actividad.fecha | date: 'short'}}
</li>
</ul>
<form ng-submit="AddActividad()">
<input type="text" ng-model="newActividad.descripcion">
<br><br>
<input type="datetime-local" ng-model="newActividad.fecha">
<br><br>
<input type="submit" value="Guardar actividad">
<button ng-click="clearActividad()">Limpiar</button>
</form>
</body>
</html>