Aprende Angular JS en 1 Día 2016 PDF

 

Aprende AngularJS en 1 día Por Krishna Rungta

Copyright 2016 - Todos los derechos reservados - Krishna Rungta

TODOS LOS DERECHOS RESERVADOS. Ninguna parte de esta publicación puede reproducirse o transmitirse en forma alguna, ya sea electrónica o mecánica, incluidas fotocopias, grabaciones o cualquier sistema de almacenamiento o recuperación informativa sin el permiso expreso por escrito del autor, fechado y firmado.

www.full-ebook.com

 

contenido Capítulo 1: Introducción y Arquitectura 1. ¿Qué es AngularJS? 2. La arquitectura de Angularj 3. Ventajas de AngularJS AngularJ S

Capítulo 2: Hello World: tu primer programa Capítulo 3: Controladores 1. 2. 3. 4. 5. 6. 7. 8.

¿Qué hace al controlador desde la perspectiva angular? Construcción de un controlador básico Métodos Controlador Controlador en archivos externos Administrar área Establecer o agregar comportamiento Mostrar información repetida Un controlador avanzado

Capítulo 4: modelo ng 1. El atributo del modelo ng 2. Aplicar modelo ng al área de texto, entrada y selección de elementos...

Capítulo 5: Vistas 1. Uso de vistas 2. Vistas AngularJS

Capítulo 6: Expresiones 1. Explique las expresiones de Angular.js con un ejemplo

www.full-ebook.com

 

2. 3. 4. 5. 6. 7.

Números AngularJS Cuerdas AngularJS Objetos AngularJS AngularJS matrices Habilidades y limitaciones de AngularJS Expressions La diferencia entre expresiones y $ eval

Capítulo 7: Filtros 1. Filtro predeterminado en Angular.js 2. Filtro personalizado en Angular.js

Capítulo 8: Pautas 1. 2. 3. 4. 5. 6. 7. 8.

Cómo crear la directiva ng-app, ng-init, ng-model, ng-repeat Crea una política AngularJS personalizada Políticas y áreas de AngularJs Usa el controlador con las instrucciones Para crear directivas reutilizables Pautas y componentes de AngularJS - ng-transclude Instrucciones anidadas Tratar eventos en la directiva

Capítulo 9: Módulo 1. ¿Qué es un módulo AngularJS? 2. Módulos y controladores

Capítulo 10: Eventos 1. La directiva ng-click 2. Mostrar elementos HTML con ng-show 3. Ocultar elementos HTML con ng-hide

Capítulo 11: Rutas ($ ruta)

www.full-ebook.com

 

1. 2. 3. 4. 5.

Agrega una ruta cuadrada Crea una ruta predeterminada Acceso a los parámetros de la ruta Uso del servicio Angular $ route Habilite el enrutamiento HTML5

Capítulo 12: AngularJS http, Ajax 1. Interacciones de alto nivel con servidores que usan $ recurso 2. Interacciones de servidor de bajo nivel con $ http 3. Recuperar datos de un servidor usando SQL y MySQL

Capítulo 13: Tabla 1. Mostrar datos en una tabla 2. Mostrar con ordenPor filtro y mayúscula filtro 3. Mostrar el índice de la tabla

Capítulo 14: Validación 1. 2. 3. 4.

Envíe un formulario con ng-submit Validación de formulario con HTML5 Validación de formulario con el núcleo Angular.js Validación de formulario con AngularJS Auto Validate Validate

5. Comentarios del usuario con los botones Ladda

Capítulo 15: ng-include 1. El lado del cliente contiene 2. El lado del servidor incluye 3. AngularJS contiene

Capítulo 16: Inyección de dependencia 1. ¿Qué es la inyección de dependencia?

www.full-ebook.com

 

2. Ejemplo de inyección de dependencia

www.full-ebook.com

 

Capítulo 1: Introducción y Arquitectura Angular JS es probablemente uno de los frameworks web más populares hoy en día. Este marco se utiliza para desarrollar principalmente aplicaciones de una sola página. Este marco ha sido desarrollado por un grupo de desarrolladores de Google. Debido al gran apoyo de Google y las ideas de un amplio foro de la comunidad, el marco siempre se mantiene actualizado. Además, siempre incorpora las últimas tendencias de desarrollo en el mercado. Todo este tutorial ayudará a comprender cómo desarrollar aplicaciones usando el framework AngularJS.

www.full-ebook.com

 

Qué es AngularJS En el inicio, angularJS parece un marco de JavaScript, pero es más que eso. Se basa en un marco Model-View-Controller. Es un marco con un propósito. Angular tiene las siguientes características clave que lo convierten en uno de los frameworks más potentes del mercado. 1. MVC: el marco se basa en el famoso concepto de MVC (Modelo-Vista(Modelo-VistaControlador). Este es un patrón de diseño utilizado en todas las aplicaciones web modernas. Este patrón se basa en dividir la capa de lógica de negocios, la capa de datos y la capa de presentación en secciones separadas. La división en diferentes secciones se hace para que cada uno se pueda gestionar más fácilmente. 2. Enlace de modelo de datos: no necesita escribir un código especial para vincular datos a los controles HTML. Angular puede hacer esto simplemente agregando unos pocos fragmentos de código. 3. Escribir menos código: cuando se lleva a cabo la manipulación de DOM, DOM, se necesita escribir mucho JavaScript para diseñar cualquier aplicación. Pero con Angular, se sorprenderá con la menor cantidad de código que necesita para la manipulación DOM. 4. Pruebas unitarias listas: los diseñadores de Google no solo desarrollaron Angular sino que también desarrollaron un marco de prueba llamado "Karma" que ayuda a diseñar pruebas unitarias para aplicaciones AngularJS.

www.full-ebook.com

 

Arquitectura AngularJS Angular.js sigue la arquitectura MVC, el diagrama del marco MVC como se muestra a continuación.

www.full-ebook.com

 

El controlador representa la capa que tiene la lógica de negocios. Los eventos del usuario activan las funciones que están almacenadas dentro de su

www.full-ebook.com

 

controlador. Los eventos del usuario son parte del controlador. Las vistas se utilizan para representar la capa de presentación que se proporciona a los usuarios finales Los modelos se utilizan para representar sus datos. Los datos en su modelo pueden ser tan simples como tener declaraciones primitivas. Por ejemplo, si mantiene una solicitud de estudiante, su modelo de datos podría tener una identificación de estudiante y un nombre. O también puede ser complejo al tener un modelo de datos estructurados. Si mantiene una aplicación de propiedad de automóvil, puede tener estructuras para definir el vehículo en sí mismo en términos de su capacidad de motor, capacidad de asientos, etc.

www.full-ebook.com

 

Ventajas AngularJS Dado que es un marco de código abierto, puede esperar que la cantidad de errores o problemas sea mínima. Encuadernación bidireccional: Angular.js mantiene los datos y la capa de presentación sincronizados. Ahora no necesita escribir código JavaScript adicional para mantener los datos en su código HTML y sus datos más tarde sincronizados. Angular.js automáticamente hará esto por ti. Solo necesita especificar qué control está vinculado a qué parte de su modelo.

Enrutamiento: Angular puede encargarse del enrutamiento, lo que significa pasar de una vista a otra. Esta es la clave fundamental de las aplicaciones de una sola página; en donde puede pasar a diferentes funcionalidades en su aplicación web en función de la interacción del usuario, pero aún permanecer en la misma página. Pruebas de compatibilidad angular, pruebas unitarias y pruebas de integración. Extiende HTML al proporcionar sus propios elementos llamados directivas. En un nivel alto, las directivas son marcadores en un elemento DOM (como un atributo, nombre de elemento y clase de comentario o CSS) que indican al compilador HTML de AngularJS que adjunte un comportamiento específico a ese elemento DOM. Estas directivas ayudan a extender la funcionalidad de los elementos HTML existentes para darle más potencia a su aplicación web.

www.full-ebook.com

 

Capítulo 2: Hola mundo: tu primer programa La mejor manera de ver el poder de una aplicación AngularJS es crear su primera aplicación básica de programa "Hello World" en Angular.JS. Hay muchos entornos de desarrollo integrados que puede usar para el desarrollo de AngularJS, algunos de los más populares se mencionan a continuación. En nuestro ejemplo, estamos utilizando Webstorm como nuestro IDE. 1. 2. 3. 4.

Tormenta web Texto sublime AngularJS Eclipse Estudio visual

www.full-ebook.com

 

Hola mundo, AngularJS El siguiente ejemplo muestra la forma más fácil de crear su primera aplicación "Hola mundo" en AngularJS. Guru99 {{message}}   angular.module('app',[]).controller('HelloWorldCtrl',function ($scope) {   $scope.message="Hello World" }) })

Explicación del código: 1. La palabra clave "ng-app" se utiliza para indicar que esta aplicación se debe considerar como una aplicación angular js. Cualquier nombre puede ser dado a esta aplicación. 2. El controlador es lo que se usa para mantener la lógica comercial. En la etiqueta h3, queremos acceder al controlador, que tendrá la lógica para mostrar "Helloworld", por lo que podemos decir que en esta etiqueta queremos acceder al controlador llamado "HelloWorldCtrl".

www.full-ebook.com

 

3. Estamos usando una variable miembro llamada "mensaje" que no es más que un marcador de posición para mostrar el mensaje "Hola mundo". 4. La "etiqueta de secuencia de comandos" se utiliza para hacer referencia al script angular.js que tiene toda la funcionalidad necesaria para js angulares. Sin esta referencia, si tratamos de usar cualquier función AngularJS, no funcionarán. 5. "Controlador" es el lugar donde realmente estamos creando nuestra lógica comercial, que es nuestro controlador. Los detalles de cada palabra clave se explicarán en los capítulos siguientes. Lo que es importante tener en cuenta es que estamos definiendo un método de controlador llamado 'HelloWorldCtrl' al que se hace referencia en el Paso 2. 6. Estamos creando una "función" que se llamará cuando nuestro código llame a este controlador. El objeto $ scope es un objeto especial en AngularJS, que es un objeto global utilizado en Angular.js. El objeto $ scope se usa para administrar los datos entre el controlador y la vista. 7. Estamos creando una variable miembro llamada "mensaje", asignándole el valor de "HelloWorld" y adjuntando la variable miembro al objeto de alcance.

NOTA: La directiva ng-controller es una palabra clave definida en AngularJS (paso # 2) y se usa para definir controladores en su aplicación. Aquí en nuestra aplicación, hemos utilizado la palabra clave ng-controller para definir un controlador llamado 'HelloWorldCtrl'. La lógica real para el controlador se creará en (paso # 5). Si el comando se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador. Salida: Aparecerá el mensaje 'Hola mundo'.

www.full-ebook.com

 

www.full-ebook.com

 

Capítulo 3: Controlador Los controladores tendrán su lógica comercial básica. El objetivo principal del controlador en Angular.js es tomar los datos de la Vista, procesar los datos en consecuencia y luego enviar esos datos a la vista que se muestra al usuario final. Utilizará el modelo de datos, llevará a cabo el procesamiento requerido y luego pasará la salida a la vista que a su vez se mostrará al usuario final.

www.full-ebook.com

 

Qué controlador hace desde la perspectiva de Angular

La principal responsabilidad del controlador es controlar los datos que pasan a la vista. El alcance y la vista tienen comunicación bidireccional. Las propiedades de la vista pueden llamar "funciones" en el alcance. Y los eventos en la vista pueden llamar "métodos" en el alcance. El siguiente fragmento de código da un ejemplo simple de una función. La función ($ scope) que se define al definir el controlador y una función interna que se utiliza para devolver la concatenación de $ scope.firstName y $ scope.lastName. En AngularJS cuando define una función como una variable, se conoce como un Método.

www.full-ebook.com

www.full ebook.com  

Los datos de esta manera pasan del controlador al alcance y luego los datos pasan del alcance a la vista. El alcance se usa para exponer el modelo a la vista. El modelo se puede modificar mediante métodos definidos en el alcance que podrían activarse a través de eventos de la vista. Podemos definir un enlace de modelo bidireccional desde el alcance hasta el modelo. Los no por deberían paraveremos manipular DOM. Estocontroladores debería hacerse mediousarse de lasidealmente directivas que máseladelante. La mejor práctica es tener controladores basados en la funcionalidad. Por ejemplo, si tiene un formulario de entrada y necesita un controlador para eso, cree un controlador llamado "controlador de formulario".

www.full ebook.com  

Construyendo un controlador básico Antes de comenzar con la creación de un controlador, primero debemos tener nuestra configuración básica de página html en su lugar. El siguiente fragmento de código es una página html simple que tiene el título de "Registro de eventos" y contiene referencias a bibliotecas importantes como bootstrap, jquery y Angular. Event Registration      



{{lname}}



var app = angular.module('DemoApp',[]); app.controller('firstController', function($scope) {   $scope.pname="firstController"; }); app.controller('secondController', function($scope) { $scope.lname="secondController";

www.full-ebook.com  

});

Explicación del código: 1. Aquí definimos 2 controladores llamados "firstController" y "secondController". Para cada controlador también estamos agregando un código para el procesamiento. En nuestro primerControlador, adjuntamos una variable llamada "pname" que tiene el valor "firstController", y en el segundoControlador adjuntamos una variable llamada "lname" que tiene el valor "secondController". 2. En la vista, estamos accediendo a ambos controladores y usando la variable miembro desde el segundo controlador.

Si el código se ejecuta éxito, seV mostrará el texto siguiente resultado cuando ejecute su código en el con navegador. Verá erá todo el de "secondController" "secondContr oller" como se esperaba.

Salida:

Resumen La principal responsabilidad del controlador es crear un objeto de ámbito que a su vez se pase a la vista Cómo construir un controlador simple usando las directivas ng-app, ngcontroller y ng-model

www.full-ebook.com  

Cómo agregar métodos personalizados a un controlador que se puede usar para separar varias funcionalidades dentro de un módulo angularjs. Los controladores se pueden definir en archivos externos para separar esta capa de la capa de Vista. Esta suele ser una mejor práctica al crear aplicaciones web. varias variables de miembro al objeto de alcance que Se pueden agregar luego se puede referenciar en la vista. El comportamiento se puede agregar para trabajar con eventos que se generan para las acciones realizadas por el usuario. La directiva ng-repeater se puede usar para mostrar múltiples elementos repetitivos. También echamos un vistazo a un controlador avanzado que analizó la definición de múltiples controladores en una aplicación.

www.full-ebook.com  

Capítulo 4: ng-model Los modelos en Angular.JS están representados por la directiva "ng-model". El objetivo principal de esta directiva es vincular la "vista" al "modelo". Por ejemplo, supongamos que desea presentar una página simple al usuario final como la que se muestra a continuación, que presenta al usuario para ingresar el "Nombre" y "Apellido" en cuadros de texto. Y luego quería asegurarse de almacenar la información que el usuario ingresó en su modelo de datos. En realidad, puede usar la directiva ng-model para asignar los campos del cuadro de texto de "Nombre" y "Apellido" a su modelo de datos. La directiva ng-model asegurará que los datos en la "vista" y el de su "modelo" se mantengan sincronizados todo el tiempo.

www.full-ebook.com  

El atributo ng-model

Como se discutió en la introducción a este capítulo, el atributo ng-model se usa para vincular los datos en su modelo a la vista presentada al usuario. El atributo ng-model se usa para, 1. Enlazar controles como entrada, área de texto y seleccionar en la vista en el modelo. 2. Proporcione un comportamiento de validación; por ejemplo, se puede agregar una validación a un cuadro de texto que solo puede ingresar caracteres numéricos en el cuadro de texto. 3. El atributo ng-model mantiene el estado del control (por estado, queremos decir que el control y los datos siempre se mantendrán sincronizados. Si el valor de nuestros datos cambia, cambiará automáticamente el valor en el control y viceversa)

www.full-ebook.com  

Aplicación de ng-model al área de texto, entrada y selección de elementos 1. Área de texto La etiqueta de área de texto se utiliza para definir un control de entrada de texto de varias líneas. El área de texto puede contener un número ilimitado de caracteres y el texto se representa con una fuente de ancho fijo. Entonces, veamos un ejemplo simple de cómo podemos agregar la directiva ngmodel a un control de área de texto. En este ejemplo, queremos mostrar cómo podemos pasar una cadena multilínea desde el controlador a la vista y adjuntar ese valor al control del área de texto. Guru99 Global Event     Topic Description: var app = angular .module ('DemoApp',[]); app.controller('DemoCtrl', function($scope) { $scope.pDescription="This topic looks at how Angular JS works\nModels in Angular JS" });  

www.full-ebook.com  

Explicación del código: 1. La directiva ng-model se usa para adjuntar la variable miembro llamada "pDescription" al control "textarea". 2. La variable "pDescription" en realidad contendrá el texto, que pasará al control del área de texto. También hemos mencionado 2 atributos para el control textarea, que es rows = 4 y cols = 50. Se han mencionado estos atributos para que podamos mostrar varias líneas de texto. Al definir estos atributos, textarea ahora tendrá 4 filas y 50 columnas para que pueda mostrar múltiples líneas de texto. 3. Aquí estamos adjuntando la variable miembro al objeto de alcance llamado "pDescription" y poniendo un valor de cadena a la variable. Tenga en cuenta que estamos poniendo el literal / n en la cadena para que el texto pueda tener múltiples líneas cuando se muestre en el área de texto. El literal / n divide el texto en varias líneas para que pueda representarse en el control de área de texto como múltiples líneas de texto. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute el código en el navegador.

Salida:

www.full-ebook.com  

De la salida Se puede ver claramente que el valor asignado a la variable pDescription como parte del objeto de ámbito se pasó al control textarea. Posteriormente, se ha mostrado cuando se carga la página. 2. Elementos de entrada La directiva ng-model también se puede aplicar a los elementos de entrada, como el cuadro de texto, las casillas de verificación, los botones de opción, etc. Veamos un ejemplo de cómo podemos usar el modelo ng con el tipo de entrada "caja de texto" y "casilla de verificación". Aquí tendremos un tipo de entrada de texto que tendrá el nombre de "Guru99" y habrá 2 casillas de verificación, una que se marcará de manera predeterminada y la otra no se marcará. Guru99 Global Event   Topic Description: Name : cinput type=”text” ng-model="pname">   Name :   Topic : Controllers Models Models var app = angular.module('DemoApp',[]);  app.controller('DemoCtrl1, function($scope) { $scope.pName="Guru99"; $scope.Topics =

www.full-ebook.com  

{ Controllers:true, Models : false }; });  

Explicación del código: 1. La directiva ng-model se usa para adjuntar la variable miembro llamada "pname" al control de texto de tipo de entrada. La variable "pname" contendrá el texto de "Guru99" que pasará al control de entrada de texto. Tenga en cuenta que se puede dar cualquier nombre al nombre de la variable miembro. 2. Aquí definimos nuestra primera casilla de verificación "Controladores" que se adjunta a la variable miembro Temas.Controladores. La casilla de verificación estará marcada para este control de verificación. 3. Aquí definimos nuestra primera casilla de verificación "Modelos" que se adjunta a la variable miembro Temas.Modelos. La casilla de verificación no estará marcada para este control de verificación. 4. Aquí estamos adjuntando la variable miembro llamada "pName" y poniendo un valor de cadena de "Guru99". 5. Estamos declarando una variable de matriz miembro llamada "T "Temas" emas" y dándole dos valores, el primero es "verdadero" y el segundo es "falso". Por lo tanto, cuando la primera casilla de verificación obtiene el valor de verdadero, la casilla de verificación se marcará para este control y del mismo modo, ya que el segundo valor es falso, la casilla de verificación no estará marcada para este control. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

www.full-ebook.com  

De la salida, Se puede ver claramente que el valor asignado a la variable pName es "Guru99" Como el primer valor de verificación es "verdadero", se marcó la casilla de verificación "Controladores". Del mismo modo, dado que el segundo valor es falso, la casilla de verificación no está marcada para la casilla "Modelos". 3. Seleccionar elementos La directiva ng-model también se puede aplicar al elemento seleccionado y se puede usar para completar los elementos de la lista en la lista de selección. Veamos un ejemplo de cómo podemos usar el modelo ng con el tipo de entrada de selección. Aquí tendremos un tipo de entrada de texto que tendrá el nombre de "Guru99" y habrá una lista de selección con 2 elementos de lista de "Controlador" y "Modelos". Guru99 Global Event   Topic Description:

www.full-ebook.com  

  Name : Topic : {{Topics.optionl}} {{Topics.option2}} var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pName="Guru99"; { $scope.Topics = { optionl : "Controllers", option2 : "Models" }; }) ;  

1. La directiva ng-model se usa para adjuntar la variable miembro llamada "Temas" al control de tipo de selección. Dentro del control de selección, para cada una de las opciones, estamos adjuntando la variable miembro de Topics.option1 para la primera opción y Topics.option2 para la segunda opción. 2. Aquí definimos nuestra variable de matriz Temas, Temas, que contiene 2 pares de valores El "Modelos". primer par tiene valor se de pasarán "Controladores" y el segundo tiene el clave. valor de Estosun valores para seleccionar la etiqueta de entrada en la vista. Si el código se ejecuta con éxito, se mostrará el siguiente resultado.

Salida:

www.full-ebook.com  

De la salida se puede ver claramente que el valor asignado a la variable pName es "Guru99" y podemos ver que el control de entrada de selección tiene las opciones de "Controladores" y "Modelos".

Resumen Los modelos en Angular JS están representados por la directiva ng-model. El objetivo principal de esta directiva es vincular la vista al modelo. Cómo construir un controlador simple usando las directivas ng-app, ng-controller y ng-model. La directiva ng-model se puede vincular a un control de entrada de "área de texto" y las cadenas multilínea se pueden pasar del controlador a la vista. La directiva ng-model se puede vincular a controles de entrada como el texto y los controles de casilla de verificación para hacerlos más dinámicos en tiempo de ejecución. La directiva ng-model también se puede usar para completar una lista de selección con opciones que se pueden mostrar al usuario.

www.full-ebook.com  

Capítulo 5: Vistas Hoy en día, todos habrían oído sobre las "Aplicaciones de una sola página". Muchos de los sitios web conocidos como Gmail usan el concepto de Aplicaciones de una sola página (SPA). SPA es el concepto en el que cuando un usuario solicita una página diferente, la aplicación no navegará a esa página, sino que mostrará la vista de la nueva página dentro de la página existente. Simplemente da la sensación al usuario de que nunca abandonó la página en primer lugar. Lo mismo se puede lograr en el Angular con la ayuda de Vistas unto con Rutas.

www.full-ebook.com  

Uso de vistas

Una vista es básicamente el contenido que se muestra al usuario. Básicamente lo que el usuario quiere ver, en consecuencia, esa vista de la aplicación se mostrará al usuario. La combinación de vistas y Rutas ayuda a dividir una aplicación en vistas lógicas y enlazar diferentes vistas a Controladores. Dividir la aplicación en diferentes vistas y usar Enrutamiento para cargar diferentes partes de la aplicación ayuda a dividir lógicamente la aplicación y hacerla más manejable. Supongamos que tenemos una aplicación de pedido, en la que un cliente puede ver pedidos y colocar pedidos nuevos. El siguiente diagrama y la explicación posterior demuestran cómo hacer esta aplicación como una aplicación de una sola página.

www.full-ebook.com  

Ahora, en lugar de tener dos páginas web diferentes, una para "Ver pedidos" y otra para "Pedidos nuevos", en AngularJS, en cambio, crearía dos vistas diferentes denominadas "Ver pedidos" y "Pedidos nuevos" en la misma página. También tendremos 2 enlaces de referencia en nuestra aplicación llamados #show y #new. Entonces, cuando la aplicación vaya a MyApp / # show, mostrará la vista de las Órdenes de visualización, al mismo tiempo que no saldrá de la página. Solo actualizará la sección de la página existente con la información de "Ver pedidos". Lo mismo ocurre con la vista "Nuevas órdenes". De esta forma, cada vez es más sencillo separar la aplicación en diferentes vistas para que sea más manejable y fácil de realizar cuando sea necesario. Y cada vista tendrá un controlador correspondiente para controlar la lógica comercial para esa funcionalidad.

www.full-ebook.com  

V istas de Angularjs Angularjs El "ngView" es una directiva que complementa el servicio $ route al incluir la plantilla representada de la ruta actual en el archivo de diseño principal (index.html). Cada vez que cambia la ruta actual, la vista incluida cambia según la configuración del servicio $ route sin cambiar la página en sí. Cubriremos rutas en un capítulo posterior, por ahora, nos enfocaremos en agregar vistas múltiples a nuestra aplicación. A continuación se muestra el diagrama de flujo completo de cómo funciona todo el proceso. Analizaremos en detalle cada proceso en nuestro ejemplo que se muestra a continuación.

www.full-ebook.com  

www.full-ebook.com  

Echemos un vistazo a un ejemplo de cómo podemos implementar vistas. En nuestro ejemplo, vamos a presentar dos opciones para el usuario, Uno es Mostrar un "Evento", y el otro es agregar un "Evento". Cuando el usuario hace clic en el enlace Agregar un evento, se le mostrará la vista para "Agregar evento" y lo mismo aplica para "Mostrar evento". Por favor, siga los pasos a continuación para obtener este ejemplo en su lugar.

Paso 1) Incluye el archivo de ruta angular como una referencia de script. Este archivo de ruta es necesario para hacer uso de las funcionalidades de tener múltiples angularJS.rutas y vistas. Este archivo se puede descargar desde el sitio web

Paso 2) En este paso, 1. Agregue etiquetas href que representarán enlaces a "Agregar un nuevo evento" y "Mostrar un evento". 2. Además, agregue una etiqueta div con la directiva ng-view que representará la vista. 3. Esto permitirá inyectar la vista correspondiente cada vez que el usuario haga clic en el enlace "Agregar nuevo evento" o "Mostrar evento". Guru99 Global Event

www.full-ebook.com  

Add New Event Display Event

Paso 3) En su etiqueta de secuencia de comandos para Angular JS, agregue el siguiente código. No nos preocupemos por el enrutamiento, por ahora, veremos esto en un capítulo posterior. Veamos Veamos el código de las vistas por ahora. 1. Esta sección de código significa que cuando el usuario hace clic en la etiqueta href "NewEvent" que se definió anteriormente en la etiqueta div. Accederá a la página web add_event.html y tomará el código de allí e lo inyectará en la vista. En segundo lugar, para procesar la lógica comercial de esta vista, vaya a "AddEventController". 2. Esta sección de código significa que cuando el usuario hace clic en la etiqueta href "DisplayEvent" que se definió anteriormente en la etiqueta div. Irá a la página web show_event.html, tomará el código de allí y lo inyectará en la vista. En segundo lugar, para procesar la lógica comercial de esta vista, vaya a "ShowDisplayController". 3. Esta sección de código significa que la vista predeterminada que se muestra al usuario es la vista DisplayEvent var sampleApp = angular.module('sampleApp', ['ngRoute']);  sampleApp.config(['$routeProvider', function(SrouteProvider) { when('/NewEvent', { templateUrl: 'add_event.html', controller: 'AddEventController' }) . when('/DisplayEvent', {  templateUrl: 'show_event.html', controller: 'ShowDisplayController' }) .

www.full-ebook.com  

otherwise({ redirectTo: }); }]);

 

Paso 4) Lo siguiente es agregar controladores para procesar la lógica de negocios para las funciones "DisplayEvent" y "Add New Event". Simplemente estamos agregando una variable de mensaje a cada objeto de alcance para cada controlador. Este mensaje se mostrará cuando se muestre la vista adecuada al usuario. sampleApp.controller('AddEventController', function($scope) { $scope.message = 'This is to Add a new Event'; }); sampleApp.controller('ShowDisplayController', function($scope) {  $scope.message = 'This is display an Event'; });

paso 5) Crea páginas llamadas add_event.html y show_event.html. Mantenga las páginas simples como se muestra a continuación. 1. En nuestro caso, la página add_event.html tendrá una etiqueta de encabezado junto con el texto "Agregar nuevo evento" y una expresión para mostrar el mensaje "Esto es para agregar un nuevo evento". 2. Del mismo modo, la página show_event.html también tendrá una etiqueta de encabezado para mantener el texto "Mostrar evento" y también tendrá una expresión de mensaje para mostrar el mensaje "Esto es para mostrar un evento". 3. El valor de la variable de mensaje se inyectará en función del controlador que se adjunta a la vista. Para cada página, vamos a agregar la variable de mensaje, que se inyectará desde cada controlador respectivo.

www.full-ebook.com  

add_event.html

show_event.html

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

www.full-ebook.com  

Desde la salida podemos notar 2 cosas 1. La barra de direcciones realmente reflejará cuál es la vista actual que se muestra. Entonces, como la vista por defecto es para mostrar la pantalla Mostrar evento, la barra de direcciones muestra la dirección para "DisplayEvent". 2. Esta sección es la Vista, que se crea sobre la marcha. Como la vista predeterminada es Show Event one, esto es lo que se muestra al usuario. Ahora haga clic en el enlace Agregar nuevo evento en la página que se muestra. Ahora obtendrá la siguiente salida

www.full-ebook.com  

Salida: 1. La barra de direcciones ahora reflejará que la vista actual ahora es la vista "Agregar nuevo Observe quenueva todavía estará la misma página de la aplicación. Noevento". se lo dirigirá a una página deen aplicación. 2. Esta sección es la Vista, Vista, y ahora cambiará para mostrar el HTML para la funcionalidad "Agregar nuevo evento". Ahora, en esta sección, se muestra al usuario la etiqueta de encabezado "Agregar nuevo evento" y el texto "Esto es para agregar un nuevo evento".

www.full-ebook.com  

Capítulo 6: Expresiones Las expresiones son las más comunes utilizadas en Angular JS, y las verías en nuestros capítulos anteriores. Básicamente son las variables que se definieron en las llaves dobles {{}}. Estos se usaron para inyectar valores que se definieron dentro del contetroller. En este capítulo, veremos los conceptos básicos de expresión y los tipos de variables que podemos definir en una expresión.

www.full-ebook.com  

Explique las expresiones de Angular.js Angular.js con el ejemplo Las expresiones AngularJS son aquellas que están escritas dentro de dobles llaves {{expression}}.

Sintaxis: Un ejemplo simple de una expresión es {{5 + 6}}.

Las expresiones Angular.JS se utilizan para vincular datos a HTML de la misma manera que la directiva ng-bind. AngularJS muestra los datos exactamente en el lugar donde se coloca la expresión. Veamos un ejemplo de expresiones Angular.JS. En este ejemplo, solo queremos mostrar una adición simple de números como una expresión. Guru99 Global Event Addition : {{ 6+9 }}

Explicación del código:

www.full-ebook.com  

1. La directiva ng-app en nuestro ejemplo está en blanco como se muestra en la captura de pantalla anterior. Esto solo significa que no hay ningún módulo para asignar controladores, directivas ni servicios adjuntos al código. 2. Estamos agregando una expresión simple que mira la adición de 2 números. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida, Se puede ver claramente que se produce la suma de los dos números 9 y 6 y se muestra el valor agregado de 15.

www.full-ebook.com  

