Cómo construir una aplicación de correo en Angular

Cuando actualice, debería ver el valor dentro de los corchetes:

Las expresiones le permiten incrustar JavaScript directamente en su HTML. (Técnicamente no es JavaScript, pero ese es un tema para otro momento). En el mundo real, no tendría sentido usar una expresión solo para mostrar una string , lo estoy haciendo aquí para introducir el concepto.

Básicamente, angular ejecuta el código dentro de las llaves dobles y muestra el resultado. Si, por ejemplo, reemplazó esa expresión con:

Ocultar código de copia

{{“Guinan” + “” + “Smith”}}

Si reemplazó la expresión con:

Ocultar código de copia

{{10 * 3}}

Obtendrías:

Una vez más, estos no son ejemplos del mundo real, no tendría sentido usar un expreso que se multiplique 10 veces 3 ya que ya sabemos la respuesta. La verdadera diversión es cuando comenzamos a usar expresiones con datos.

Entonces, sigamos haciendo que esta tabla sea impulsada por datos. Ahora ya usamos el atributo ng-app para que angular sepa qué parte del HTML procesar. Angular llama a estas directivas. Ahora vamos a usar el atributo ng-init para inicializar algunos datos, luego actualizar una de las filas para usar esos datos.

Podemos usar este atributo en cualquier lugar. Voy a ponerlo en la etiqueta

. Entonces mi etiqueta

ve así:

Ocultar código de copia

Ahora voy a actualizar la primera fila de mi tabla para usar esos datos. De esto:

Ocultar código de copia

{{10 * 3}}

Es una bebida de la Tierra. Jugo de ciruela.

24 de diciembre

A esto:

Ocultar código de copia

{{email.from}}

{{email.subject}}

{{email.date}}

Y cuando lo ejecuto, obtengo esto:

Ahora, en lugar de un correo electrónico, hagamos una serie de correos electrónicos, luego visualicemos una fila para cada correo electrónico. Para hacer eso, tendremos que cambiar nuestro ” ng-init ” para que cree una matriz, luego usar otra directiva angular para repetir la fila HTML para cada correo electrónico. Para hacer eso, usamos otra directiva llamada ” ng-repeat “.

Entonces cambie el ng-init a:

Ocultar código de copia

<tbody ng-init = "
correos electrónicos = [
{de: ‘John’, asunto: ‘Me encanta angular’, fecha: ‘1 de enero’},
{de: ‘Jack’, asunto: ‘Angular y yo solo somos amigos’, fecha: ’15 de febrero’},
{de: ‘Ember’, asunto: ‘¡Te odio Angular!’, fecha: ‘8 de diciembre’}
]
“>

Luego agregue el siguiente atributo y valor ng-repeat a la etiqueta

:

Ocultar código de copia

ng-repeat = “correo electrónico en correos electrónicos”

Para que se vea así:

Ocultar código de copia

Cuando lo ejecutes, deberías obtener esto:

Ahora tenemos una tabla generada dinámicamente. El problema es que todos los datos están en el HTML, de qué sirve eso, arreglemos eso.

Vamos a obtener el código que inicializa la matriz de correos electrónicos fuera del HTML a donde pertenece en el JavaScript. Para hacer esto, tendremos que crear una función especial que Angular llama un controlador. Luego, usaremos la directiva ng-controller para asociar ese controlador con una parte del HTML, similar a lo que hicimos con ng-app .

Entonces agregue el siguiente código a su JavaScript:

Ocultar código de copia

función EmailController ($ scope) {
$ scope.emails = [
{de: ‘John’, asunto: ‘Me encanta angular’, fecha: ‘1 de enero’},
{de: ‘Jack’, asunto: ‘Angular y yo solo somos amigos’, fecha: ’15 de febrero’},
{de: ‘Ember’, asunto: ‘¡Te odio Angular!’, fecha: ‘8 de diciembre’}
];
}

Luego, en su HTML, agregue la directiva ng-controller y asígnele el valor EmailController . Puede usar esta directiva en cualquier elemento, pero solo ese elemento y sus elementos secundarios pueden acceder a la variable de correos electrónicos creada en el controlador, por lo que debe asignarse a un padre de la etiqueta

. Voy a agregarlo a la etiqueta de la table para que se vea así:

Ocultar código de copia

Si lo ejecuta, todo debería verse exactamente igual. Lo único que cambió es que en lugar de que los correos electrónicos se inicialicen dentro del HTML, ahora se inicializan dentro de la función del controlador.

¿Notó que la función del controlador tiene un parámetro llamado $scope ? Así es como se comparten los datos entre un controlador y HTML. El controlador puede acceder a todas las variables creadas en el $scope por el controlador, y viceversa.

Ahora agregaremos la posibilidad de hacer clic en un correo electrónico y ver su contenido. Vamos a utilizar el HTML de diálogo modal estándar de Bootstrap para crear la ventana emergente de correo electrónico. Para hacerlo, agregue el siguiente HTML debajo de su tabla:

Ocultar código de copia

Cuando ejecute esto, debería ver una ventana emergente superpuesta a su tabla que se ve así:

Ahora solo queremos que esta ventana emergente aparezca cuando el usuario hace clic en un correo electrónico de la lista. Primero, necesitamos una forma de controlar su visibilidad. Lo hacemos al vincularlo a una variable, cuando la variable es true la ventana emergente es visible, cuando es false , no lo es.

Primero isPopupVisible la variable en el controlador, llamémosla isPopupVisible y configurémosla como false . Al igual que:

Ocultar código de copia

$ scope.isPopupVisible = false;

Su controlador debería verse así:

Ocultar código de copia

función EmailController ($ scope) {
$ scope.isPopupVisible = false;

$ scope.emails = [
{de: ‘John’, asunto: ‘Me encanta angular’, fecha: ‘1 de enero’},
{de: ‘Jack’, asunto: ‘Angular y yo solo somos amigos’, fecha: ’15 de febrero’},
{de: ‘Ember’, asunto: ‘¡Te odio Angular!’, fecha: ‘8 de diciembre’}
];
}

Ahora agregamos la directiva ng-show a la ventana emergente para vincularla a esa variable. Para hacer eso, agregue la siguiente directiva a su div modal:

Ocultar código de copia

ng-show = “isPopupVisible”

Debe tener un aspecto como este:

Ocultar código de copia

vea así:

Ocultar código de copia

Ahora, antes de que esto funcione, tendremos que hacer una cosa más. Si recuerda desde arriba, ng-controller aplica un controlador al elemento sobre el que está activado y a los elementos secundarios. La última vez que lo colocamos en la

, pero dado que el HTML modal está fuera de esa tabla, necesitamos mover esta directiva un nivel hacia arriba al contenedor. Su contenedor

debería verse así:

Ocultar código de copia

Tenga en cuenta que el email es el nombre que le asignamos en ng-repeat . Ahora, cuando hace clic en él, la ventana emergente mostrará el contenido del correo electrónico en el que hizo clic.

Lo único que no mostramos es el cuerpo del correo electrónico. Hagámoslo ahora. Modifiquemos la matriz de correos electrónicos para incluir un cuerpo de correo electrónico.

Ocultar código de copia

$ scope.emails = [
{
de: ‘John’,
Asunto: ‘Me encanta angular’,
fecha: ‘1 de enero’,
cuerpo: ‘hola mundo!’
},
{
de: ‘Jack’,
Asunto: ‘Angular y yo solo somos amigos’,
fecha: ’15 de febrero’,
cuerpo: ‘solo bromeaba’
},
{
de: ‘Ember’,
Asunto: ‘¡Te odio Angular!’,
fecha: ‘8 de diciembre’,
cuerpo: ‘wassup dude’
}
];

Ahora actualice el marcado del modal para que muestre esa copia en el cuerpo del modal.

Ahora vamos a agregar funcionalidad para redactar un correo electrónico. Para nuestra ventana emergente de redacción de correo electrónico, necesitaremos 3 campos y 2 botones. Un campo para la dirección Para, otro para Asunto y otro para el cuerpo del correo electrónico. Un botón para enviar y otro para cancelar. Nuestro HTML se ve así:

Ocultar código de copia

El resultado se ve así:

Como hemos hecho antes, queremos agregar una variable y algunas funciones para controlar la visibilidad. Como ya explicamos cómo hacer esto, no me sumergiré aquí. En resumen, debemos hacer lo siguiente:

• Agregue la variable isComposePopupVisible al controlador
• Cree la función showComposePopup() que lo establece en true
• Cree la función closeComposePopup() que lo establece en false
• Se agregó ng-show="isComposePopupVisible" al modal
• Se agregó ng-click="closeComposePopup()" a los botones × y “Cerrar”
• Se agregó un botón de redacción en la lista de correo electrónico:
• Compose
• Se agregó ng-click="showComposePopup()" al botón

