Lo primero de todo es preguntarnos, ¿qué es AngularJS? AngularJS es un librería de Javascript con la que podrás desarrollar páginas web con poco esfuerzo y con pocas líneas de código. Una de las características más importantes de Angular son las dos vías de unión con las que contamos en la librería, que ninguna otra librería de Javascript tiene. ¿Qué significa que tiene dos vías de unión? Las dos vías de unión significa que cuando cambias cualquier valor de cualquier propiedad que esté asociada a un elemento HTML, este también cambiará por lo que no necesitarás escribir más código.
AngularJS cuenta con un modelo de patrón MVVM. Y bien, ¿que es un patrón MVVM? El patrón MVVM es el parón Modelo Vista Vista-Modelo, que significa que en este patrón de diseño se separan los datos de la aplicación, la interfaz de usuario pero en vez de controlar manualmente los cambios en la vista o en los datos, estos se actualizan directamente cuando sucede un cambio en ellos, por ejemplo si la vista actualiza un dato que está presentando se actualiza el modelo automáticamente y viceversa.
Si no utilizas AngularJs u otra librería que cuente con la misma funcionalidad como knockout.js, necesitarás escribir más código, por lo que tu productividad se resentirá. Estamos en el siglo 21 y no hay porqué reinventar la rueda. Si con esta librería puedes ahorrarte el picar y picar código, ¿por qué no aprender a utilizarla?
El código
Ahora vamos a ver un ejemplo para entender cómo funciona esto de Angular JS
Para entender Angular, en este ejemplo vamos a desarrollar una aplicación con ASP.net MVC con operaciones CRUD mediante un lista estática. Utilizando dicha lista estática aplicaremos las operaciones CRUD que se seleccionen.
Tendremos un modelo con cinco propiedades: UserName, Adress, Salary, IsMarried y un ejemplo que tenga operaciones estáticas CRUD de ese modelo.
En el vista, el div inicial mostrará la lista de registros y en dicha lista tendremos botones de Editar (Edit) y Borrar (Delete). Y mediante ese botón podremos crear, modificar y borrar esta lista estática global.
Ahora vamos a entender los términos básicos de Angular que usaremos en este ejemplo:
data-ng-app – Indica que la parte aplicada es un elemento de Angular
data-ng-controller – Indica que la parte aplicada es manejado por el controlador que has establecido
<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl"> </div>
data-ng-bind - Indica la parte aplicada que se unirá a la propiedad del modelo
<strong data-ng-bind="UserName"></strong>
Como Username es propiedad del modelo, se une al elemento definido anteriormente.
data-ng-repeat – Indica un bucle en la parte aplicada
<tr data-ng-repeat="x in UserData | limitTo:20" >
Utilizando la sintaxis anterior aplicamos un loop en UserData el cual es una propiedad del objeto de Angular.
data-ng-click – Evento click en la parte aplicada
<input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" />
$index – Indica la fila index del loop
data-ng-model - Indica el modelo de angular aplicado al html dom
<input type="text" data-ng-model="UserName" required />
data-ng-disabled – Indica si la parte aplicada está deshabilitada o no
<input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" />
Ahora vamos a comprobar el script anterior.
var angularuserApp = angular.module("userApp", []);
angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window,$timeout) {})
Este es el script HTML
<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl">
<table class="table-striped table-hover" style="width:100%;">
<colgroup>
<col style="width:15%;"/>
<col style="width:25%;" />
<col style="width:10%;" />
<col style="width:10%;" />
<col style="width:15%;" />
<col style="width:10%;" />
<col style="width:7%;" />
<col style="width:7%;" />
</colgroup>
<thead>
<tr>
<th>User Name</th>
<th>Address</th>
<th>Email</th>
<th>Salary</th>
<th>Is Married</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="x in UserData | limitTo:20" >
<td>
<strong data-ng-bind="x.UserName"></strong>
</td>
<td><span data-ng-bind="x.Address"></span></td>
<td><span data-ng-bind="x.Email"></span></td>
<td><span data-ng-bind="x.Salary"></span></td>
<td><span data-ng-bind="x.IsMarried"></span></td>
<td><input type="button" id="btnEdit" value="Edit" data-ng-click="EditRow(x)" /> </td>
<td><input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" /> </td>
</tr>
</tbody>
</table>
<br />
<br />
<form name="myform" novalidate>
<h3> Edit User Information </h3>
<table class="table-striped table-hover" style="width:100%;">
<tr>
<td>
User Name :
</td>
<td>
<input type="text" data-ng-model="UserName" required />
</td>
</tr>
<tr>
<td>
Address :
</td>
<td>
<input type="text" data-ng-model="Address" required />
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type="email" data-ng-model="Email" />
</td>
</tr>
<tr>
<td>
Salary :
</td>
<td>
<input type="number" data-ng-model="Salary" />
</td>
</tr>
<tr>
<td>
Is Married :
</td>
<td>
<input type="checkbox" data-ng-model="IsMarried" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" />
<input type="button" id="btnClear" value="Clear" data-ng-click="ClearRecord()" data-ng-disabled="CheckRecord()" />
</td>
</tr>
</table>
</form>
</div>
<script>
var angularuserApp = angular.module("userApp", []);
angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window, $timeout) {
//==Intit Value================
$scope.UserName = "";
$scope.Address = "";
$scope.Email = "";
$scope.Salary = null;
$scope.IsMarried = null;
//==Intit Value================
$scope.LoadIntialData = function () {
var routeurl = '@Url.Action("GetData", "User")';
$http.get(routeurl).success(function (data) {
$scope.UserData = data;
}).error(function (e) {
// error handling
});
}
$scope.LoadIntialData();
$scope.DeleteRow = function (index) {
$scope.UserData.splice(index, 1);
//==================if you use real time application then need to call to conroller from remove record from db=======
}
$scope.EditRow = function (ele) {
$scope.UserName = ele.UserName;
$scope.Address = ele.Address;
$scope.Email = ele.Email;
$scope.Salary = ele.Salary;
$scope.IsMarried = ele.IsMarried;
}
$scope.SaveRecord = function () {
var invalidfiled = "";
if (!$scope.myform.$valid) {
return;
}
else {
var IsItemUpdate = false;
$.each($scope.UserData, function (i, n) {
if (n.UserName == $scope.UserName && n.Address == $scope.Address) {
IsItemUpdate = true;
n.Email = $scope.Email;
n.Salary = $scope.Salary;
n.IsMarried = $scope.IsMarried;
}
});
if (IsItemUpdate == false) {
var obj = new Object();
obj.UserName = $scope.UserName;
obj.Address = $scope.Address;
obj.Email = $scope.Email;
obj.Salary = $scope.Salary;
obj.IsMarried = $scope.IsMarried;
$scope.UserData.unshift(obj);
}
$scope.ClearRecord();
//==================if you use real time application then need to call to conroller from save record from db=======
}
}
$scope.CheckRecord = function () {
if ($scope.UserName != "" && $scope.Address != "")
return false;
else
return true;
}
$scope.ClearRecord = function () {
$scope.UserName = "";
$scope.Address = "";
$scope.Email = "";
$scope.Salary = null;
$scope.IsMarried = null;
}
});
</script>
Este es el código del controlador
public class UserController : Controller
{
//
// GET: /User/
public ActionResult Users()
{
return View();
}
public JsonResult GetData()
{
List objList = new List();
//==Create the test data for in view ============================
User objuser = new User();
objuser.UserName = "Pragnesh Khalas";
objuser.Address = "B-25 Swaminarayan Park Naroda Ahmedabad";
objuser.Email = "[email protected]";
objuser.Salary = 9000;
objuser.IsMarried = true;
objList.Add(objuser);
objuser = new User();
objuser.UserName = "Rahul Patel";
objuser.Address = "A-40 Navkar Soci. Ahmedabad";
objuser.Email = "[email protected]";
objuser.Salary = 8000;
objuser.IsMarried = true;
objList.Add(objuser);
objuser = new User();
objuser.UserName = "Bhavin Patel";
objuser.Address = "D-10 Bharat Soci. Ahmedabad";
objuser.Email = "[email protected]";
objuser.Salary = 6000;
objuser.IsMarried = true;
objList.Add(objuser);
return Json(objList, JsonRequestBehavior.AllowGet);
}
}
Y este el modelo
public class User
{
[Required]
public string UserName { get; set; }
[Required]
public string Address { get; set; }
[EmailAddress]
public string Email { get; set; }
public double? Salary { get; set; }
public bool? IsMarried { get; set; }
}
Fuente: Pragnesh Khalas