Introducción a la aplicación Angular JS

Angular JS es una aplicación de código abierto. Fue escrito en JavaScript. Angular JS fue desarrollado en el año 2010 por Google. La aplicación Angular JS también proporciona una referencia dinámica a aplicaciones y páginas web. Angular JS le permite ampliar el vocabulario HTML para su aplicación. Angular JS se usa porque HTML falla cuando se intenta usar para declarar las vistas dinámicas en aplicaciones web. Angular JS se conoce como el conjunto de herramientas para construir el Framework más adecuado para el desarrollo de su aplicación.

Las características del marco JS angular pueden modificarse o reemplazarse, reutilizarse para adaptarse más o únicamente al flujo de trabajo y para referencia futura. Está siendo completamente extensible y funciona también con otras bibliotecas. El código de la aplicación AngularJS es simple en los viejos objetos javascript. Hace que su código sea probado, mantenido y reutilizado. En angular JS, no hay necesidad de heredar de tipos propietarios para envolver los modelos en métodos de acceso como tenemos que hacer en otros. Angular JS ha seguido los últimos conceptos para el desarrollo.

Conceptos de aplicación angular JS

Los conceptos de la aplicación Angular JS con sus ejemplos son los siguientes:

  • Directivas para extender atributos HTML

La directiva de características es única y está disponible en otros marcos. Las directivas se escriben fácilmente y también pueden ser genéricas, ya que pueden escribirse una vez y reutilizarse muchas veces. Las directivas son realmente útiles y hay muchas razones para usar, como cuando tiene necesidades especiales como la cuadrícula personalizada u otra funcionalidad, la directiva que desea realmente todavía no existe. La directiva de aplicación Angular JS comienza con 'ng-' como ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Ejemplo:

Bucle con ng-repeat:

    (( X ))

  • Alcance

Se utiliza para la comunicación entre el controlador y la vista. Vincula una vista al modelo de vista y las funciones definidas en el controlador. Angular JS Application admite ámbitos anidados o jerárquicos. Es una fuente de datos para la aplicación Angular JS y puede agregar o eliminar propiedades cuando sea necesario. Toda la manipulación y asignación de datos ocurre a través del objeto de alcance cuando se realiza la operación CRUD.

  • Controladores

Estos se utilizan para definir el alcance de las vistas y el alcance puede considerarse como variables y funciones que la vista puede usar algún enlace.

Ejemplo:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • El enlace de datos

Sincroniza los datos entre el modelo y la vista. Significa que el cambio en el modelo actualizará la vista. La directiva ng-model se utiliza para el enlace de datos bidireccional.

Ejemplo:
Cuando el usuario escribe en el cuadro de texto, el valor modificado se muestra en mayúsculas y minúsculas en una etiqueta que es un enlace de datos bidireccional.

  • Servicios

Se utiliza cuando el estado se ha compartido en la aplicación y necesita una solución para el almacenamiento de datos. Puede ser un singleton y puede ser utilizado por otros componentes como directivas, controladores y otros servicios. Los servicios que se utilizan son $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • Enrutamiento

Ayuda a dividir la aplicación en múltiples vistas y a unir varias vistas a los controladores. Divide el SPA en múltiples vistas para dividir lógicamente la aplicación y hacerla más manejable.

Ejemplo: ruta predeterminada

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • Filtros

Estos se utilizan para extender el comportamiento de la expresión vinculante y directiva. Permite formatear los datos y formatear valores o aplicar ciertas condiciones. Los filtros se invocan en HTML con la tubería dentro de las expresiones.

Ejemplo:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

 html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Entrada de filtrado:

    (((x.name | mayúscula) + ', ' + x.age + ', ' + x.city))

  • Expresiones

Las expresiones (()) son la forma declarativa de especificar la ubicación del enlace de datos en HTML y usar una expresión para el enlace de datos. Se puede agregar en plantillas HTML y no admite declaraciones de flujo de control, pero admite filtros para formatear los datos antes de mostrarlos.

Ejemplo:

Ingrese algo en el cuadro de entrada:

Nombre:

Usted escribió: ((firstName))

  • Módulos

    El módulo es el contenedor de una aplicación y los controladores de la aplicación pertenecen al módulo. Es una colección de funciones y divide la aplicación en un componente funcional pequeño y reutilizable. Un módulo puede identificarse por un nombre único y puede depender de otros módulos.

Ejemplo:



//Referring module name myApp
(( firstName + " " + lastName ))


  • Pruebas

Para probar el código de la aplicación Angular JS, los marcos de prueba se usan ampliamente como Jasmine y karma. Estos marcos de prueba soportan principalmente burlas y altamente configurables usando un archivo JSON con la ayuda de varios plug-in de Angular JS Application.

Conclusión - Aplicación Angular JS

Angular JS proporciona el marco que tiene directivas únicas y características potentes. Las directivas nos ayudan a construir la nueva sintaxis HTML que es principalmente específica para una aplicación. Se está utilizando como componentes reutilizables. El componente le permite ocultar estructuras complejas y otros comportamientos. La atención se centrará únicamente en lo que hace la aplicación y en cómo se ve por separado. La aplicación Angular JS se está volviendo popular en estos días, ya que es fácil de aprender y desarrollar la aplicación. Hay muchas oportunidades en el mercado para el desarrollador front-end. Si eres bueno con JavaScript, entonces Angular JS no será difícil de aprender y actualizar tus habilidades con esta tecnología sería una gran idea.

Artículos recomendados

Este artículo ha sido una guía para la aplicación Angular JS. Aquí hemos discutido los conceptos de la aplicación Angular JS con algunos ejemplos para obtener una mejor comprensión. También puede consultar el siguiente artículo para obtener más información.

  1. Diferencias de angular 5 y angular 4
  2. ¿Qué es el aprendizaje automático?
  3. Diferencias entre JSON y BSON
  4. ¿Qué es el marco de Laravel?
  5. ¿Qué es Testing Frameworks para Java?

Categoría:

Desarrollo de software