Niranjan Singh's coding blog

This tutorial led you to learn the fundamentals of Angular and TypeScript.

TABLE OF CONTENT

• =>Introduction
  • What is Angular?
  • Why do we need Angular?
  • Architecture and Building Blocks of Angular Apps
• Setting Up the Development Environment
• Your First Angular App
• Structure of Angular Projects
• Webpack
• TypeScript Fundamentals
  • What is TypeScript?
  • Creating First TypeScript Program
  • Declaring Variables
  • Types
  • Type Assertions
  • Arrow Functions
  • Interfaces
  • Classes
  • Objects
  • Constructors
  • Access Modifiers
  • Access Modifiers in Constructor Parameters
  • Properties
  • Modules
• Angular Fundamentals
  • Creating Components
  • Generating Components Using Angular CLI
  • Templates
  • Directives
  • Services
  • Dependency Injection
  • Generating Services Using Angular CLI
• Exercise

Introduction

What is Angular?
Angular is a JavaScript framework for building client-side applications using HTML, CSS, and a programming language such as JavaScript. It is an open-source front-end web application platform based on TypeScript.

Before start using something new framework; everybody has lots of questions in his mind that What is it and Where does it fit in requirement? At which place it benefits and Why to use if there are lots of JavaScript frameworks out there.

Why do we need Angular? Why to use Angular and not some other JavaScript framework?

Angular makes HTML more expressive. It powers up HTML with language related features such as local variables, for loops, and if conditions.

Angular has powerful data binding. Application can easily display fields from data model, track changes, and process updates from the user so fast. It is built for providing speed. It has faster initial loads, faster change detections, and improved rendering times than other JavaScript frameworks.

Angular encourages modularity in application by design. It led us to create Applications as a set of building blocks, making it easier to create and reuse content. There most of the application build with JavaScript/ jQuery but as far the application gets more complex it is not easy to maintain the JavaScript and jQuery code.
It requires to properly structure the application. There are some JavaScript patterns out there e.g. Revealing Module Pattern, Prototype Pattern but these are must easy to lots beginners for JavaScript.

Angular has built-in support for making communication with a backend service. This makes it easy for web applications to integrate with a back-end service. It is preloaded with set to features to get and post data or execute server-side business logic.

Easily Testable

Picture credit from..

There are most the applications build with JavaScript or jQuery. Over the years various frameworks are build and evolved to make web applications development easier. Angular makes applications with clean structure that easy to understand and easy to maintain loosely coupled code. It makes applications more testable to write automated test to test the various part of the application.

Architecture and Building Blocks of Angular Apps



In modern web application, there are at least two parts a Front-end and Back-end. The Front-end is called client, it is the part of the web browser that user sees and interacts with. It includes user interface or UI for the application. It uses HTML, CSS, JavaScript/ TypeScript, Angular to create the Front-end. Front-end contains the HTML Templates and presentation logic to display the data and responding to the user e.g. navigation, listing data.

The Back-end consist of web servers or cloud which responsible for storing the data and doing any kind of processing. Back-end may one or more databases and APIs to make the data available to the client. For a large enterprise level application, it may also implement the business logic of the application like calculating the tax, shipping on various parameters

The Front-end or Client app talks to the Backend-end to get or save the data. At Back-end we create one or multiple HTTP Services / API to make data available to the client. These HTTP Services/ APIs are endpoint that are accessible via HTTP protocol so we call them to through HTTP request to get or save the data.

If we talk about Angular Building Blocks At the heart of every Angular App, we have one or more components. Application developed with Angular is comprised of a set of components and services which facilitates operations/functionality across those angular components.

Angular component


Angular component is comprised of a template which is the HTML for the user interface fragment defining a view for the application. component encapsulates the Data, HTML mark-up and logic for a view.

Along this, a class for the code associated with the view. The class contains the data or properties for use in the view and methods, which perform actions button for the associated view e.g. responding to a button click.



Metadata

A component also has metadata, which provides additional information about the component to Angular. It is this metadata that identifies the class as an Angular component.

Modules

Every Angular application has at least one Angular module which called the application's root Angular module. As Application grows it can have any number of additional Angular modules including feature modules that consolidate the components for a specific application feature to make code maintainable. It is a container for groups of components.

For an example, in real world scenario If we go to a grocery store then it has few shelf's to maintain their products/items to sell but in a big mall we found lots of I/0 to manage different categories of the products. Similarly, to maintain different type of components we can create multiple modules to organize the components.

If we see in Training web application, there are following modules can be created to manage the application:

Each module will manage their specific group of components, sub components to break the application in smaller and maintainable to facilitate a specific area of the application.

Conclusion:
In this section we have learned about the Angular and what/why Angular. Along this we have also tried to know the basic building blocks of the Angular to develop a web application

Next: Setting Up the Development Environment

Scenario:

I was installing Microsoft SQL Server Data Tools - Business Intelligence for Visual Studio 2013 with a 64 bit SQL Server 2014 Express and Visual Studio 2013. The installation will not start because of a failing rule check. "Same architecture installation"

I have selected existing SQL Server instance to add features:

Then selected “SQL server Data Tools – Business Intelligence for Visual Studio 2013.

After that installation start running “Feature Configuration Rules” and I got an error saying that Rule “Same architecture installation” failed.

Solution:

I have searched for the problem and found that only 32-bit version of SQL Server Data Tools for Visual Studio 2013 published by Microsoft.



From MSDN forum and blog article:

Make sure you choose the "New Instance" option (strange as that might seem). Otherwise, you'll get an error that says the following:

Rule "Same architecture installation" failed.

On my machine x64 version of SQL Server was installed so it requires to do a new installation rather adding features to existing instance. I thought that It was due to the Operating System architecture difference but these tools require 32 bit instance of SQL Server.

Visual Studio Code has a port for Emmet out-of-the-box too, which gives us more HTML features. Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow or programming.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime. Same like full version of visual studio, Emmit is way to implement code snippets in the VS Code editor.

For example  let's say we wanted to just type div and then inside of that div we wanted to have a UL. And then we want that UL to have, let's say, five LIs. We could do LI right there and how do you do five of those, we can do *5. Now if I hit Tab, it's going to automatically generate all that HTML.

Notice it's kind of got a cursor there in the first spot, so let's see what that happens there. I can type I first, hit Tab, and go to second, and then just keep typing like this. Now you can use that and hit Escape to get out and to also create things like table or anything else that's more complex.

if you want to learn more about the Emmet syntax you can check out this link here at docs.emmet.io.

Recently I needed to install npm on my workplace computer and it always showing below connection timeout error message every time when I run any command.

I have faced such issue with VS Code when trying to install extensions and updates. After going through documentation, I found that here is the same issue with proxy settings and I got information by running ‘npm help config’ command. It redirected me to the npm config documentation and I found this:

To authenticate my corporate proxy, I set the environment variables HTTP_PROXY and HTTPS_PROXY but npm did not recognized these environment variables.
After doing search on internet and from my previous experience with vscode issue, I found the following same way to configure the proxy for npm.

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

If you need to specify credentials, they can be passed in the url using the following syntax.

http://user_name:password@proxy.company.com:8080

You can also set the proxy configuration as a command line argument or environment variable. Configuration parameters can be specified using -- when executing npm. So the proxy could also be specified as follows.

npm --https-proxy=http://niranjansingh:MyPass@172.29.01.01:8080 -g install yo

I have tried command line configuration to make it work and I have done my job.
Hope this help others also... Happy Coding!

Visual Studio Code is light weight editor for web development languages. To enhance it you require some tools which speed up development in Visual Studio code and also prerequisites for doing development e.g. Node.js . Here are the few players which play some important roles to enhance the development environment features:

Bower is a package manager for the web.
Gulp enables you to automate and enhance your workflow.
Yeoman is Scaffolding tool for modern web apps and helps you to kick start new projects, prescribing best practices and tools to help you stay productive.

