Building A CRUD Application With Angular 7 Part-1

Today, we will learn about how we can implement CRUD operation with Angular 7 in .NET Core Web API. A Web API is used to provide connectivity between a Frontend application and Database.

Prerequisites

  • Node JS must be installed
  • Angular CLI must be installed
  • Visual Studio Code or any editor you prefer
  • Knowledge of HTTP rest API

Firstly we will begin with Backend login

Create a new project in Visual Studio

building-a-crud-application-with-angular-7-1

Choose ASp.NET Core Web Application and click Ok

building-a-crud-application-with-angular-7-2

Choose API for .NET Core and be sure you have unchecked the HTTPS Configuration and create the project.

building-a-crud-application-with-angular-7-3

We are going to use the Code First Approach. So first we add the tables we are going to use.

Create a new Folder as Models and add Context.cs class in it.

using Microsoft.EntityFrameworkCore;

namespace CrudOperationWithAngular7.Models
{
    public class Context : DbContext
    {
        public Context(DbContextOptions<Context> options) : base(options) { }
        public DbSet<CrudTable> CrudTables { get; set; }
    }
}

In the same folder create CrudTable.cs file

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace CrudOperationWithAngular7.Models
{
    public class CrudTable
    {
        [Key]
        public int Id { get; set; }
        [Required]
        [Column(TypeName = "nvarchar(100)")]
        public string Name { get; set; }
        [Required]
        [Column(TypeName = "nvarchar(16)")]
        public string PhoneNumber { get; set; }
        [Required]
        [Column(TypeName = "nvarchar(5)")]
        public string Age { get; set; }
    }
}

Add the connection string in appsettings.json file

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DevConnection": "Server=DESKTOP-CGB025P;Database=DotNetCoreDb;Trusted_Connection=True;MultipleActiveResultSets=True;"
  }
}

Add the migration for it.

building-a-crud-application-with-angular-7-4

Fire the following command from the command prompt opened.

Add-Migration Initial
Update-Database

Its time to create the Controller which will interact with FrontEnd and Database

Navigate to Controllers -> Add new empty controller as CrudController and replace it with the following code.

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CrudOperationWithAngular7.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace CrudOperationWithAngular7.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class CrudController : ControllerBase
    {
        private readonly Context _context;

        public CrudController(Context context)
        {
            _context = context;
        }

        [HttpGet]
        public IEnumerable<CrudTable> GetCrudTables()
        {
            return _context.CrudTables;
        }

        [HttpPut("{id}")]
        public async Task<IActionResult> PutCrudTable([FromRoute] int id, [FromBody] CrudTable CrudTable)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != CrudTable.Id)
            {
                return BadRequest();
            }

            _context.Entry(CrudTable).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!CrudTableExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return NoContent();
        }

        [HttpGet("{id}")]
        public async Task<ActionResult<CrudTable>> GetCrudTable(int id)
        {
            var CrudTable = await _context.CrudTables.FindAsync(id);

            if (CrudTable == null)
            {
                return NotFound();
            }
            return CrudTable;

        }

        [HttpPost]
        public async Task<IActionResult> PostCrudTable([FromBody] CrudTable CrudTable)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            _context.CrudTables.Add(CrudTable);
            await _context.SaveChangesAsync();

            return CreatedAtAction("GetCrudTable", new { id = CrudTable.Id }, CrudTable);
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteCrudTable([FromRoute] int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            var CrudTable = await _context.CrudTables.FindAsync(id);
            if (CrudTable == null)
            {
                return NotFound();
            }

            _context.CrudTables.Remove(CrudTable);
            await _context.SaveChangesAsync();

            return Ok(CrudTable);
        }

        private bool CrudTableExists(int id)
        {
            return _context.CrudTables.Any(e => e.Id == id);
        }
    }
}

Finally, open the StartUp.cs file and replace it with the following code

using CrudOperationWithAngular7.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Newtonsoft.Json.Serialization;

namespace CrudOperationWithAngular7
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
            .AddJsonOptions(options =>
            {
                var resolver = options.SerializerSettings.ContractResolver;

                if (resolver != null)
                    (resolver as DefaultContractResolver).NamingStrategy = null;
            });

            services.AddDbContext<Context>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DevConnection")));

            services.AddCors();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseCors(options =>
            options.WithOrigins("http://localhost:4200").AllowAnyMethod().AllowAnyHeader());

            app.UseMvc();
        }
    }
}

Enter the port number for your Angular Application. By default, it is 4200

building-a-crud-application-with-angular-7-5

Front end development for this application is continued in Part-2.

 

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories