The main objectives of this artice are:
Let's get familiar with the few default files in the angular project as follows:-
- Creating Angular 13 Application.
- Install And Configure Bootstrap
- Add Bootstrap Menu
Angular:
Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our coding cleaner and maintainable.
- Angular component composes of 3 files Typescript File(*.ts), Html File (*.html), CSS File(*.css).
- Components typescript file and HTML file support 2-way binding which means data transfer is bi-directional.
- Component typescript file listens for all HTML elements events from the Html file.
Create Angular(v13) Application:
Let's create an Angular(v13) application to begin our sample.
Make sure to install the Angular CLI tool into our local because it provides easy CLI commands to play with the angular application or to set up the application.
Command To Install CLI:
npm install -g @angular/cli
npm install -g @angular/cli
Run the below command to create an angular application.
ng new name-of-your-project
While creating an angular app let's ignore the routing for the demo.
Select 'CSS' stylesheet type.package.json - contains commands like build, run, test, etc. It also contains packages or libraries references that our angular application requires.
angular.json - contains setup and configuration of angular.
src/index.html - Only HTML file of the angular application. It contains the root angular component element <app-root></app-root>(default), area for our components to rendered.
src/maint.ts - entry file of our angular application to execute.
src/app/app.modulet.ts - Entry module.
app(folder or root component folder) - contains root component like 'AppComponent' consist of files like 'app.component.ts', 'app.component.html', 'app.component.css'.
Command to run angular applicaiton.
ng serve
Install And Configure Bootstrap:
Let's install bootstrap into our angular application.
npm install bootstrap
Now in 'angular.json' file configure the bootstrap 'CSS' and 'JS'.
Add Bootstrap Menu:
Now on to the 'app.component.html' add the bootstrap menu.
src/app/app.component.html:
<nav class="navbar navbar-expand-lg navbar-light bg-primary"> <div class="container-fluid "> <a class="navbar-brand" href="#">Student App</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul> </div> </div> </nav>Now run our angular application and navigate to 'http://localhost:4200'.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful demo on .NET6 API and Angular application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-1 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-3 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-3 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-4 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-5 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-5 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Comments
Post a Comment