CRUD Operations In ASP.NET MVC Using Angular 2 With Basics - Part One

In modern technology, we have a lot of platforms and tools for building complex web applications. Angular is among them and the most preferable by all the developers. In this article, we are going to know about Angular 2 from scratch with examples and finally, build a simple CRUD application in ASP.NET MVC with Angular.

What is Angular?

"Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop" as per the Angular official website https://angular.io/docs.

In simple terms, we can say Angular is a JavaScript-based open source framework which is used to build single page applications. And it provides a number of features to develop a complex requirement in modern web applications. 

Versions of Angular

Angular.js or AngularJS 1.x is the basic version of Angular which was released on October 20, 2010, and initially maintained by Google. It is the controller based web application developement that uses JavaScript to build an application. AngularJS is responsive but it doesn't have support for mobile devices; however, we can run Angular 1 on mobile devices using 3rd party frameworks. 

Angular 2 or Angular is the next version of AngularJS 1.x which was released by Google on September 14, 2016. Angular2 is completely rewritten and is way different from AngularJS 1.x.

1. Angular 2 and rest of the versions are component-based web application development, but AngularJs 1.x is not, it is a controller based application development framework.
   
   
2. Angular 2 is implemented with a lot of features compared with AngularJS 1.x. such as,
   
   
• Interpolations, Property Binding, Components-based application development, Services, etc.
• Performance increased.Angular 2 is 5 times faster then angular Js 1.x
• Angular 2 has TypeScript feature which has support with ECMAScript 5,6,7 and above.TypeScript is fully based on OOP concepts which are similar to simple Java or C# classes.
• Angular 2 uses TypeScript to build applications.

Angular 4 is the next version of Angular 2 which was released by Google on March 23, 2017. In Angular 4, some more features have been added such as it's ackward compatible and there is a new router life cycle. It is compatible with the new versions of TypeScript that are 2.1 and 2.2.

 

Angular 5  is the next version of Angular which was released by Google on Nov 1, 2017. Angular 5 includes supports for Progressive web apps, build optimizers, and material designs.

Why do we need Angular?

Angular has more inbuilt features to develop web applications which help the developers to avoid writing more lines of code using jQuery or JavaScript. Please find the list of features provides by Angular.

1. It is open source framework and anyone can download from internet and use.
2. Client-side MVC framework.
3. Simpler and Faster. A developer is able to easily understand. 
4. TypeScript features.Helps the developers to use OOPS concepts like Interfaces, properties, classes, etc.
5. Designed for Mobile devices with Huge performance. Angular JS 1.x doesn't have mobile support Features.
6. Dependency Injection
7. Data Binding features
8. Templates, which helps us to render HTML elements
9. Cross-browser supports

I hope now you have some basic knowledge of Angular and its features.

Note

In this tutorial, we are going use Angular version 2 (Angular2). We have to set up Angular in our development environment before we do anything. To set up our environment, please click here and follow the steps. The link has steps to create a project and adding the Angular files.

Once the environment setup is over, you can find the below folders and files in your project Solution Explorer. 

 

Note - Here, I have created my project and named it as "AngularSampleDemo". 

Now, let's discuss some important folders and files used.

app.module.ts

This is the default root module of our angular application and it will be rendered when our application is executed. The module is used to inherit our created components, directives, and services. An Angular application can have multiple modules.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ], //if you want to use any other module,import here.The browser module required for all angular web app.
    declarations: [AppComponent ], // importing components
  bootstrap:    [ AppComponent ] //Mentioning our Root component
})
export class AppModule { }

Here you can see, we used @NgModule decorator to mentioning it as a Angular Module. If we want to mention it as component we can use @Component

 

Imports  - Is used to import other modules in our root module. All angular web applications require Browser Module, don't forget to import it.

 

Declarations - This the place we can declare all our created components.

 

Bootstrap - Is used to mention our root component for our app module. A module can have multiple root components. 

 

main.ts

 

This is the main function of our Angular application to declare our root module. When we run the application, the declared root module will be rendered. 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);  //Mentioned here our root module

app.component.ts 

It is a root component of our AppModule. Components are used to divide our application logic into separate components. For example, if we want to develop a StudentsData module, we can split StudentsSportData, StudentsEducational data as components.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app', //Which is used render the template html content
    template: `<h1>Hello {{name}}</h1>
                <emp>Loading EMployee Component<emp>`, //which is used to declare our html
})
export class AppComponent  { name = 'Angular'; }

Here, you can see, we have used @Component decorator to mention this type script file as a component.

 

Index.html

   

This is the startup page of our Angular application. When we run an application, the index.html page will be rendered initially.

 

app.component.spec.ts

 

The file is used for unit test of our app.component file. 

 

Style.css

  

We can write our custom style attributes in the style.css file.

 

node_modules

 

All the available packages have been installed from our NPM(Node Package Manager). The available packages in the node_modules folder will be created depending on the package.json configuration (which is has required library packages details like Name, version, etc.). Please find the sample screenshot here.

 

 

 

Package.json

   

The package.json file is used to tell which library files need to be installed in node_modules. This is the simple JSON configuration file to declare required library details like name, version, etc. Please find the below screenshot to restore required packages from Package.json.

 

 

 

tsconfig.json

   

This is the file where we can declare our required compiler options. Please find the sample screenshot here.


Let us run our application.

 

 
Now you can see, our Angular application has been executed successfully without any compilation errors. In our upcoming article, let's see how to perform CRUD operation using Angular in ASP MVC.

 

Thanks for reading. Provide your valuable comments if anything needs to be improved.