Angular Coding Styles and Standards - PART 1

-

Coding Styles is very important to every application. It tells how the application is clean and neat. 

Every programming language has common coding styles and standards. We must follow the few of the coding styles it will very helpful to application development. Then the code will easier to understand.

In this post, listed few of the angular coding styles and standards with small examples.


1. Per file, the code should limit to 400 lines.


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Per file, the code should limit to 400 lines.
}


2. Per function, the code should limit to 75 lines.


public displayUserInformationToTable(): void {
 // Per function, the code should limit to 75 lines.
}


export function getUserName(): void {
  // Per function, the code should limit to 75 lines.
}

 

3. Properties, Variables and Methods should be in lower camel case.


// Method Name should be lower camel case.
public displayUserInformationToTable(): void { }


const CARS = [
// Properties names should be lower camel case.
   { id: 1, name: 'Ford Mustang (1964-Present)' },
   { id: 2, name: 'Rolls-Royce Silver Cloud (1955-1966)' },
];


// variable names should be lower camel case.
public selectedCar: string;


4. Component file name should be Kebab-Case.




5. Leave one empty line between imports. Such as angular, third party imports and application imports.

// Angular and Third Party imports.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgSelectModule } from '@ng-select/ng-select';
import { BrowserModule } from '@angular/platform-browser';

// Application created imports.
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CustomNgSelectComponent } from './custom-ng-select/custom-ng-select.component';


6. If the values of the variables are intact, declare it with ‘const’.


public display(): void {
  // If the values of the variables are intact, declare it with ‘const’.
  const CARS = [
    { id: 1, name: 'Ford Mustang (1964-Present)' },
    { id: 2, name: 'Rolls-Royce Silver Cloud (1955-1966)' },
  ];
}


7. Avoid ‘var’  and use the ‘let’ .


public display(): number {
  // Avoid ‘var’.
  var value: number;
  if (value === 0) {
    value = 25;
  }
  return value;
}


public display(): number {
  // Use ‘let’.
  let value: number;
  if (value === 0) {
    value = 25;
  }
  return value;
}



8.  Do give the filename the conventional suffix (such as .component.ts, .directive.ts,           .module.ts, .pipe.ts, or .service.ts) for a file of that type. 




9.  Method and function should have the return type.


// Method or functions should have the return type.

public thisMethodShouldReturnString(): string {
  return 'returnsString';
}

public thisMethodShouldReturnNumber(): number {
  return 0;
}

public thisMethodShouldReturnBoolean(): boolean {
  return false;
}


10.  Directive, Component, Service, Module, Interface and Pipe class names should be in pascal case.


// Class name should be pascal case.

export class AppComponent implements OnInit {}

Comments

Post a Comment

Popular posts from this blog

Send API POST Request in MS SQL Server

-
To send an API POST request in MS SQL Server using multipart/form-data, you can use the following T-SQL code: Example of content type : multipart/form-data SQL DECLARE @url VARCHAR(200) = 'https://example.com/api'; DECLARE @boundary VARCHAR(50) = '---------------------------' + CAST(NEWID() AS VARCHAR(36)); DECLARE @param1Name VARCHAR(50) = 'name'; DECLARE @param1Value VARCHAR(50) = 'John Doe'; DECLARE @param2Name VARCHAR(50) = 'email'; DECLARE @param2Value VARCHAR(50) = 'johndoe@example.com'; DECLARE @param3Name VARCHAR(50) = 'file'; DECLARE @param3Value VARBINARY(MAX) = (SELECT BulkColumn FROM OPENROWSET(BULK 'C:\path\to\file.txt', SINGLE_BLOB) AS x); DECLARE @param4Name VARCHAR(50) = 'description'; DECLARE @param4Value VARCHAR(200) = 'This is a sample file'; DECLARE @formData NVARCHAR(MAX) = N'--' + @boundary + CHAR(13) + CHAR(10) +
Read more

Create Custom Form Control for ng-select in Angular

