AngularJS es un marco para crear aplicaciones web a gran escala y de alto rendimiento mientras las mantiene tan fáciles de mantener. A continuación se muestran las características del marco AngularJS.

• AngularJS es un potente marco de desarrollo basado en JavaScript para crear una aplicación de Internet RICA (RIA).

• AngularJS ofrece a los desarrolladores opciones para escribir aplicaciones del lado del cliente (usando JavaScript) de una manera limpia MVC (Model View Controller).

• La aplicación escrita en AngularJS es compatible con varios navegadores. AngularJS maneja automáticamente el código JavaScript adecuado para cada navegador.

• AngularJS es de código abierto, completamente gratuito y utilizado por miles de desarrolladores en todo el mundo. Tiene licencia de Apache License versión 2.0.

El enlace de datos es la sincronización automática de datos entre los componentes del modelo y la vista. La directiva ng-model se utiliza en el enlace de datos.

Los ámbitos son objetos que hacen referencia al modelo. Actúan como pegamento entre el controlador y la vista.

Los controladores son funciones de JavaScript que están vinculadas a un ámbito particular. Son los actores principales en el marco de AngularJS y llevan funciones para operar con datos y decidir qué vista se actualizará para mostrar los datos basados ​​en el modelo actualizado.

AngularJS viene con varios servicios integrados. Por ejemplo, $ https: el servicio se utiliza para realizar XMLHttpRequests (llamadas Ajax). Los servicios son objetos singleton que se instancian solo una vez en la aplicación.

Los filtros seleccionan un subconjunto de elementos de una matriz y devuelven una nueva matriz. Los filtros se utilizan para mostrar elementos filtrados de una lista de elementos según criterios definidos.

Las directivas son marcadores en elementos DOM (como elementos, atributos, css y más). Estos se pueden utilizar para crear etiquetas HTML personalizadas que sirven como nuevos widgets personalizados. AngularJS tiene directivas integradas (ng-bind, ng-model, etc.) para realizar la mayor parte de las tareas que los desarrolladores tienen que hacer.

Las plantillas son la vista renderizada con información del controlador y el modelo. Pueden ser un solo archivo (como index.html) o múltiples vistas en una página usando "parciales".

Es el concepto de cambiar de vista. El controlador basado en AngularJS decide qué vista renderizar en función de la lógica empresarial.

La vinculación profunda le permite codificar el estado de la aplicación en la URL para que se pueda marcar. Luego, la aplicación se puede restaurar desde la URL al mismo estado.

A continuación se muestran las ventajas de AngularJS.

• AngularJS proporciona la capacidad de crear una aplicación de página única de una manera muy limpia y fácil de mantener.

• AngularJS proporciona capacidad de enlace de datos a HTML, lo que brinda al usuario una experiencia rica y receptiva.

• El código AngularJS se puede probar por unidad.

• AngularJS usa la inyección de dependencia y hace uso de la separación de preocupaciones.

• AngularJS proporciona componentes reutilizables.

• Con AngularJS, el desarrollador escribe menos código y obtiene más funcionalidad.

• En AngularJS, las vistas son páginas html puras y los controladores escritos en JavaScript hacen el procesamiento comercial.

• Las aplicaciones de AngularJS pueden ejecutarse en todos los principales navegadores y teléfonos inteligentes, incluidos teléfonos / tabletas basados ​​en Android e iOS.

Las siguientes son las desventajas de AngularJS.

• Not Secure- Al ser solo un marco de JavaScript, las aplicaciones escritas en AngularJS no son seguras. La autenticación y autorización del lado del servidor es imprescindible para mantener segura una aplicación.

• Not degradable - Si el usuario de su aplicación deshabilita JavaScript, el usuario solo verá la página básica y nada más.

A continuación se muestran las tres directivas principales de AngularJS.

• ng-app - Esta directiva define y vincula una aplicación AngularJS a HTML.

• ng-model - Esta directiva vincula los valores de los datos de la aplicación AngularJS a los controles de entrada HTML.

• ng-bind - Esta directiva vincula los datos de la aplicación AngularJS a las etiquetas HTML.

Cuando la página se carga en el navegador, suceden las siguientes cosas:

• El documento HTML se carga en el navegador y el navegador lo evalúa. Se carga el archivo JavaScript de AngularJS; se crea el objeto global angular . A continuación, se ejecuta JavaScript que registra las funciones del controlador.

• Siguiente AngularJS escanea a través del HTML para buscar aplicaciones y vistas de AngularJS. Una vez que se encuentra la vista, la conecta a la función del controlador correspondiente.

• A continuación, AngularJS ejecuta las funciones del controlador. Luego, renderiza las vistas con datos del modelo poblado por el controlador. La página se prepara.

Model Vver Controller o MVC, como se le llama popularmente, es un patrón de diseño de software para desarrollar aplicaciones web. Un patrón de controlador de vista de modelo se compone de las siguientes tres partes:

• Model - Es el nivel más bajo del patrón responsable de mantener los datos.

• View - Es el responsable de mostrar al usuario todos o una parte de los datos.

• Controller - Es un código de software que controla las interacciones entre el modelo y la vista.

La directiva ng-app define y vincula una aplicación AngularJS a HTML. También indica el inicio de la aplicación.

La directiva ng-model vincula los valores de los datos de la aplicación AngularJS a los controles de entrada HTML. Crea una variable modelo que se puede usar con la página html y dentro del control del contenedor (por ejemplo, div) que tiene la directiva ng-app.

La directiva ng-bind vincula los datos de la aplicación AngularJS a las etiquetas HTML. ng-bind actualiza el modelo creado por la directiva ng-model para que se muestre en la etiqueta html cada vez que el usuario ingresa algo en el control o actualiza los datos del control html cuando el controlador actualiza los datos del modelo.

La directiva ng-controller le dice a AngularJS qué controlador usar con esta vista. La aplicación AngularJS se basa principalmente en controladores para controlar el flujo de datos en la aplicación. Un controlador es un objeto JavaScript que contiene atributos / propiedades y funciones. Cada controlador acepta $ scope como un parámetro que se refiere a la aplicación / módulo que el controlador debe controlar.

AngularJS es una biblioteca pura basada en javaScript que se integra fácilmente con HTML.

Step 1 - Incluir la biblioteca de javascript angularjs en la página html

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

Step 2 - Apuntar a la aplicación AngularJS

A continuación, le contamos qué parte del HTML contiene la aplicación AngularJS. Esto se hace agregando el atributo ng-app al elemento HTML raíz de la aplicación AngularJS. Puede agregarlo al elemento html o al elemento del cuerpo como se muestra a continuación:

<body ng-app = "myapp">
</body>

La directiva ng-init inicializa los datos de una aplicación AngularJS. Se utiliza para poner valores a las variables que se utilizarán en la aplicación.

La directiva ng-repeat repite elementos html para cada elemento de una colección.

Las expresiones se utilizan para vincular los datos de la aplicación a html. Las expresiones se escriben entre llaves dobles como {{expresión}}. Las expresiones se comportan de la misma forma que las directivas ng-bind. Las expresiones de la aplicación AngularJS son expresiones de JavaScript puras y generan los datos donde se utilizan.

El filtro de mayúsculas convierte un texto en texto en mayúsculas.

En el siguiente ejemplo, hemos agregado un filtro en mayúsculas a una expresión usando un carácter de barra vertical. Aquí hemos agregado un filtro de mayúsculas para imprimir el nombre del estudiante en todas las letras mayúsculas.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

El filtro de minúsculas convierte un texto en texto en minúsculas.

En el siguiente ejemplo, hemos agregado un filtro en minúsculas a una expresión usando un carácter de barra vertical. Aquí hemos agregado un filtro de minúsculas para imprimir el nombre del estudiante en todas las letras minúsculas.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

El filtro de moneda da formato al texto en un formato de moneda.

En el siguiente ejemplo, hemos agregado un filtro de moneda a una expresión que devuelve un número mediante el carácter de barra vertical. Aquí hemos agregado un filtro de moneda para imprimir tarifas usando formato de moneda.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

filter filter se utiliza para filtrar la matriz a un subconjunto de la misma según los criterios proporcionados.

En el siguiente ejemplo, para mostrar solo los temas obligatorios, usamos subjectName como filtro.

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

orderby filter ordena la matriz según los criterios proporcionados.

En el siguiente ejemplo, para ordenar materias por marcas, usamos orderBy marks.

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

La directiva ng-disabled deshabilita un control determinado.

En el siguiente ejemplo, agregamos el atributo ng-disabled a un botón HTML y le pasamos un modelo. Luego, adjuntamos el modelo a una casilla de verificación y podemos ver la variación.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

La directiva ng-show muestra un control dado.

En el siguiente ejemplo, hemos agregado el atributo ng-show a un botón HTML y le hemos pasado un modelo. Luego, adjuntamos el modelo a una casilla de verificación y podemos ver la variación.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

La directiva ng-hide oculta un control dado.

En el siguiente ejemplo, hemos agregado el atributo ng-hide a un botón HTML y le hemos pasado un modelo. Luego, adjuntamos el modelo a una casilla de verificación y podemos ver la variación.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

La directiva ng-click representa un evento de clic de AngularJS.

En el siguiente ejemplo, agregamos el atributo ng-click a un botón HTML y agregamos una expresión para actualizar un modelo. Entonces podemos ver la variación.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

angular.module se utiliza para crear módulos AngularJS junto con sus módulos dependientes. Considere el siguiente ejemplo:

var mainApp = angular.module("mainApp", []);

Aquí hemos declarado una aplicación. mainAppmódulo usando la función angular.module. Le hemos pasado una matriz vacía. Esta matriz generalmente contiene módulos dependientes declarados anteriormente.

