In this article, I am
going to share knowledge "How to create an angular app inside .net core".
Most of the developers are thinking about angular if it can be merged with
visual studio .net core so that's fantastic. So don't worry guys I am here and
going to explain about this0. If you are not aware of Angular and .net core
separately please go through the below-given link these links are very helpful
to create an angular app with .net core step by step.
- How To Create Angular App
Using Angular CLI
- Getting Started With Angular 2
Using Visual Studio Code
- How To Post FormData To WebAPI
Using Angular 2
- Angular
CLI Official site
- Create simple .net core
application
I am going to explain in
some of the steps to create an Angular app using .net core
using visual studio:
Before start, you should
make sure you have already installed Visual Studio 2017.
Step1:
Open Visual Studio and
create a project after clicking on File> New> Project,
See the below image for more help.
Choose template ASP.NET
Core Web Application and click on OK after
that one other popup will be displayed there, so now time to select the
SPA category. We can choose any template e.g React, Angular, WebAPI, any
template according to your requirement, Now we should select Angular because we
are going to create SPA with .netCore with Angular. see image for more help
Select Angular and click
on OK, Now SPA template is generating by Visual Studio
for Angular with .netCore. it will take 1 minute approximate to create a complete
application structure with all configuration on your system. see image for more
help.
Now open solution
explorer and we can see SPA application structure is ready. Application
structure completely follow the latest version of the framework .net Core. Open
the given link if not aware of .net Core click here https://docs.microsoft.com/en-us/visualstudio/ide/quickstart-aspnet-core?view=vs-2019.
So let me explain
about ASP.NET Core - Project Structure one by
one:
AngularSPAwithCore: Solution Name and project Name (in this
project both names are the same but you can choose different).
Connected Services: We can use to connect any cloud services e.g
Azure.
Dependency: It contains all the installed serverside
NuGet packages as well as clientside frameworks such as jQuery, Angular etc.
Client-side dependencies are managed using NPM in Visual Studio.
Properties: Properties set the configuration launchSettings.json
file which includes Visual Studio profiles of debug settings.
wwwroot: Basically, This is root folder of the
application and treated as webroot () folder, Inside wwwroot should be separate
folders for the different types of static files such as JS, CSS, Image,
bootstrap etc.
ClientApp: Complete Angular application with all
configuration. see below image to understand in easy way.
Above image, Now we see
inside ClientApp Angular configuration available e.g. Component, Package.json,
Index.html. etc. If you are already not aware about angular application
structure so click on this link Clickhere.
Controller: In this folder, we can create our business logic
e.g API
Pages: Application related .cshtml pages e.g
error.cshtml.
.gitignore: This
file is part of the git code versioning tool to configure the
setting of git logic as well as to ignore folder and file from the application.
appsetings.json: As we know don't have anything called
Web.config in Asp.net Core application which we use to write our connection
strings or application-specific settings. Here we have a file called
appsettings.json to store such type of information.
Program.cs: As we know Asp.net Core application starts from
the program.cs file and execute always void main() function.
Startup.cs: As we know about Asp.net Core Application there
is no Global.asax file so instead of that use Startup.cs which is executed
the first time when the application starts.
Now we can change the
configuration in any file according to our project requirement. So let's move
to our application which is already configured by default.
Application is ready to
run but before that, we should make sure all client-side and server-side
packages available inside the dependency node_module folder. If the yellow icon
indicator displaying on the dependency folder it means we need to rebuild the
application to restore the packages.
Let's press f5 or run
the application after compile and build application will open in browser with
default https://localhost:44391/. See the below image.
In this application
already default SPA application template is created. Now we can change layout,
component, service etc.
I hope this article is
helpful to learn about ASP.NET Core SPA Application with Angular.
Happy Coding!! Keep learning!!
Bikesh Srivastava
Angular,
Interview Question
