Join Alexander Zanfir for an in-depth discussion in this video Create and configure the Angular project, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
And of course you'll need to have Node installed in order to get access to npm. And since it's a command line tool, I'm using the global flag with -g to install it. Next let's create the project with the command line angular project generator. So I'll use ng new and then we'll provide a name where our project will be located. I'll call it frontend. Now all of the project files have been generated and at this point the command line tool is downloading all of the dependencies for us.
The next thing we need to do is open up our new project inside our editor. I'll be using an editor called Visual Studio Code, but you can follow along with any editor that you like. So I'll start Code. And then I'll open up the location we just created the project in. And I'll open up the frontend folder. Inside here we can see all of the generated files. Let's take a look at the package.json file that was created.
It has a whole set of packages this project needs in order to run. Next let's open up the integrated terminal, or if you're not using Visual Studio Code, you can continue using the command line interface. With Visual Studio Code I'll go to View, Integrated Terminal. Now to test out our project and the starter template it came with, we can use ng Serve -O. One important thing to point out is that if we make any changes and save them, the browser will automatically reload them without us having to do anything.
Let's give that a try. So if we go to our editor and go into the source folder, then app and we'll open up our app component.ts inside the app component class, if we change our title property from app to my app and save that, we can see that it's automatically updated in the browser. At this point, you should have your frontend ready to go. We can start creating the custom app components next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework