Angular For An ASP.NET Veteran - Part One

Introduction

This article series is a paradigm shift for a .NET developer who has worked mostly on ASP.NET Stack (MVC, Web API, Entity Framework) to create web applications and was doing great; until a massive favorable wave from open-source communities, articles and tech talks persuaded him to try Angular.

Prerequisites

This article series uses Visual Studio Code as the IDE for all code snippets and project work. You can download and install it from this link:
https://code.visualstudio.com/

You also need to install Node.js and npm on your system. This article explains the step by step instructions to install both the items.

To work with Angular, you must be aware (not expert) of the following technologies:

1. Node.js & npm
2. ECMAScript6 or officially called ECMAScript2015
3. TypeScript
4. Bootstrap
5. HTML & CSS

Roadmap of the Series 

I'll try to cover everything you will require to create a fully-functional web application using Angular. Starting with the basics and then gradually moving to advanced topics, we'll see the important building blocks of Angular in this article series.

Following is the roadmap of the series,

1. Angular for an ASP.NET veteran: Part 1 - Getting Started
2. Angular for an ASP.NET veteran: Part 2 - Architecture and Building Blocks

Why Angular? 

First things first, why do we need to use Angular when we are doing great with ASP.NET Stack (MVC, Web API, Entity Framework) for everything a web application requires? I had the same question a few months back when I started learning Angular. I also had the same question a few years back when I started learning ASP.NET MVC and ditched the once-popular ASP.NET Web Forms framework, and the same question also struck my mind when I enjoyed the Code First Approach of Entity Framework over the DataTables and Data Adapter of ADO.NET.

To answer this question, I'm not going to define the pros and cons of both the frameworks and how one is better than the other. I'm also not going to showcase the market share of web applications created or implemented within Angular. Everyone knows the technical stuff, right? What I actually realized to be the answer to this question is depicted in this simple thought:

"Change is the only constant. Embrace it. It is inevitable"

Where do I start? 

When I started exploring Angular over the internet, it was not an easy ride. There was an abundance of information out there related to Angular, but not in the right order. I was confused with some of these questions stated below:

1. Which Angular should I start with - AngularJS, Angular1, Angular2, Angular4 or Angular?
2. Do I need to learn jQuery or JavaScript for Angular?
3. What type of Visual Studio Project will create an Angular Application?
4. Can I use C# with Angular like in ASP.NET MVC?
5. Do I need to learn complete MEAN (MongoDB, Express.js, Angular, Node.js) for Angular?
6. How can I deploy an Angular application?

In this article series, I'll try to answer these questions and give you a brief overview about Angular and how we are going to use it to create a fully functional web application.

History of Angular 

Angular is a client-side JavaScript framework created by two developers, Misko Hevery & Adam Abrons, at Google as a side project in 2009. Initially named GetAngular, it gained attention inside Google for internal projects and eventually resulted in AngularJS. To learn more about its history, check out this keynote.

When GetAngular was renamed to AngularJS in 2010, it was versioned as AngularJS 1.0 Over time, it gained popularity with its open-source approach and robust features, the team at Angular released several builds referred with AngularJS 1.X versioning.

After a few years in 2016, the same team released a new framework which is a complete rewrite of AngularJS and named it as Angular2. To avoid any confusion in the developer community, it was announced to use separate terms for each framework as 'AngularJS' refers to all the 1.X versions and 'Angular' refers to versions 2.X and above.

In 2016, Angular4 was released, skipping Angular3 because of the mismatch of some router packages that were already released with version v3.3.0. Recently, Angular5 was released in 2017 and is currently the latest stable build.

The following table shows the version and release history.

Angular 

Angular is a JavaScript framework for building client-side web applications. Angular has a very easy-to-use syntax along with a long list of powerful features. An Angular application comprises the following major building blocks:

1. Module
2. Component
3. Template and Data Binding
4. Service
5. Routing

Module

An Angular module contains related components, templates, directives, and services within, each focused on a specific area, application business domain, workflow, or common collection of utilities. There should be a minimum of one module present in an Angular application called the Root Angular Module and every application starts with it. To make it relatable to .NET, consider Module as Area of ASP.NET MVC, up to an extent.  

Component

An angular component is the main building block of an Angular application and contains the application logic. An angular application consists of a tree of components connected to each other. Components can be considered as Controllers of ASP.NET MVC, up to an extent.

Template and Data Binding 

Template is similar to View of ASP.NET MVC. It represents the UI of the application and is connected with related components for data exchange. Data Binding is the data-interaction between a template and its respective component.

Service 

A service is used to communicate and share code across the application. It can communicate with external components (APIs, files) and pass the data/logic across the application.

Routing

Routing in Angular is conceptually similar to the routing of ASP.NET MVC. It is used to route the incoming request to its appropriate owner.

Following diagram (taken from Official Angular Documentation) shows the relationship between all of them. This diagram will look daunting at this time, but over the series of articles when we dig deep into each of them, you'll find it easy to understand,

Create a web application with Angular 

The simplest way to create a web application with Angular is using Angular CLI. Angular CLI is a command line tool that creates the boilerplate code for the sample Angular application just like Visual Studio does for .NET applications. Following are the steps,

Step 1

Make sure you have successfully installed Node.js and npm. To confirm if Node.js is installed in the system or not, run Command Prompt as Administrator and type the following command to check for the version of installed Node.js 

node -v 

Step 2

Install Angular CLI on the machine using this command,
 
npm install -g @angular/cli

Step 3

If both the above steps are completed successfully, we can now create the application using Angular CLI.  Specify the location for the application and type the following command,
 
ng new angular-demo 

Step 4

This will create a new project and add the required files. To see the newly created project, go to the specified location mentioned while creating the project. I can see the following folders created for my project,

Step 5

Let's open the project using Visual Studio Code. If you haven't installed Visual Studio Code yet, go to this link for installation. After successful installation, open Visual Studio Code and it will show the following start-up page,

Go to Open folder and specify the folder created by Angular CLI to open the demo project.

Step 6

Visual Studio Code provides a PowerShell terminal that can be used to run the project. To open the terminal, use this shortcut
 
Ctrl + ~ 

 Step 7

To run this project, type the following command in terminal and it will build & execute the application in the browser,

ng serve -o 

Step 8

Open browser to see the end result. 

Congratulations. You have created your first Angular application without writing a single line of code. This is just an overview of how we can create a sample application using Angular CLI. 

Point of Interest

In this article, I have tried to give you an introduction to Angular and its history. I have also shown you the way to create an Angular application using command line interface. In the next series of articles, we'll dig deep into Angular and try to learn the essential aspects related to it.

Your feedback and constructive criticism are always appreciated, so keep it coming. Until then, try to put a ding in the universe.

G

M

T

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close