When developing Angular, there are lots of choices for code editors. We have 2 editors we love Visual Studio Code
and Visual Studio 2015
- Figure: Good Example - Visual Studio 2015 is the real deal. It's the full integrated development environment (IDE) used to create enterprise software applications. If you already know and love Visual Studio, you can continue to use it to build Angular applications
Integrating your Angular project into an ASP.NET project isn't straightforward however and requires jumping through some hoops - check out the Visual Studio 2015 quickstart from the Angular docs as a great starting place.
Having your API and your Angular all in the same project will save you a lot of work when your website implements Active Directory authentication. This is the main scenario where we at SSW choose this configuration.
A downside of putting your web application and the back-end API in the same project is that now you have coupled your API and your user interface.
- Consider designing the API to be the core of your suite of applications and independent of any user interfaces. You can share you API across mobile, web and desktop applications.
- Client technologies change more frequently than back-end technologies. It is a good idea to have a common, well-written API that can service multiple user interfaces - ie. a web UI, a desktop UI, multiple mobile apps.
- Continuous deployment is pretty easy to setup these days for API's and WebApps
- This also lets you maintain, deploy, and scale the API and client/web apps independently. Your front-end and back-end teams can deploy independently
If you decide to put your web app and API into Visual Studio check out Steven Sanderson's template) for a more complete, real-world example.
Note that using this template:
- r equires understanding of advanced concepts like hot module reloading, server side rendering and a good understanding of web pack . Check out our rule for the best build tool to make your life easier
- implements server side rendering on top of ASP.NET Core. Your front end now has a dependency on ASP.NET core which means you cannot deploy your Angular application to a CDN or non-ASP.NET core server
- will require maintenance as the technologies used in it are updated.
- Figure: Good Example - Visual Studio Code is a free, lightweight IDE that runs on Windows, Linux and OS X. Visual Studio Code is the IDE of choice for many Angular developers and has lots of great extension s for Angular that make developing Angular apps in VS Code a fantastic experience. Visual Studio Code doesn't have the full power of Visual Studio 2015 when it comes to writing your backend in C# - that part is still best done in Visual Studio to get better code completion of C# and to utilise tools like ReSharper
- Figure: Good Example - Many experienced teams are using Visual Studio 2015 for their C# backend and loving using Visual Studio Code for their Angular projects. Keep separate solutions for the front-end and the back-end solutions
Keeping separate solutions for the front-end and the back-end - allows using the best IDE for the API (Visual Studio) - allows using the best IDE for the Angular project (Visual Studio Code) - makes using the Angular CLI for your Angular project simple - see the Best Build tool
- allows independence deployment and scaling of your API and clients.