Angular 1

AngularJS es un Framework desarrollado con JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

AngularJS amplía la funcionalidad en el código HTML

  • La directiva ng-app crea un elemento que contendrá el código web desarrollado con AngularJS.
  • La directiva ng-model enlaza el valor de controles HTML (input, select, textarea) con datos de la página web.
  • La directiva ng-bind enlaza datos de la página web para que puedan ser visualizados en la vista HTML.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Enlaces de datos

  • Los enlaces de datos nos permiten unir expresiones de AngularJS con los datos introducidos en cualquier formulario.
  • En el siguiente ejemplo el campo {{ firstName }} está unido con ng-model="firstName".
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="" ng-init="firstName='John'">

    <p>Name: <input type="text" ng-model="firstName"></p>
    <p>You wrote: {{ firstName }}</p>

  </div>
</body>
</html>
  • A continuación podemos observar rápidamente cómo dos campos de texto se enlazan utilizando dos directivas de tipo ng-model y se utilizan los valores introducidos para realizar una multiplicación en tiempo real:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="" ng-init="quantity=1;price=5">

    Quantity: <input type="number" ng-model="quantity">
    Costs:    <input type="number" ng-model="price">

    Total in dollar: {{ quantity * price }}

  </div>
</body>
</html>

Controladores

  • La directiva ng-controller nos permite definir el controlador del contenido web.
  • Un controlador es un objeto JavaScript, creado a partir de un objeto JavaScript estándar.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.firstName = "John";
      $scope.lastName = "Doe";
    });
  </script>
</body>
</html>

Filtros

  • Filtro de moneda:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="costCtrl">
    <h1>Price: {{ price | currency }}</h1>
    <h1>Price: {{ price | currency:"USD$" }}</h1> 
    <h1>Price: {{ price | currency:"USD$":0 }}</h1>                  
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('costCtrl', function ($scope) {
      $scope.price = 58.25;
    });
  </script>
  <p>The currency filter formats a number to a currency format.</p>
</body>
</html>
  • Bucles y filtros
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
  <p>Type a letter in the input field:</p>
  <p><input type="text" ng-model="test"></p>

  <ul>
    <li ng-repeat="x in names | filter:test">{{ x }}</li>
  </ul>
</div>

<script>
  angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = ['Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai'];
  });
</script>

<p>The list will only consists of names matching the filter.</p>
</body>
</html>

Validación de formularios

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

  <p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
  </p>

  <p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required. 
  </span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
  </p>

  <p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
  myForm.email.$dirty && myForm.email.$invalid">
  </p>

</form>

<script>
  var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
  });
</script>

</body>
</html>