• Skip to content
  • Skip to primary sidebar

Developers Tips & Tricks

You are here: Home / Angular JS / Servicios en Angular

Servicios en Angular

19 julio, 2015 by MPezzolano

Ejemplo de servicios, agrega la palabra clave this, pero muy parecido el funcionamiento a las factorias que están en el ejemplo anterior.

Dos archivos app.js e index.html

app.js

var app = angular.module(“app”, []);

app.service(‘ServiceUsers’, function()
{
this.usuarios = function()
{
return [
{
id : 0,
nombre : “Marcelo”,
edad : “33 años”
},
{
id : 1,
nombre : “Pablo”,
edad : “24 años”
},
{
id : 2,
nombre : “Juan”,
edad : “28 años”
},
{
id : 3,
nombre : “test”,
edad : “18 años”
},
{
id : 4,
nombre : “test 2”,
edad : “45 años”
}
]
}
});

app.controller(‘servicioController’, [‘$scope’,’ServiceUsers’, function($scope, ServiceUsers)
{
$scope.usuarios = ServiceUsers.usuarios();
}]);

 

Index.html

<!DOCTYPE html>
<html lang=”es” ng-app=”app”>
<head>
<meta charset=”utf-8″>
<title>Servicios en Angular</title>
<link rel=”stylesheet” type=”text/css” href=”bower_components/bootstrap/dist/css/bootstrap.css” />
<script type=”text/javascript” src=”bower_components/angular/angular.js”></script>
<script type=”text/javascript” src=”bower_components/angular-route/angular-route.js”></script>
<script type=”text/javascript” src=”app.js”></script>
</head>
<body>
<div class=”container”>
<div class=”row” ng-controller=”servicioController”>
<h1 class=”heading text-center”>Información del servicio</h1>
<ul class=”panel panel-info”>
<li ng-repeat=”usuario in usuarios”>
<p>Id: {{ usuario.id }} Nombre: {{ usuario.nombre }} Edad: {{ usuario.edad }}</p>
</li>
</ul>
</div>
</div>
</body>
</html>

 

Filed Under: Angular JS

Primary Sidebar

Categorías

  • Angular JS (10)
  • BackBone JS (6)
  • Ember JS (2)
  • Express JS (4)
  • EXTJS (1)
  • General (7)
  • GIT (3)
  • Grunt JS (2)
  • HTML5 (8)
  • JAVA (5)
  • JavaScript (14)
  • JQUERY (15)
  • JSON (1)
  • JSP (1)
  • Knockout JS (2)
  • LARAVEL (13)
  • Linux (2)
  • Mobile Angular UI (1)
  • Modulus.io (1)
  • MongoDB (5)
  • MySQL (3)
  • NodeJS (11)
  • PHP (1)
  • Polymer (3)
  • PostgreSQL (1)
  • Prism.JS (1)
  • PYTHON (10)
  • QOOXDOO (1)
  • React JS (7)
  • Redis (2)
  • Sin categoría (6)
  • SQL (1)
  • TWIG (4)
  • UnderScore (1)
  • Web Services. (2)
  • Wordpress (1)

Cloud Tags

Angular JS BackBone JS Ember JS Express JS EXTJS General GIT Grunt JS HTML5 JAVA JavaScript JQUERY JSON JSP Knockout JS LARAVEL Linux Mobile Angular UI Modulus.io MongoDB MySQL NodeJS PHP Polymer PostgreSQL Prism.JS PYTHON QOOXDOO React JS Redis Sin categoría SQL TWIG UnderScore Web Services. Wordpress

Copyright © 2023 · Genesis Sample Theme on Genesis Framework · WordPress · Log in