Ahora queremos capturar la información que ingresa el usuario, por lo que vamos a vincular los cuadros de texto a los campos de un objeto. Similar a lo que hicimos con la ventana emergente de correo electrónico usando la variable de correo electrónico selectedEmail .

La diferencia es que con la ventana emergente de correo electrónico utilizamos expresiones, las expresiones son para representar datos. En este caso, vamos a utilizar la directiva ng-model porque es un enlace bidireccional. Con eso quiero decir que si el usuario escribe algo en el campo de entrada, queremos que la variable se actualice automáticamente. Del mismo modo, si el controlador cambia el valor de una de las variables, entonces queremos que las entradas se actualicen automáticamente para reflejar eso.

Para comenzar, agregue la variable composeEmail al controlador como un objeto vacío, así:

Ocultar código de copia

$ scope.composeEmail = {};

Luego actualice el HTML para enlazar a los campos en este objeto, agregando ng-model="composeEmail.to" y ng-model="composeEmail.body" a sy </code> respectivamente. Entonces se parece a esto: </p> <p> Ocultar código de copia </p> <p> <textarea rows="10">

Ahora confirmemos que esto es realmente vinculante al mostrar un cuadro de alerta con esta información cuando el usuario hace clic en el botón “Enviar”. Así que creemos una función en nuestro controlador, composeEmail botón “Enviar” y composeEmail que muestre los valores en la variable composeEmail . Su función debería verse así:

Ocultar código de copia

$ scope.sendEmail = function () {
alerta ($ scope.composeEmail.to
+ “” + $ scope.composeEmail.subject
+ “” + $ scope.composeEmail.body);
};

Ahora vamos a enlazar el botón ” Send ” así:

Ocultar código de copia

Enviar

Ahora puede probarlo haciendo clic en el botón “Redactar”, ingresando información en los campos “Para” y “Cuerpo” en el formulario y haciendo clic en “Enviar”. Deberías ver lo que escribiste en la ventana emergente.

Ahora agreguemos un par de cosas más. Lo primero que queremos hacer es hacer desaparecer la ventana emergente. Para hacer eso, agregaremos $scope.isComposePopupVisible = false; para sendEmail() . Además, notará que si vuelve a hacer clic en el botón “Redactar” en lugar de que esté vacío, tiene la información que ingresó la última vez. Vamos a corregir esto asignando un objeto vacío a composeEmail en la función showComposePopup() . Cuando haya terminado, sus funciones deberían verse así:

Ocultar código de copia

$ scope.sendEmail = function () {
$ scope.isComposePopupVisible = false;
alerta ($ scope.composeEmail.to
+ “” + $ scope.composeEmail.subject
+ “” + $ scope.composeEmail.body);
};

$ scope.showComposePopup = function () {
$ scope.composeEmail = {};
$ scope.isComposePopupVisible = true;
};

Así que ahora hagamos algo un poco más interesante que mostrar un cuadro de alerta. Normalmente, los correos electrónicos que envía van a su carpeta “Enviados”. En este momento, solo tenemos el equivalente de una bandeja de entrada. Primero agreguemos una carpeta “Enviados” y alternemos entre ella y la “Bandeja de entrada” usando pestañas.

Comencemos con el HTML. Agregue el siguiente HTML a la parte superior de su contenedor:

Ocultar código de copia

• Bandeja de entrada
• Enviado

Debe tener un aspecto como este:

Como todo lo demás que hemos “angularizado”, necesitamos una variable para realizar un seguimiento de la pestaña en la que nos encontramos. Llamémosla activeTab y, de forma predeterminada, configurémosla en ” inbox “.

Ocultar código de copia

$ scope.activeTab = “bandeja de entrada”;

Ahora cambiemos esta variable cuando el usuario haga clic en “Bandeja de entrada” o “Enviado”. Podemos hacer eso dentro de ng-click , así ng-click="activeTab='inbox'" . Entonces su HTML se ve así:

Ocultar código de copia

• Bandeja de entrada
• Enviado

Ahora solo vamos a mostrar la lista de correo electrónico actual cuando activeTab es ” inbox ” usando la directiva ng-show así:

Ocultar código de copia

ng-show = “activeTab == ‘bandeja de entrada'”

Hasta aquí todo bien. Ahora, cuando hace clic en la pestaña “Enviados”, la lista de correo electrónico desaparece y cuando hace clic en ” Inbox ” vuelve a aparecer.

El problema es que no puedes saber qué pestaña está seleccionada. Bootstrap tiene una forma de hacer que una pestaña se vea seleccionada, requiere agregar la clase CSS activa al elemento

la pestaña seleccionada. Ver http://getbootstrap.com/2.3.2/ja….

Por lo tanto, necesitamos una forma de agregar esta clase, pero solo cuando la variable activeTab se establece en el valor correspondiente. Por lo tanto, el

para ” Inbox ” debe tener una clase activa solo cuando activeTab esté configurado en ” inbox “. Para esto, usamos la directiva ng-class . Esta directiva toma un objeto, para cada propiedad de ese objeto, si el valor es true , agrega una clase con ese nombre.

Por ejemplo, en el siguiente código, angular agrega la clase CSS activa al elemento

:

Ocultar código de copia

Bandeja de entrada

El resultado es:

Ocultar código de copia

Bandeja de entrada

Si el valor fuera false , la clase en este caso estaría vacía. En nuestro caso, queremos reemplazar true con la condición apropiada de la siguiente manera:

Ocultar código de copia

Bandeja de entrada

Su código final debería verse así:

Ocultar código de copia

• Bandeja de entrada
• Enviado

Y debería verse así:

Ahora lo único que queda es mostrar los correos electrónicos enviados en la pestaña “Enviados”. Para hacer eso, esencialmente necesitamos copiar lo que hicimos para la bandeja de entrada:

• Cree una variable en el controlador llamada sentEmails asígnele una matriz vacía
• Copie la tabla HTML para la lista de correo electrónico.
• Cambie ng-repeat a ng-repeat="email in sentEmails"
• Cambie la condición ng-show a ng-show="activeTab=='sent'"
• Cambie {{ email.from }} a {{ email.to }}

Puede hacer una prueba rápida agregando objetos a la matriz sentEmails y confirmar que se muestran.

Ahora lo que queremos hacer ahora es agregar el correo electrónico enviado a esta matriz. Esta parte es puramente JavaScript, solo usamos la función Array.push() JavaScript para agregar composeEmail a la matriz sentEmails . Al igual que:

Ocultar código de copia

$ scope.sentEmails.push ($ scope.composeEmail);

Además, podemos aprovechar esta oportunidad para eliminar la alerta, ya que ahora podemos ver los correos electrónicos enviados en la pestaña “Enviados”. YoursendEmail() función YoursendEmail() debería verse así:

Ocultar código de copia

$ scope.sendEmail = function () {
$ scope.isComposePopupVisible = false;
$ scope.sentEmails.push ($ scope.composeEmail);
};

Hasta aquí todo bien. Hay solo un par de cosas que podemos retocar. Por ejemplo, después de enviar un correo electrónico e ir a la pestaña “Enviados”, verá que la columna de fecha está en blanco. Esto se debe a que el campo de fecha no está vinculado a nada en el formulario, por lo que no se rellena. Esto es como debería ser porque la fecha debe ser la fecha en que envió el correo electrónico, no algo que el usuario especifique. Normalmente, esto se haría en el servidor, para nuestros propósitos, ya que aún no tenemos una porción del servidor, lo haremos en la función sendEmail() . Simplemente puede asignar la propiedad de date directamente así:

Ocultar código de copia

$ scope.composeEmail.date = nueva Fecha ();

Ahora, si prueba esto enviando un correo electrónico, notará otro problema de inmediato. La fecha se parece a esto ” 2013-12-27T21:47:01.678Z “. No me gusta eso, quiero que se vea como las fechas en la bandeja de entrada, pero esas fechas eran string , no objetos de date reales de JavaScript.

Afortunadamente, angular nos proporciona una forma de formatear nuestras expresiones usando algo llamado “filtros”. En nuestro caso, podemos corregir cómo se muestra la fecha cambiando este {{ email.date }} por este {{ email.date | date:'MMM d' }} {{ email.date | date:'MMM d' }} . Si te das cuenta, lo que hicimos fue agregar | fecha: ‘MMM d’ al final de la expresión existente.

La línea vertical, conocida como una tubería (|), es cómo le dice a angular que ejecute los datos a través de un filtro. El nombre del filtro en este caso es fecha, los dos puntos (:) separan el filtro del parámetro y la cadena que sigue le dice al filtro de fecha cómo formatearlo. Para conocer las diferentes formas en que puede formatear la fecha, consulte la documentación angular: http://docs.angularjs.org/api/ng… http://jsfiddle.net/luisperezphd….

Muy bien, solo algunas cosas más para limpiar. Por ejemplo, si envía un correo electrónico y luego hace clic en él para ver su contenido, la fecha en la ventana emergente sigue siendo fea: se perdió un lugar. El campo “De” está en blanco porque, como en el caso de la fecha, es algo que tenemos que asignar cuando se envía. Finalmente, no hay un campo “Para”. Las soluciones a estos son las mismas que los problemas que tratamos antes, así que conocemos la solución:

• Formatee la fecha usando el filtro agregando | fecha: ‘MMM d’ al final de la expresión
• Asignado $scope.composeEmail.from el valor ” me ” en la función sendEmail()
• Agregue el campo ” To ” y la expresión al HTML
• Asigne valores ” To ” a los correos electrónicos de muestra en el controlador

Ahora vamos a trabajar en algunas de las funcionalidades restantes para completar la aplicación, como reenviar y responder correos electrónicos. Vamos a implementarlo reutilizando la funcionalidad de redacción de correo electrónico. Lo revisaré rápidamente, ya que es bastante sencillo y no estamos introduciendo ningún concepto nuevo.

Primero, necesitamos agregar los botones ” Reply ” y ” Forward ” a la ventana emergente de detalles del correo electrónico.

Ocultar código de copia

Reenviar
Responder

Debería verse así:

Luego, creamos las funciones de reply y forward en el controlador:

Ocultar código de copia

$ scope.forward = function () {
};

$ scope.reply = function () {
};

Luego, vinculamos esas funciones a los botones.

Ocultar código de copia

Reenviar
Responder

Ahora tenemos que hacer lo siguiente:

• Ocultar la ventana emergente de detalles de vista
• composeEmail objeto composeEmail
• La forma en que se llena depende de si es una respuesta o un reenvío
• Mostrar la ventana emergente de redacción de correo electrónico

Eso es. Aquí está la función reply() comentada:

Ocultar código de copia

$ scope.reply = function () {
// ocultar la ventana emergente de detalles de la vista
$ scope.isPopupVisible = false;
// crea un objeto de composeEmail vacío al que está vinculada la ventana emergente de redacción de correo electrónico
$ scope.composeEmail = {};
// copia los datos de selectedEmail en composeEmail
angular.copy ($ scope.selectedEmail, $ scope.composeEmail);

// edite el cuerpo para colocarle un prefijo con una línea y la información original del correo electrónico
$ scope.composeEmail.body =
“\ n ——————————- \ n”
+ “from:” + $ scope.composeEmail.from + “\ n”
+ “enviado:” + $ scope.composeEmail.date + “\ n”
+ “a:” + $ scope.composeEmail.to + “\ n”
+ “asunto:” + $ scope.composeEmail.subject + “\ n”
+ $ scope.composeEmail.body;

// prefija el asunto con “RE:”
$ scope.composeEmail.subject = “RE:” + $ scope.composeEmail.subject;
// el correo electrónico va a la persona que nos lo envió
// rellena el to con from
$ scope.composeEmail.to = $ scope.composeEmail.from;
// viene de nosotros
$ scope.composeEmail.from = “yo”;
// muestra la ventana emergente redactar correo electrónico
$ scope.isComposePopupVisible = true;
};

Cuando hace clic en “Responder”, la ventana de redacción debería verse así:

El forward() es prácticamente idéntico a esto, la única diferencia es que el sujeto tiene el prefijo “FW:” en lugar de “RE:” y está en blanco en lugar del remitente.

Si ejecuta esto ahora, notará 2 cosas. Uno, en la pestaña “Enviados”, los correos electrónicos se enumeran de arriba hacia abajo en el orden en que fueron enviados. Queremos mostrar esto en el orden inverso para que el último correo electrónico que envió aparezca en la parte superior. Para hacer eso, podemos cambiar la línea de código que agrega composeEmail a la matriz sentEmails . En lugar de usar push() para agregar el correo electrónico al final de la matriz, usaremos splice() para agregarlo al principio. Al igual que:

Ocultar código de copia

//$scope.sentEmails.push($scope.composeEmail); // ANTIGUO
$ scope.sentEmails.splice (0,0, $ scope.composeEmail); // NUEVO

Además, si abre uno de los correos electrónicos enviados con todo el texto agregado nuevo, verá que todo el texto se encuentra entre sí, sin saltos de línea. Podemos arreglar esto con un poco de CSS. Usaremos CSS en línea solo por esta vez. Envolveremos el cuerpo del correo electrónico alrededor de una etiqueta y configuraremos la propiedad de espacio en blanco CSS como pre . Esto le dice al navegador que respete los saltos de línea. Al igual que:

Ocultar código de copia

{{selectedEmail.body}}

En términos de interfaz de usuario, nuestra aplicación ahora está bastante completa. Pero antes de que pueda ser una aplicación real, tiene que poder hablar con un servidor para hacer el trabajo real de enviar y almacenar correos electrónicos. Eso es lo que haremos en esta publicación.

Ahora lo primero que tengo que hacer es configurar la porción del servidor. A propósito, dejé esta publicación para el final porque quería que pudieras probar el código Angular sin obligarte a configurar un entorno de desarrollo local. Además, quería que fuera útil para todos, sin importar la tecnología de servidor que usaran: PHP, .NET, Node.js, etc.

Obviamente, no podré superar este punto. Después de todo, no puedo mostrarle cómo comunicarse con un servidor sin un servidor, y eso significa que tengo que elegir una tecnología. Voy a usar el sitio oficial de Microsoft ASP.NET MVC. También haré todo lo posible para describir la porción del servidor con suficiente detalle para que también sea útil para usted, independientemente de la tecnología de servidor que utilice.

El sitio oficial de Microsoft ASP.NET MVC Primer

Un manual muy rápido para aquellos que no están familiarizados con el sitio oficial de Microsoft ASP.NET MVC. En este tipo de aplicación web, las URL se asignan a clases y métodos. Por ejemplo, si un usuario ingresó la URL http: // localhost / Home / Index en su navegador web que HomeController el método Index() en la clase HomeController para ejecutarse.

Ese método puede elegir si devolver datos o HTML. El HTML se almacena en un archivo separado denominado vista. Estas vistas tienen la extensión .cshtml . Similar al controlador, la vista adecuada se selecciona en función de la URL, una vez más para la URL http: // localhost / Home / View, utilizará la vista almacenada en la carpeta \ Views \ Home \ Index.cshtml.

Por supuesto que estoy simplificando las cosas, pero esta explicación debería adaptarse a nuestros propósitos.

Regresar a la aplicación

Para comenzar, necesitamos crear un proyecto MVC del sitio oficial de Microsoft ASP.NET en Visual Studio. Elegí comenzar con un proyecto vacío y agregué una clase de controlador llamada HomeController . Y un método de acción llamado Index . En mi opinión, incluyo el CSS, JavaScript y HTML que mencioné al principio.

Ahora vamos a actualizar la aplicación para que obtengamos la lista de correo electrónico del servidor en lugar de codificarla en JavaScript. Primero, crearemos el método en el controlador del sitio oficial de Microsoft ASP.NET:

Ocultar encogimiento

Código de copia

Public ActionResult GetEmails ()
{
devolver Json (nuevo [] {
nuevo {
from = “Riker”,
a = “yo”,
subject = “Encantado de conocerte, Pinocho”,
fecha = “8 de enero”,
body = “Eso y ayudar a Data a terminar ‘Pop Goes the Weasel’. También cuenta como un CMOH”.
},
nuevo {
de = “Picard”,
a = “yo”,
subject = “Lo siento, esto se está convirtiendo en un discurso”,
fecha = “7 de enero”,
body = “Pero entonces tengo derecho, soy el capitán”.
},
nuevo {
from = “Datos”,
a = “yo”,
subject = “¿Podría continuar …”,
fecha = “6 de enero”,
body = “… las pequeñas disputas? Lo encuentro más intrigante”.
},
nuevo {
de = “Troi”,
a = “yo”,
subject = “Pero deletreas cuchillo con una ‘k'”,
fecha = “5 de enero”,
body = “Deletreo ‘cuchillo’ con una ‘n’, pero nunca pude deletrear”.
},
});
}

En este ejemplo, devolvemos una lista estática de correos electrónicos. Estamos utilizando el método Json() para decirle al sitio oficial de Microsoft ASP.NET que devuelva estos datos al navegador como JSON.

Ahora, vamos a reemplazar la lista codificada en nuestro JavaScript con una llamada a esta acción. El JavaScript está en la vista junto con nuestro HTML ( /Views/Home/Index.cshtml ). Entonces reemplace esto:

Ocultar código de copia

$ scope.emails = [
{
de: ‘John’,
a mi’,
Asunto: ‘Amo angular’,
fecha: ‘1 de enero’,
cuerpo: ‘hola mundo!’
},
{
de: ‘Jack’,
a mi’,
Asunto: ‘Angular y yo solo somos amigos’,
fecha: ’15 de febrero’,
cuerpo: ‘solo bromeaba’
},
{
de: ‘Ember’,
a mi’,
Asunto: ‘¡Te odio Angular!’,
fecha: ‘8 de diciembre’,
cuerpo: ‘wassup dude’
}
];

Con este:

Ocultar código de copia

$ http.post (“/ Home / GetEmails”). luego (función (respuesta) {
$ scope.emails = response.data;
});

Finalmente, necesitamos agregar $http como parámetro en nuestro controlador Angular, como lo hicimos con $scope . Por lo tanto, su método de controlador debe cambiarse de esto:

Ocultar código de copia

EmailController ($ scope)

a esto:

Ocultar código de copia

EmailController ($ scope, $ http)

Eso es todo, si compila y ejecuta esto, debería ver que su lista de correo electrónico cambia.

Uno abajo y otro para ir. El envío de correo electrónico será muy similar, la principal diferencia es que no pasamos ningún dato a GetEmails() pero necesitamos pasar información sobre el correo electrónico que enviamos a SendEmail() .

Este método va a ser simple. Todo lo que el servidor va a hacer es rellenar la fecha y los campos del correo electrónico y enviar esa información a Angular. Para lograr esto, vamos a necesitar dos cosas. Necesitamos agregar una acción a nuestro controlador del sitio oficial de Microsoft ASP.NET y una clase C # para guardar los datos que Angular está enviando.

Comencemos con la clase C #. Debe contener todos los mismos campos encontrados en el código JavaScript. Para nuestros propósitos, puede poner esta clase en cualquier lugar. Para simplificar las cosas y mantener todo el código en un lugar, lo agrego como una clase anidada dentro del controlador:

Ocultar código de copia

clase pública ComposeEmail
{
cadena pública de {get; conjunto; }
cadena pública para {obtener; conjunto; }
asunto de cadena pública {get; conjunto; }
fecha de cadena pública {get; conjunto; }
cuerpo de cadena pública {get; conjunto; }
}

Ahora para el método de acción del sitio oficial de Microsoft ASP.NET:

Ocultar código de copia

Public ActionResult SendEmail (ComposeEmail composeEmail)
{
composeEmail.from = “yo”;
composeEmail.date = DateTime.Now.ToString (“MMM d”);

devolver Json (composeEmail);
}

Finalmente, la llamada de Angular. Cambie el método sendEmail() de esto:

Ocultar código de copia

$ scope.sendEmail = function () {
$ scope.isComposePopupVisible = false;
$ scope.composeEmail.from = “yo”;
$ scope.composeEmail.date = nueva Fecha ();
$ scope.sentEmails.splice (0, 0, $ scope.composeEmail);
};

A esto:

Ocultar código de copia

$ scope.sendEmail = function () {
$ http.post (“/ Home / SendEmail”, $ scope.composeEmail) .then (function (respuesta) {
$ scope.isComposePopupVisible = false;
$ scope.composeEmail = response.data;
$ scope.sentEmails.splice (0, 0, $ scope.composeEmail);
});
};

¡Eso es! Si ejecuta su código ahora, envíe un correo electrónico y verifique la pestaña “Enviados”, verá que la fecha está completa. Si hace clic para abrir ese correo electrónico, verá que también se rellena el campo ” from “.

Esto cubre lo esencial de AngularJS y todo lo que necesita para comenzar a crear una aplicación web funcional simple. En esta serie, creó una interfaz de usuario bastante elaborada con múltiples pantallas que se actualizan dinámicamente. Para hacerlo funcional, te comunicaste con un servidor back-end para hacer el trabajo.

Solo estamos rascando la superficie de lo que es posible con AngularJS.

Licencia

Este artículo, junto con cualquier código fuente y archivos asociados, está licenciado bajo The Code Project Open License (CPOL)