Números Angular.JS Las expresiones se pueden usar para trabajar con números también. Veamos un ejemplo de expresiones Angular.JS con números. En este ejemplo, solo queremos mostrar una multiplicación simple de 2 variables numéricas llamadas margen y beneficio y mostrar su valor multiplicado. Guru99 Global Event  

Total Profir margin

  {{ margin*profit }}

Explicación del código: 1. La directiva ng-init se usa en angular.js angular.js para definir variables y sus valores correspondientes en la vista misma. Es algo así como definir variables locales para codificar en cualquier lenguaje de programación. En este caso, estamos definiendo 2 variables llamadas margen y ganancia y les asignamos valores. 2. valores. Entonces estamos usando las 2 variables locales y multiplicando sus

www.full-ebook.com  

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida, Se puede ver claramente que se produce la multiplicación de los 2 números 2 y 200, y se muestra el valor multiplicado de 400.

www.full-ebook.com  

Cadenas AngularJS

Las expresiones se pueden usar para trabajar con cadenas también. Veamos un ejemplo de expresiones angulares JS con cadenas. En este ejemplo, vamos a definir 2 cadenas de "firstName" y "lastName" y las mostraremos usando expresiones en consecuencia. Guru99 Global Event First Name : {{ firstName }} Last Name : {{ lastName }}

Explicación del código: 1. La directiva ng-init se usa para definir las variables firstName con el valor "Guru" y la variable lastName con el valor "99". 2. Estamos utilizando expresiones de {{firstName}} y {{lastName}} para acceder al valor de estas variables y mostrarlas en la vista en consecuencia. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

www.full-ebook.com  

A partir de la salida, se puede ver claramente que los valores de firstName y lastName se muestran en la pantalla.

www.full-ebook.com  

Objetos Angular.JS Las expresiones también se pueden usar para trabajar con objetos JavaScript. Veamos un ejempl ejemploo de expresiones Angular.JS con objetos javascript. Un objeto avascript consiste en un par nombre-valor. A continuación se muestra un ejemplo de la sintaxis de un objeto javascript.

Sintaxis: var car = {type:"Ford", model:"Explorer", color:"White"};

En este ejemplo, vamos a definir un objeto como una persona objeto que tendrá 2 pares de valores clave de "firstName" y "lastName". Guru99 Global Event   First Name : {{ person.firstName}} Last Name :{{ person.lastName }}

Explicación del código: 1. La directiva ng-init se usa para definir la persona objeto que a su vez tiene pares de valor clave de firstName con el valor "Guru" y la variable

www.full-ebook.com  

lastName con el valor "99". 2. Estamos utilizando expresiones de {{person.firstName}} y {{person.secondName}} para acceder al valor de estas variables y mostrarlas en la vista en consecuencia. Dado que las variables miembro reales son parte de la persona objeto, tienen que acceder a ella con la notación de punto (.) Para acceder a su valor real. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida, Se puede ver claramente que los valores de "firstName" y "secondName" se muestran en la pantalla.

www.full-ebook.com  

Matrices AngularJS

Las expresiones se pueden usar para trabajar con arreglos también. Veamos un ejemplo de expresiones angulares JS con matrices. En este ejemplo, vamos a definir una matriz que mantendrá las notas de un alumno en 3 materias. En la vista, mostraremos el valor de estas marcas en consecuencia. Event Registration   var app = angular.module('DemoApp',[]);   app.controller('DemoController', function($scope) {   $scope.tutorialName = "Angular JS"; }) ;

www.full-ebook.com  

Explicación del código: 1. Aquí estamos pasando una cadena, que es una combinación de caracteres en minúscula y mayúscula en una variable miembro llamada "tutorialName" y adjuntándola al objeto de ámbito. El valor de la cadena que se pasa es "AngularJS". 2. Estamos usando la variable miembro "tutorialName" y colocando un símbolo de filtro (|) que básicamente significa que la salida necesita ser modificada usando un filtro. Luego usamos la palabra clave minúscula para decir que usemos el filtro incorporado para mostrar la cadena completa en minúsculas. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador. Salida:

www.full-ebook.com  

De la salida Se puede ver claramente que se ha ejecutado la cadena "AngularJS" que se pasó en la variable tutorialName que era una combinación de caracteres en minúscula y mayúscula. Después de la ejecución, la salida final está en minúsculas como se muestra arriba. 2. Mayúsculas: este filtro es similar al filtro en minúsculas, la diferencia es que toma una salida de cadena y formatea la cadena y muestra todos los caracteres de la cadena como mayúsculas. Gur99 Global Event   Tutorial Name :   This tutorial is {{tutorialName | uppercase}}   This tutoriallD is {{tutorialprice | currency}}   var app = angular.module('DemoApp',[]);   app.controller('DemoController', function($scope) {   $scope . tutorialprice = 20.56;   });  

Explicación del código: 1. Aquí estamos pasando un número en una variable miembro llamado precio tutorial y adjuntándolo al objeto de ámbito. 2. Estamos utilizando la variable miembro tutorialprice y colocando un símbolo de filtro (|) junto con el filtro de moneda. Tenga en cuenta que la moneda que se aplica depende de la configuración de idioma que se aplica en la máquina.

www.full-ebook.com  

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida Se puede ver claramente que el símbolo de moneda se ha agregado al número que se aprobó en el precio de la variable tutorial. En nuestro caso, dado que la configuración de idioma es inglés (Estados Unidos), el símbolo $ se inserta como moneda. 5.  json: este filtro formatea una entrada de tipo JSON y aplica el filtro JSON para proporcionar la salida en JSON. En el siguiente ejemplo, usaremos un controlador para enviar un objeto tipo JSON a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para aplicar el filtro JSON.

www.full-ebook.com  

 

This tutorial is {{tutorial | json}}

var app = angular.module('DemoApp',[]);   app.controller('DemoController', function($scope) $scope.tutorial={TutoriallD:12,TutorialName:"Angular"});

Explicación del código: 1. Aquí estamos pasando un número en una variable miembro llamado "tutorial" y adjuntándolo al objeto de ámbito. Esta variable miembro contiene una cadena de tipo JSON de ID de tutorial: 12 y TutorialName: "Angular". 2. Estamos utilizando el tutorial de variables miembro y colocando un símbolo de filtro (|) junto con el filtro JSON. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

www.full-ebook.com  

De la salida, Se puede ver claramente que la cadena similar a JSON se analiza y muestra un objeto JSON adecuado en el navegador.

www.full-ebook.com  

Filtro personalizado en Angularjs

A veces, los filtros incorporados en Angular no pueden cumplir con las necesidades o los requisitos para filtrar la salida. En tal caso, se puede crear un filtro personalizado que puede pasar la salida de la manera requerida. En el ejemplo siguiente, vamos a pasar una cadena a la vista desde el controlador a través del objeto de ámbito, pero no queremos que la cadena se muestre tal como está. En realidad, queremos asegurarnos de que cada vez que mostramos la cadena, pasamos un filtro personalizado que agregará otra cadena y mostrará la cadena completa al usuario. /

Tutorial Name : {{ TutorialName}}  

Explicación del código: 1. La directiva ng-init se agrega a nuestra etiqueta div para definir una variable local llamada "TutorialName" y el valor dado a esto es

www.full-ebook.com  

"AngularJS". 2. Estamos utilizando expresiones en AngularJs para mostrar el resultado del nombre de la variable "TutorialName" que se definió en nuestra directiva ng-init. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

En la salida, El resultado muestra claramente el resultado de la expresión que contiene la cadena "AngularJS". Esto se debe a que la cadena "AngularJS" está asignada a la variable 'TutorialName' en la sección ng-init.

www.full-ebook.com  

3. ng-model - Y finalmente tenemos la directiva ng-model, que se utiliza para vincular el valor de un control HTML a los datos de la aplicación. El siguiente ejemplo muestra cómo usar la directiva ng-model. En este ejemplo, Vamos a crear 2 variables llamadas "cantidad" y "precio". Estas variables van a estar vinculadas a 2 controles de entrada de texto. Luego vamos a mostrar el monto total basado en la multiplicación de los valores de precio y cantidad. Topic details 33Directives Topic details

 



www.full-ebook.com  

   



 

Paso 2) En la función de servicio routeprovider, agregue: topicId para indicar que cualquier parámetro pasado en la URL después de la ruta debe asignarse a la variable topicId. var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/Angular/:topicld', { templateUrl: 'Angular.html', controller: 'AngularController' }) }]);  

Paso 3) Agregue el código necesario al controlador 1. Asegúrese de agregar primero "$ routeParams" como parámetro al definir la función del controlador. Este parámetro tendrá acceso a todos los parámetros de ruta aprobados en la URL. 2. El parámetro "routeParams" tiene una referencia al objeto topicId, que se pasa como un parámetro de ruta. Aquí estamos adjuntando la variable '$ routeParams.topicId' a nuestro objeto de ámbito como la variable '$ scope.tutotialid'. Esto se está haciendo para que pueda ser referenciado en nuestra vista a través de la variable tutorialid. sampleApp.controller('AngularController',

function($scope,$routeParams) {

www.full-ebook.com  

$scope.tutorialid=$routeParams.topicld; });  

Paso 4) Agregue la expresión para mostrar la variable tutorialid en la página Angular.html. Angular {{tutorialid}}

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

En la pantalla de salida,

Si hace clic en el enlace Detalles del tema para el primer tema, el número 1 se agrega a la URL.

www.full-ebook.com  

Este número será luego tomado como un argumento "routeparam" por el servicio del proveedor de rutas Angular.JS y nuestro controlador podrá acceder a él.

www.full-ebook.com  

Usando el servicio Angular $ route El servicio $ route le permite acceder a las propiedades de la ruta. El servicio $ route está disponible como parámetro cuando la función está definida en el controlador. La sintaxis general de cómo el parámetro $ route está disponible desde el controlador se muestra a continuación; myApp.controller('MyController',function($scope,$route) 1. myApp es el módulo angular.JS definido para sus aplicaciones 2. MyController es el nombre del controlador definido para su aplicación 3. Al igual que la variable $ scope está disponible para su aplicación, que se utiliza para pasar información del controlador a la vista. El parámetro $ route se usa para acceder a las propiedades de la ruta. Echemos un vistazo a cómo podemos usar el servicio $ route.

En este ejemplo, Vamos a crear una variable personalizada simple llamada "mytext", que contendrá la cadena "This is angular". Vamos a adjuntar esta variable a nuestra ruta. Y luego vamos a acceder a esta cadena desde nuestro controlador usando el servicio $ route y luego usaremos el objeto de alcance para mostrar eso en nuestra vista. Entonces, veamos los pasos que debemos llevar a cabo para lograr esto.

Paso 1) Agregue un par de clave-valor personalizado a la ruta. Aquí, estamos

agregando una clave llamada mytext y le asignamos un valor de Esto es angular".

www.full-ebook.com  

sampleApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/Angular/:topicld', { mytext:"This is angular", templateUrl: 'Angular.html', controller: 'AngularControll

})

Paso 2) Agregue el código relevante al controlador 1. Agregue el parámetro $ route a la función del controlador. controlador. El parámetro $ route es un parámetro clave definido en angular, que permite acceder a las propiedades de la ruta. 2. Se puede acceder a la variable "mytext" que se definió en la ruta a través de la referencia $ route.current. Esto se asigna a la variable 'texto' del objeto de alcance. A continuación, se puede acceder a la variable de texto desde la vista en consecuencia. sampleApp.controller('AngularController', function($scope,$routeParams/$route) { $scope.tutorialid=$routeParams.topicld; $scope.text=$route.current.mytext; });  

Paso 3) Agregue una referencia a la variable de texto del objeto de ámbito como una expresión. Esto se agregará a nuestra página Angular.html como se muestra a continuación. Esto provocará que el texto "Esto es angular" se inyecte en la vista. La

expresión mostrará el{{tutorialid}} número '1'. es la misma que la vista en el tema anterior y

www.full-ebook.com  

Angular { {text}} { {tutorialid}}

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida, Podemos ver que el texto "Esto es angular" también se muestra cuando hacemos clic en cualquiera de los enlaces de la tabla. La identificación del tema también se muestra al mismo tiempo que el texto.

www.full-ebook.com  

Habilitar el enrutamiento HTML5 El enrutamiento HTML5 se usa básicamente para crear una URL limpia. Significa la eliminación del hashtag de la URL. Entonces, las URL de enrutamiento cuando se utiliza el enrutamiento HTML5 aparecerán como se muestra a continuación Sample.html/Angular/1 Sample.html/Angular/2 Sample.html/Angular/3 Este concepto se conoce normalmente como la presentación de URL bonita para el usuario. Hay dos pasos principales que deben llevarse a cabo para el enrutamiento HTML5. 1. Configurando $ locationProvider 2. Estableciendo nuestra base para enlaces relativos Veamos detalles de cómo llevar a cabo los pasos mencionados anteriormente en nuestro ejemplo anterior

Paso 1) Agregue el código relevante al módulo angular 1. Agregue una constante baseURL a la aplicación: esto es necesario para el enrutamiento HTML5 para que la aplicación sepa cuál es la ubicación base de la aplicación.

2. Agregue los servicios $ locationProvider. locationProvider. Este servicio le permite definir el html5Mode.

www.full-ebook.com  

3. Establezca el html5Mode del servicio $ locationProvider en verdadero. var sampleApp = angular.module('sampleApp',['ngRoute']); sampleApp.constant("baseUrl", "http://localhost:63342/untitled/Sample.html/Angular"); sampleApp.config(function($routeProvider,$locationProvider){    

$routeProvider. when('/Angular/:topicld', { mytext:"This is angular", templateUrl: 'Angular.html', controller: 'AngularController'

      $locationProvider.html5Mode(true);

sampleApp.controller('AngularController',function($scope,$routeP arams,$route) {  

Paso 2) Elimine todas las # etiquetas de los enlaces ('Angular / 1', 'Angular  / 2', 'Angular / 3') para crear una URL fácil de leer.       #Angular JS topicDescription                  



llControllers Topic details 22Models Topic details

   

33Directives Topic details

www.full-ebook.com  

 

 

Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador.

Salida:

De la salida, Puede ver que la etiqueta # no está allí cuando accede a la aplicación.

Resumen El enrutamiento se usa para presentar diferentes vistas al usuario en la misma página web. Este es básicamente el concepto utilizado en las aplicaciones de una sola página que se implementan para casi todas las

aplicaciones web de hoy en día.

www.full-ebook.com  

Se puede configurar una ruta predeterminada para el enrutamiento angular.JS. Se usa para determinar cuál será la vista predeterminada que se mostrará al usuario Los parámetros se pueden pasar a la ruta a través de la URL como parámetros de ruta. A continuación, se accede a estos parámetros utilizando el parámetro $ routeParams en el controlador El servicio $ route se puede usar para definir pares clave-valor personalizados en la ruta, que luego se puede acceder desde la vista El enrutamiento HTML5 se usa para eliminar el #tag de la URL de enrutamiento en angular para formar una bonita URL

www.full-ebook.com  

Capítulo 12: AngularJS http, Ajax AJAX es la forma abreviada de Asynchronous JavaScript and XML. AJAX fue diseñado principalmente para actualizar partes de una página web, sin tener que volver a cargar toda la página. El motivo para diseñar esta tecnología era reducir la cantidad de viajes redondos que se realizaban entre el cliente y el servidor y la cantidad de actualizaciones de páginas enteras que solían tener lugar cada vez que un usuario requería determinada información. AJAX permitió que las páginas web se actualizaran de forma asíncrona intercambiando pequeñas cantidades de datos con el servidor detrás de escena. Esto significaba que era posible actualizar partes de una página web, sin volver a cargar toda la página. Muchas aplicaciones web de hoy en día realmente siguen esta técnica para refrescar la página u obtener datos del servidor. En el ejemplo anterior

www.full-ebook.com  

Interacciones de alto nivel con servidores que usan $ recurso Angular proporciona dos API diferentes para manejar solicitudes Ajax. Son $ recurso $ http Veremos la propiedad "$ recurso" en Angular, que se usa para interactuar con servidores de alto nivel. Cuando hablamos de interactuar en un nivel superior, significa que solo nos molestará lo que el servidor tiene que ofrecer en términos de funcionalidad, y no sobre qué hace exactamente el servidor en detalle con respecto a esta funcionalidad. Por ejemplo, si el servidor aloja una aplicación que mantiene la información del empleado de una determinada empresa, el servidor podría exponer la funcionalidad a clientes como GetEmployeeDetails, SetEmployeeDetails, etc. Entonces, en un nivel alto, sabemos lo que estas 2 funciones pueden hacer, y podemos invocarlas usando la propiedad $ resource. Pero entonces no sabemos exactamente los detalles de "GetEmployeeDetails" y las "funciones de SetEmployeeDetails", y cómo se implementa. La explicación anterior explica lo que se conoce como una arquitectura basada en REST RE ST.. REST se conoce básicamente como Representational State Transfer, que es

una arquitectura seguida en muchos sistemas modernos basados en web.

www.full-ebook.com  

Significa que puede usar los verbos HTTP normales de GET, GET, POST POST,, PUT y DELETE para trabajar con una aplicación basada en web. Asumamos que tenemos una aplicación web que mantiene una lista de eventos. Si quisiéramos llegar a la lista de todos los eventos, La aplicación web puede exponer una URL como http: // example / events y Podemos usar el verbo "OBTENER" para obtener la lista completa de eventos si la aplicación sigue una arquitectura basada en REST. Entonces, por ejemplo, si hubo un Evento con una ID de 1, entonces podemos obtener los detalles de este evento a través de la URL.http: // example / events / 1

¿Cuál es el objeto $ resource El objeto $ resource en Angular ayuda a trabajar con servidores que sirven aplicaciones en una arquitectura REST. La sintaxis básica de la declaración de @resource junto con las diversas funciones se dan a continuación

Syntax of @resource statement var resource Object = $resource(url); Una vez que tenga el resourceObject a la mano, puede usar las siguientes funciones para realizar las llamadas REST requeridas. 1. get([params], [success], [error]) – Esto se puede usar para hacer la llamada GET estándar. 2. save([params], postData, [success], [error]) -Esto se puede usar para hacer la llamada POST estándar.

3. query([params], [success], [error]) - Esto se puede usar para hacer la llamada GET estándar, pero se devuelve una matriz como parte de la respuesta.

www.full-ebook.com  

4. remove([params], postData, [success], [error]) - Esto se puede usar para hacer la llamada DELETE estándar. En todas las funciones que figuran a continuación, el parámetro 'params' puede usarse para proporcionar los parámetros necesarios, que deben pasarse en la URL. Por ejemplo, Supongamos que pasa un valor de Tema: 'Angular' como 'param' en la función get como get ('http: // example / events', '{Topic:' Angular '}') La URL http: // example / events? Topic = Angular se invoca como parte de la función get.

Cómo usar la propiedad $ resource Para usar la propiedad $ resource, se deben seguir los siguientes pasos:

Paso 1) El archivo "angular-resource.js" debe descargarse del sitio Angular.JS y debe colocarse en la aplicación. Paso 2) El módulo de la aplicación debe declarar una dependencia en el módulo "ngResource" para usar $ resource. En el siguiente ejemplo, estamos llamando al módulo "ngResource" desde nuestra aplicación 'DemoApp'. angular.module (DemoApp, ['ngResource']); // DemoApp es nuestro módulo principal

Paso 3) Llamar a la función $ resource () con su punto final REST, como se muestra en el siguiente ejemplo. Si hace esto, el objeto $ resource tendrá la capacidad de invocar la funcionalidad

necesaria expuesta por los puntos finales REST.

www.full-ebook.com  

El siguiente ejemplo llama a la URL del punto final: http://example/events/1 angular.module('DemoApp.services').factory('Entry', function($resource)   {   return $resource('/example/Event/:1); // Note the full endpoint address   });

En el ejemplo anterior, se están haciendo las siguientes cosas 1. Al definir la aplicación angular, se está creando un servicio utilizando la declaración 'DemoApp.services', donde DemoApp es el nombre dado a nuestra aplicación angular. 2. El método .factory se usa para crear los detalles de este nuevo servicio. 3. 'Entrada' es el nombre que le damos a nuestro servicio, que puede ser cualquier nombre que desee proporcionar. 4. En este servicio, estamos creando una función que llamará $ api de recursos 5. $ resource ('/ example / Event /: 1). 6. final La función es unREST servicio que se utilizauna paraURL. llamar punto REST.$Elresource punto final es normalmente Enalaunfunción anterior, estamos utilizando la URL (/ ejemplo / Evento /: 1) como nuestro punto final REST. Nuestro punto final REST (/ ejemplo / Evento /: 1) básicamente denota que hay una aplicación Evento en nuestro sitio principal "ejemplo". Esta aplicación de evento se desarrolla utilizando una arquitectura basada bas ada en REST. 7. El resultado de la llamada de función es un objeto de clase de recurso. El objeto de recurso ahora tendrá las funciones (get (), query (), save (),

remove (), delete ()) que se pueden invocar.

www.full-ebook.com  

Paso 4) Ahora podemos usar los métodos que fueron devueltos en el paso anterior (que son get (), query (), save (), remove (), delete ()) en nuestro controlador. En el siguiente fragmento de código, estamos usando la función get () como ejemplo Miremos el código que puede hacer uso de la función get (). angular.module('DemoApp.controllers',[]);   angular.module('DemoApp.controllers').controller('DemoController',f unction($scope, MyFunction) {   var obj = MyFunction.get({ 1: $scope.id }, function() {   console.log(obj);   });

En el paso anterior, La función get ()/:en1.el fragmento de arriba emite una solicitud GET a / example / Event El parámetro: 1 en la URL se reemplaza por $ scope.id. La función get () devolverá un objeto vacío que se completará automáticamente cuando los datos reales provengan del servidor. El segundo argumento para get () es una devolución de llamada que se ejecuta cuando los datos llegan del servidor. El posible resultado de todo el código sería un objeto JSON que devolvería la lista de Eventos expuestos desde el sitio web "ejemplo".

Un ejemplo de lo que se puede devolver se muestra a continuación

www.full-ebook.com  

  {   { 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},   { 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},   { 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}   }

En el ejemplo anterior

www.full-ebook.com  

Interacciones de servidor de bajo nivel con $ http El $ http es otro servicio Angular JS que se utiliza para leer datos de servidores remotos. La forma más popular de datos que se leen de los servidores son los datos en el formato JSON. Supongamos que tenemos una página PHP (http:  //example/angular/getTopics.PHP)  //example/angular/getT opics.PHP) que devuelve los siguientes datos JSON   "Topics": [   {   "Name" : "Controllers",   "Description" : "Controllers in action"   },   {   "Name" : "Models",   "Description" : "Binding data using Models"

  },

www.full-ebook.com  

  {   "Name" : "Directives",   "Description" : "Using directives in Angular"   }   ]

Miremos el código AngularJS usando $ http, que puede usarse para obtener los datos anteriores del servidor     var app = angular.module('myApp', []);   app.controller('AngularCtrl', function($scope, $http) {   $http.get("http://example/angular/getTopics.PHP")   .then(function(response)   {   $scope.names = response.data.records;});   });

 

www.full-ebook.com  

En el ejemplo anterior 1. Estamos agregando el servicio $ http a nuestra función de Controlador, para que podamos usar la función "obtener" del servicio $ http 2. Ahora estamos usando la función get del servicio HTTP para obtener los objetos JSON de la URLhttp: // example /angular/getTopics.PHP 3. En función del objeto 'respuesta', estamos creando una función de devolución de llamada que devolverá los registros de datos y, posteriormente, los almacenaremos en el objeto $ scope. 4. Entonces podemos usar la variable $ scope.names del controlador y usarla en nuestra vista para mostrar los objetos JSON en consecuencia.

www.full-ebook.com  

Obteniendo datos del servidor que ejecuta SQL y MySQL

www.full-ebook.com  

Angular también se puede usar para obtener datos de un servidor que ejecuta MySQL o SQL.

www.full-ebook.com  

La idea es que si tiene una página PHP conectada a una base de datos MySQL o una página ASP.Net conectada a una base de datos de servidor MS SQL, entonces necesita asegurarse de que tanto la página PHP como la ASP.Net ASP.Net visualicen los datos en formato JSON.

www.full-ebook.com  

Supongamos que tenemos un sitio PHP (http://example/angular/getTopics.PHP) que sirve datos de una base de datos MySQL o SQL.

www.full-ebook.com  

Paso 1) El primer paso es asegurarse de que la página PHP toma los datos de una base de datos MySQL y sirve los datos en formato JSON.

www.full-ebook.com  

Paso 2) Escriba el código similar que se muestra arriba para usar el servicio $ http para obtener los datos JSON.

www.full-ebook.com  

Miremos el código AngularJS usando $ http que puede usarse para obtener los datos anteriores del servidor

www.full-ebook.com  

 

var app = angular.module('myApp', []);

 

app.controller('AngularCtrl', function($scope, $http) {

 

$http.get("http://example /angular/getTopics.PHP")

 

.then(function(response)

 

{

 

$scope.topics = response.data.records;});

   

});

 

Paso 3) Renderice los datos en su vista usando la directiva ng-repeat. A continuación, usamos la directiva ng-repeat para ir a través de cada uno de los pares clave-valor en los objetos JSON devueltos por el método "get" del servicio $ http. Para cada objeto JSON, estamos mostrando la clave que es "Nombre" y el valor es "Descripción".  



 



 

{{ x.Name }}

 

{{ x.Description }}

 



 



   



www.full-ebook.com  

Resumen: Hemos echado un vistazo a lo que es una arquitectura RESTFUL, que no es más que una funcionalidad expuesta por aplicaciones web basadas en los verbos HTTP normales de GET, POST, PUT y DELETE. El objeto $ resource se usa con Angular para interactuar con las aplicaciones web RESTFUL a un alto nivel, lo que significa que solo invocamos la funcionalidad expuesta por la aplicación web, pero realmente no nos preocupamos de cómo se implementa la funcionalidad. También miramos el servicio $ http que se puede utilizar para obtener datos de una aplicación web. Esto es posible porque el servicio $ http tiene la capacidad de trabajar con aplicaciones web a un nivel más detallado. Debido a la potencia del servicio $ http, esto se puede utilizar para obtener datos de un MySQL o MS SQL Server a través de una aplicación PHP. PHP. Los datos se pueden representar en una tabla utilizando la directiva ng-repeat.

www.full-ebook.com  

Capítulo 13: Tabla Las tablas son uno de los elementos comunes utilizados en HTML cuando se trabaja con páginas web. Las tablas en HTML están diseñadas con la etiqueta HTML 1. Etiqueta : esta es la etiqueta principal utilizada para mostrar la tabla. 2. - Esta etiqueta se usa para segregar las filas dentro de la tabla. 3. - Esta etiqueta se usa para mostrar los datos reales de la tabla. 4. - Esto se usa para los datos del encabezado de tabla. Al usar las etiquetas HTML disponibles junto con AngularJS, podemos facilitar el llenado de los datos de la tabla. En resumen, la directiva ng-repeat se utiliza para completar los datos de la tabla. Veremos cómo log lograr rar esto durante el transcurso de este capítulo. También veremos cómo podemos usar los filtros orderby y mayúsculas junto con el uso del atributo $ index para visualizar índices de tabla angular.

www.full-ebook.com  

Mostrar datos en una tabla Como comentamos en la introducción de este capítulo, la base para crear la estructura de tabla en una página HTML sigue siendo la misma. La estructura de la tabla todavía se crea utilizando las etiquetas HTML normales de , , y . Sin embargo, los datos se completan utilizando la directiva ng-repeat en AngularJS. Veamos un ejemplo simple de cómo podemos implementar tablas angulares. En este ejemplo, Vamos a crear una tabla angular que tendrá temas de curso junto con sus descripciones.

Paso 1) Primero vamos a agregar una etiqueta de "estilo" a nuestra página HTML, para que la tabla se muestre como una tabla adecuada.  



   

Event Registration

 

table, th , td { border: lpx solid grey; padding: 5px;}

 

1. La etiqueta de estilo se agrega a la página HTML. Esta es la forma estándar de agregar cualquier atributo de formato que se requiera para los elementos

HTML. 2. Estamos agregando 2 valores de estilo para nuestra tabla.

www.full-ebook.com  

3. Una es que debería haber un borde sólido para nuestra mesa Angular y 4. En segundo lugar, debe haber un relleno implementado para nuestros datos de tablas angulares.

Paso 2) El siguiente paso es escribir el código para generar la tabla y sus datos. Gur99 Global Event            

{{ ptutor.Name }} {{ ptutor.Description }}

  var app = angular.module('DemoApp', []);   app.controller('DemoController', function($scope) {   $scope.tutorial =[   {Name: "Controllers" , Description : "Controllers in action"}, {Name: "Models" ,   Description : "Models and binding data"}, {Name: "Directives" , Description : "Flexibility of Directives"} ]  

Explicación del código: 1. Primero estamos creando una variable llamada "tutorial" y le asignamos algunos pares de valores clave en un solo paso. Cada par de valores

clave se usará como datos cuando se muestre la tabla. La variable

www.full-ebook.com  

tutorial se asigna al objeto de alcance para que se pueda acceder desde nuestra vista. 2. Este es el primer paso para crear una tabla, y usamos la etiqueta 3. . Para cada fila de datos, estamos utilizando la "directiva ng-repeat". Esta directiva pasa por cada par clave-valor en el objeto del alcance del tutorial utilizando la variable ptutor. 4. Finalmente, estamos usando la etiqueta junto con los pares de valores clave (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla angular. Si el código se ejecuta con éxito, se mostrará el siguiente resultado cuando ejecute su código en el navegador. Salida:

www.full-ebook.com  

Del resultado anterior, Podemos ver que la tabla se muestra correctamente con los datos de la matriz de pares clave-valor definidos en el controlador. Los datos de la tabla se generaron yendo a través de cada uno de los pares de valores clave usando la directiva "ng-repeat".

www.full-ebook.com  

Mostrar con ordenBy Filtro y filtro en mayúsculas Es muy común usar los filtros incorporados dentro de AngularJS para cambiar la forma en que se muestran los datos dentro de las tablas. Ya hemos visto filtros en acción en un capítulo anterior. Hagamos una recapitulación rápida de los filtros antes de continuar. En Angular, los filtros JS se usan para formatear el valor de una expresión antes de que se muestre al usuario. Un ejemplo de filtro es el filtro 'mayúscula' que toma una salida de cadena y formatea la cadena y muestra todos los caracteres de la cadena como mayúsculas. Entonces en el ejemplo de abajo, si el valor de la variable 'TutorialName' es 'AngularJS', el resultado de la expresión siguiente será 'ANGULARJS'. {{TurotialName | mayúscula}} En esta sección, veremos cómo los filtros orderBy y mayúsculas se pueden usar en las tablas con más detalle. 1. OrderBy Filter - Este filtro se utiliza para ordenar la tabla según una de las columnas de la tabla. En el ejemplo anterior, la salida para nuestros datos de tablas angulares apareció como se muestra a continuación. Controladores

Controladores en acción

Modelos

Modelos y datos vinculantes

Directivas

Flexibilidad de directivas

www.full-ebook.com  

Veamos un ejemplo, sobre cómo podemos usar el filtro "orderBy" y ordenar los datos de la tabla angular usando la primera columna de la tabla.