-
Image
How to Create Custom Form Control in Angular  Why we create custom form control ? Normally, we used to create custom form control for re-usability.  The best advantage is that to add common functionality and features in this custom form control and extend the functionality as per our need and requirement.  And we can use everywhere into the application. But this example will tell you how to create custom form control to extend the functionality of  angular ng-select component.  We are adding a feature for this control, multi selection along with checkbox. Before that, we need to know what is the basic syntax of creating custom form control in angular. So, we start by implementing the ControlValueAccessor interface from @angular/forms into the component. This interface has three functions that need to be implemented and one optional functional. writeValue(obj: any): void { } registerOnChange(fn: any): void { } registerOnTouched(f
Read more

Domain Driven Design (DDD) in .NET Core

-
Domain-Driven Design (DDD) is an approach to software development that emphasizes the importance of the business domain in the software design process. It is a set of principles and practices aimed at building software systems that are aligned with the business needs and requirements. The main idea behind DDD is to create a shared understanding of the domain model between the domain experts (business stakeholders) and the software developers. This is achieved by using a common language and a set of tools that allow for the domain model to be explicitly represented and manipulated in code. In DDD, the domain model is the central focus of the software design process. It is a representation of the core business concepts and rules that govern the behavior of the system. The domain model is expressed in code using object-oriented programming techniques, and it serves as the backbone of the software system. DDD also introduces several design patterns and
Read more

Tightly Coupled and Loosely Coupled in .NET Core with example

-
In .NET Core, tight coupling and loose coupling refer to the way software components are designed and connected to each other. Tight coupling in .NET Core means that two or more software components are highly dependent on each other, making it difficult to modify or replace one component without affecting the others. This can lead to maintenance and testing challenges, as well as reduced flexibility and scalability. Loose coupling in .NET Core, on the other hand, means that software components are designed to be independent and have minimal interdependence. This is achieved by using interfaces, dependency injection, and other techniques to reduce the direct dependencies between components. Loose coupling allows components to be more easily replaced, modified, or extended without affecting the rest of the system. Summary, loose coupling is generally preferred in .NET Core because it makes software more flexible, maintainable, and scalable. Advant
Read more

How to Convert JSON Object to XML in C#

-
Image
JSON (Javascript Object Notation) is very popular for web development. It is light weight data-exchange format. Most of the applications are using this format to exchange the data for web applications. Sample JSON array of Objects :  {    "users" : [       { "firstName" : "John" ,  "lastName" : "Peter" },       { "firstName" : "Wills" ,  "lastName" : "Smith" }     ] } To use this format, need to install the Newtonsoft.json package. For more detail and version related information you can find it ✋here . Open the Visual Studio, go to the package manager console and type the below command. Basic Definition of XML (Extensible Markup Language  is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. Sample XML format :  < root >    < user >         < firstName > John </ firstName >         < lastNam
Read more

Delete Empty Rows or Null Rows in Datatable in C#

-
How to Delete Empty Rows or Null Rows in Datatable Example:  In this application we can see how to Delete Empty Rows or Null Rows in Datatable. Mostly this issue comes from while uploading the excel(.xls,.xlsx) file data into your sql table through datatable in windows application or web application. In rare cases,we can see while getting data from excel to datatable it will copies the empty rows also. Below Code. C# public DataTable DeleteEmptyRowsFromDataTable(DataTable dt) { for (int i = dt.Rows.Count - 1; i >= 0; i--) { if (dt.Rows[i][1] == DBNull.Value) dt.Rows[i].Delete(); } dt.AcceptChanges(); return dt; }
Read more

Restrict Special Characters in Windows Application using c#

-
Image
Example : In this application it will remove all the special characters when we trying to copy paste the special characters. Lets see how it is possible with Copy,paste. Please follow these steps : 1. Create a New Windows Form with the name of 'Form1', and take one label with the name of 'lblName' and one textbox with the name of 'txtName' and one button with the name of 'btnValidate'. Please see below image. 2. Add a code in TextChanged event for that textbox. Here my textbox name is 'txtName' in that I have added a event like . private void txtName_TextChanged(object sender, EventArgs e) {       txtName.Text = RemoveSpecialCharacters(txtName.Text); } 3. In that event you observed method name of 'RemoveSpecialCharacters'.Basically it will remove all the special characters when you are copy paste in to the textbox.       private string RemoveSpecialCharacters(String inString)      
Read more