jueves, 14 de septiembre de 2017

AngularJS con Visual Studio 2017

En estos días, parece que todo el mundo está hablando de AngularJS y ASP.NET MVC. Así que vamos iniciar una seria de post donde aprenderemos como usar AngularJS en aplicación ASP.NET MVC y combinar lo mejor de ambos mundo. ¡Empecemos por el Hello Word!

Abra Visual Studio2017 (IDE) haga clic en File > New Project., a continuación, selección Visual C# > Web > ASP.NET Web Application (.NET Framework). El nombre de su proyecto “WebAppAngular_One” luego haga clic en OK.



En el cuadro de dialogo New ASP.NET Web Application, haga clic en Empty y luego en OK.



Visual Studio 2017 utilizo una plantilla predetermina para el proyecto ASP.NET MVC sin componentes. Para este simple Hello World será necesario agregar a la carpeta Controllers , el controlador Home para iniciar nuestra aplicación.





Para agregar la vista del controlador Home será necesario posicionarnos en método Index de nuestro controlador y hacer un clic derecho Add New View.


Agregar la siguiente estructura HTML en la vista Index.


Haga clic en F5 para iniciar la depuración. F5 hace que visual Studio inicie el IIS Express y ejecute la aplicación web.



Para instalar la referencia de AngularJS haga clic en Tool > NuGet Package Manage > Package Manager Console y escriba el siguiente comando:
Install-Package AngularJS



Agregar la referencia de AngularJS en la vista Index. Cambie el HTML por el siguiente donde hacemos uso de interpretación de Angular.



Haga clic en F5 para iniciar la depuración y ver los cambios efectuado en la estructura HTML.