You can setup these as follows:

Step 1 – Install Node.js

To through previous post - How to create Node.js development environment in Visual Studio?. Just download the installation package from Node.js site and go through the setup wizard to complete installation to work npm working.

Step 2 - Install Bower

To install Bower first run the Command Prompt and Bower is installed globally by running the following command:

npm install -g bower

Step 3 - Install Gulp

To install Gulp.js globally on your system run the below command which enable you to run the ‘gulp’ command in your command prompt:

npm install -g gulp

Step 4 – Install Yeoman

To install Yeoman, just run the below command on command prompt:

npm install -g yo

You can install these in one go using below command:

npm install -g yo gulp bower

After that most of things are up and running to start with VS code.

Happy coding!

I ran into problem that when I try to find extensions in the VS Code, it does not display anything and even not able to check for updates. In this scenario, I have downloaded newer version of VS Code but it was not the permanent solution to solve this problem.

In such type of issues, I found that our enterprise proxy block the request which sent to the respective software vendors. Finally I decided to get to know that how can I setup proxy settings in VS Code as I did with tortoiseSVN and other tools.

I found reference in VS Code documentation - Proxy server support

Many enterprises require that their computers run behind a proxy server and don't allow direct access to the Internet. A proxy server intermediary can limit access to the VS Code Extension Marketplace and prevent installing VS Code extensions.

Follow the below steps to setup proxy settings:

1. File > Preferences > Settings
   
2. Navigate to the HTTP settings section and you will find settings for proxy as shown in below image:
   
3. Now change the proxy settings as per your environment, If you proxy does not require authentication then just simply enter proxy details:

   "http.proxy": http://172.28.57.20:8080/

   If proxy require authentication then you have to provide user details:
   

   "http.proxy": "http://niranjan:password@172.28.57.20:8080/"

Complete Settings which works in my case:

// VSCode: Place your settings in this file to overwrite the default settings
{
  "http.proxy": "http://user:pass@proxy.com:8080",
  "https.proxy": "http://user:pass@proxy.com:8080",
  "http.proxyStrictSSL": false
}

From documentation:
Additionally, use "http.proxyStrictSSL": false if your proxy server uses a self-signed certificate.
Note: VS Code supports http and https proxies, but not SOCKS proxies.

What is .NET Core?

.NET Core is a development platform maintained by Microsoft and the .NET community on GitHub. It is cross-platform, which supports Windows, macOS and Linux and it can be used in device, cloud, and embedded/IoT scenarios.

What is Docker?

Docker is an open platform for developers and sysadmins to build, ship, and run distributed applications. It leverage the speed in developing, packaging and running portable distributed applications.

Docker for Windows is a Docker Community Edition (CE) app.

Note: It requires Microsoft Hyper-V to run and the current version of Docker for Windows runs on 64bit Windows 10 Pro, Enterprise and Education (1511 November update, Build 10586 or later).

Hardware Virtualization must be enabled. It is prerequisites for Hyper-V and also for Docker also.. You can check it in the Task Manager’s performance tab for CPU.

Now we start installing Docker on Windows 10 Pro.

First enable Hyper-V and here are the steps:

1. Press Windows + R and run appwiz.cpl to open “Programs and Features” section of Control Panel.
   
2. Now click on “Turn Windows features on or off”.
   
   
3. Check Hyper-V in Windows Features section to enable it.
   
   

I found an interesting and easy to understand moving image(gif) to know that how to enable Hyper-V form control panel.

Installing Docker application

1. First download Docker InstallDocker.msi installer from here and then double-clickInstallDocker.msi to run the installer.
2. Follow the install wizard to accept the license, authorize the installer, and proceed with the install.
   
3. Follow the install wizard to accept the license,and click Next.
   
4. Click Finish on the setup complete dialog to launch Docker.
   
5. When Docker start without error then you will see Docker icon in the taskbar.
   

and Linux virtual machine in the Hyper-V so we need to switch to Windows containers. It may restart your computer as did with me.

Now time to come for creating the first “Hello World” program on Docker and run it. To work with Docker, we have start “Power Shell” to run the CLI command to create the program.

1. First run the following command to get a container with the dotnet core tools.

   docker run -it microsoft/dotnet:latest
   

2. Now create “Hello World” console application:

   dotnet new console -o hwapp
   

3. It will create a directory with name ‘hwapp’. Go into that directory using ‘cd hwapp’ and run the restore command.

   dotnet restore
   

 

You can develop your applications by using any supported language by Docker, like Node.js, Java, Go, etc., Right now Microsoft tram working to make better support for .NET Core and .NET Framework in Docker environments. You can try the official  .NET and ASP.NET Core images available at Docker Hub as I have used one of them in above exercise to run the program on the Docker container.

It is quite interesting that these containers are help full to create different type application and host them to make auto build as read so far about them.

DevExpress introduces new ASP.NET Bootstrap controls in v17.1

DevExpress controls suite now include Bootstrap enabled ASP.NET controls in upcoming release. So far I found these controls well incorporated with Bootstrap framework.

These new  ASP.NET Bootstrap controls are compatible with the Bootstrap version 3.3.7. These provides out-of-the-box Bootstrap framework. Right now all not all DevExpress ASP.NET controls found in DevExpress Bootstrap controls. In DevExpress 17.1 Beta Demo Bootstrap controls are totally a separate category of controls.

DevExpress ASP.NET Bootstrap controls are new line of controls which somewhat gives us similar versions of DevExpress ASP.NET features There controls contains 4 type of controls as a subset of the DevExpress ASP.NET controls:

And Visual Studio toolbox also showing them in separate category of controls:

Let  check the DevExpress Bootstrap Controls:
Most of the added controls are similar to the standard DevExpress ASP.NET controls because they are derived from them. Editor controls has almost all of these properties and the client side events.

These bootstrap enabled controls has new properties section which specifies the bootstrap related properties. In case of button we use SettingsBootstrap.RenderOption  to specifies the button style as shown in the above image.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DevExBootstrapControls.Default" %>

<%@ Register Assembly="DevExpress.Web.Bootstrap.v17.1, Version=17.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.Bootstrap" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:BootstrapTextBox ID="btnMessage" ClientInstanceName="message" runat="server" Text="Hello, Bootstrap TextBox"></dx:BootstrapTextBox>
            <dx:BootstrapButton ID="btnShowTextMessage" runat="server" AutoPostBack="False" Text="Button">
                <ClientSideEvents Click="function(s, e) {
    alert(message.GetText());
}" />
                <SettingsBootstrap RenderOption="Success" />
            </dx:BootstrapButton>
            <br />
            <br />
            -- Grid --
            <br />
            <dx:BootstrapGridView ID="BootstrapGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="AddressID">
                <Columns>
                    <dx:BootstrapGridViewTextColumn FieldName="AddressID" ReadOnly="True" VisibleIndex="0">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="AddressLine1" VisibleIndex="1">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="AddressLine2" VisibleIndex="2">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="City" VisibleIndex="3">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="StateProvinceID" VisibleIndex="4">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="PostalCode" VisibleIndex="5">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewTextColumn FieldName="rowguid" VisibleIndex="6">
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewDateColumn FieldName="ModifiedDate" VisibleIndex="7">
                    </dx:BootstrapGridViewDateColumn>
                </Columns>
                <CssClasses Table="grid-table-with-template" />
            </dx:BootstrapGridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" ProviderName="<%$ ConnectionStrings:AdventureWorksConnectionString.ProviderName %>" SelectCommand="SELECT top 20 * FROM [Person_Address]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

and below is the output of these added controls on the page:

Conclusion: DevExpress Bootstrap controls idea is quite good and really decrease the development time rather using the flat table for rendering data and other operations using the editor controls. DevExpress native web form controls rich with the features so these Bootstrap enabled control really make intuitive user interface.

Technical debt is a concept in programming that reflects the extra development work that arises when code that is easy to implement in the short run is used instead of applying the best overall solution at once after few release of the application.  

It includes those internal things that you choose not to do now, but which will impede future development if left undone. especially in the context of refactoring.

In 1992, at the OOPSLA conference Ward Cunningham describes this concept as follows:

"Shipping first-time code is like going into debt. A little debt speeds development so long as it is paid back promptly with a rewrite. Objects make the cost of this transaction tolerable. The danger occurs when the debt is not repaid. Every minute spent on not-quite-right code counts as interest on that debt. Entire engineering organizations can be brought to a stand-still under the debt load of an unconsolidated implementation, object-oriented or otherwise."

Technical Dept increase with every release if residual issues left over from the last released are addressed. In Agile method, each sprint take care about the standard process to make a quality product but code refactoring and other stuff are not controlled at the right time then futures releases cost more in refactoring rather than doing at particular release using shortcuts. It is reduced by measuring Debt at every release to reduce to cost of the continuous development.

NDepend provide Continuous Code Quality using Smart Technical Debt Estimation. It enables you to estimate the cost to fix and the severity through customizable C# formulas for each issues persist at each sprint or release of the software.

In newer version NDepend v2017.1.0, NDepend estimates the technical-debt of a code base.

The technical-debt is estimated from C# LINQ formulas embedded inside each rule source code. This makes the the estimations both smart and easily customizable to your needs. In the below screen you will see the queries written for the predefined rules provided with the NDepend.

There are rules which can be added and modified as per the requirement. Debt estimation parameters are also customizable through NDepend Project Properties panel. See below images:

As per my opinion this feature is quite worth of use to improve the quality of the product for future cost reduction and it is quite easy to understand the serious Code Quality control in the development process through NDepend. It makes the managers to control the return on investment made on quality.

Hope NDepend benefits others to reduce the Technical Debts for their products..

What are the quality gates
Quality gates are basically acceptance criteria reviews that can be used throughout any project. Sure, managers of smaller, agile projects might say that this involves too much paperwork, but the nice thing about quality gates is that the strategy is fully customizable. It can be seen as a set of predefined quality criteria that a software development project must meet in order to proceed from one stage of its lifecycle to the next.

These are special milestone in a software project which are located before a phase that is strongly dependent on the outcome of a previous phase. They are especially useful between phases in which breaches in disciplines must be overcome.

How quality gates work:

You are not allowed to proceed the next gate until the previous gate has been completed successfully. It involves a checklist of deliverables, with some indication of the state of completion for each item. Checklist must be reviewed by the project manager (Manager) and a senior executive or stack-holders who is involved with the project. Quality gates therefore mean:

• Formal checklists are used throughout the life of a project.
• Formal sign-off and acceptance occurs at each gate.
• Assessment of the quality and integrity of the product takes place.
• Information is assured to be communicated to the correct stakeholders

Advantages of the Quality gates:
These are effective on any kind of project. There attractive because of the following advantages which includes:

• Minimizes project failure risks through phase-by-phase checklists (or Gates)
• Enables project managers to continuously communicate the process and build quality directly into the project
• Reduces development cycle time—getting it done right the first time
• Increases focus on a well-designed product

Now NDepend is equipped with this in v2017.1 and you will find default quality gates relative to technical debt and issues and issues, including Percentage of Debt, New Debt since Baseline or New Blocker / Critical / Major Issues. Quality gates relative to absolute technical debt value are disabled by default because the proper thresholds can only be defined in the context of a particular project.

Results of the applied rules are shown in the updated dashboard. This is quite new feature in NDepend for project management improvement.

You will find ratings and the status of passed rules.

HTML report has more details in a tabular format about the applied rules:

Then again the feature that I most like in NDepend is CQLinq which enables you to customize or add rules. CQLinq is much fast to run these rules and now much improved in case of performance.

There is a nice documentation is also available to know that how to Compute and Manage the Technical Debt with NDepend.