AngularJS enriquece el llenado y la validación de formularios. Podemos usar los indicadores $ sucio y $ inválido para realizar las validaciones de manera transparente. Utilice novalidate con una declaración de formulario para deshabilitar cualquier validación específica del navegador.

Lo siguiente se puede usar para rastrear errores.

• $dirty - indica que se ha cambiado el valor.

• $invalid - indica que el valor ingresado no es válido.

• $error - indica el error exacto.

Usando AngularJS, podemos incrustar páginas HTML dentro de una página HTML usando la directiva ng-include.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

AngularJS proporciona $ https: control que funciona como un servicio para hacer una llamada ajax para leer datos del servidor. El servidor realiza una llamada a la base de datos para obtener los registros deseados. AngularJS necesita datos en formato JSON. Una vez que los datos están listos, $ https: se puede usar para obtener los datos del servidor de la siguiente manera:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

$ routeProvider es el servicio clave que establece la configuración de las URL, las asigna con la página html correspondiente o ng-template y adjunta un controlador con la misma.

Scope es un objeto JavaScript especial que desempeña el papel de unir el controlador con las vistas. El alcance contiene los datos del modelo. En los controladores, se accede a los datos del modelo a través del objeto $ scope. $ rootScope es el padre de todas las variables de alcance.

Los osciloscopios son específicos de los controladores. Si definimos controladores anidados, el controlador secundario heredará el alcance de su controlador principal.

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
	  
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

Los siguientes son los puntos importantes que se deben considerar en el ejemplo anterior.

• Hemos establecido valores para modelos en shapeController.

• Hemos anulado el mensaje en el controlador secundario circleController. Cuando se utiliza "mensaje" dentro del módulo del controlador circleController, se utilizará el mensaje anulado.

Los servicios son funciones de JavaScript y son responsables de realizar tareas específicas únicamente. Cada servicio es responsable de una tarea específica, por ejemplo, $ https: se usa para realizar una llamada ajax para obtener los datos del servidor. $ route se utiliza para definir la información de enrutamiento y así sucesivamente. Los servicios incorporados siempre tienen el prefijo $ símbolo.

Usando el método de servicio, definimos un servicio y luego le asignamos un método. También le hemos inyectado un servicio ya disponible.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
	}
});

Usando el método de fábrica, primero definimos una fábrica y luego le asignamos un método.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
		
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
});

El método de fábrica se usa para definir una fábrica que luego se puede usar para crear servicios cuando sea necesario, mientras que el método de servicio se usa para crear un servicio cuyo propósito es realizar una tarea definida.

AngularJS proporciona un mecanismo de inyección de dependencia supremo. Proporciona los siguientes componentes principales que se pueden inyectar entre sí como dependencias.

• value
• factory
• service
• provider
• constant

El proveedor es utilizado por AngularJS internamente para crear servicios, fábrica, etc.durante la fase de configuración (fase durante la cual AngularJS se inicia). El siguiente script de mención se puede usar para crear MathService que hemos creado anteriormente. Provider es un método de fábrica especial con un método get () que se utiliza para devolver el valor / servicio / fábrica.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
	
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
		
   });
});

Las constantes se utilizan para pasar valores en la fase de configuración teniendo en cuenta el hecho de que el valor no se puede utilizar para pasar durante la fase de configuración.

mainApp.constant("configParam", "constant value");

¡Si! En AngularJS podemos crear una directiva personalizada para extender las funcionalidades existentes de AngularJS.

Las directivas personalizadas se utilizan en AngularJS para ampliar la funcionalidad de HTML. Las directivas personalizadas se definen mediante la función "directiva". Una directiva personalizada simplemente reemplaza el elemento para el que está activada. La aplicación AngularJS durante el arranque encuentra los elementos coincidentes y realiza una actividad única usando su método compile () de la directiva personalizada y luego procesa el elemento usando el método link () de la directiva personalizada según el alcance de la directiva.

AngularJS proporciona soporte para crear directivas personalizadas para el siguiente tipo de elementos.

• Element directives - La directiva se activa cuando se encuentra un elemento coincidente.

• Attribute - La directiva se activa cuando se encuentra un atributo coincidente.

• CSS - La directiva se activa cuando se encuentra un estilo CSS coincidente.

• Comment - La directiva se activa cuando se encuentra un comentario coincidente.

La internacionalización es una forma de mostrar información local específica en un sitio web. Por ejemplo, mostrar el contenido de un sitio web en inglés en Estados Unidos y en danés en Francia.

AngularJS admite la internacionalización incorporada para tres tipos de filtros de moneda, fecha y números. Solo necesitamos incorporar los js correspondientes según la configuración regional del país. De forma predeterminada, maneja la configuración regional del navegador. Por ejemplo, para usar la configuración regional en danés, use el siguiente script

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>