Monday, August 21, 2017

What is package-lock.json file in Node NPM? (Learn Angular Step by Step)

When you are doing development in Angular, Node NPM is your tool for package management. In simple words we have a “package.json” file and all dependencies are listed inside it. When you are doing NPM you will always find “package-lock.json” file.

So in this Angular tutorial we will unleash the importance of this lock file.

To understand the importance of lock lets understand how software versioning works.

Most software versions follow semantic versioning. In semantic versioning, versions are divided in to three distinct numbers as shown in the image below.

The first number is termed as “major version” , second “minor version” and third “revision”.

Major version: - Any increment in major version is an indication that there are breaking changes in the software functionality. It’s very much possible that the old code will not work with these changes and have to be tested properly.

Minor version: - This version is incremented when we add new features but the old code still works.

Revision:- This version is incremented when we are just doing bug fixes. So there are no new functionalities added, no breaking changes and back ward compatible with old code .

NPM follows semantic versioning but it also has some more special characters like “^”, “~”, “>” and so on. They dictate how NPM get latest should behave for Major and Minor versions.

For these formats 3 formats are very primary let’s understand each them.

Exact (1.6.5) , Major/Minor ( ^1.6.5) or Minor(~1.6.5).

Exact (1.6.5): - This will do a get latest of exact version 1.6.5 not more or not less. If that version is not available it will throw up an exception.

Major/Minor(^1.6.5): - The carrot sign will get minimum 1.6.5 and if there are any higher MINOR / REVISION versions it will get that. It WILL NEVER GET HIGHER MAJOR VERSIONS. So if 1.6.5 has 1.6.7 it will get that, if it has 1.7.7 it will that , but if it as 2.0 it will NOT get that.

Minimum or lower (~1.6.5): - The tilde sign will get HIGHER REVISIONS. For if 1.6.5 has 1.6.7 it will get that , but if it has 1.7.5 it will not be installed , if it has 2.0 it will not be installed.

As discussed in the previous sections package.json has “^” and “~” versioning mechanism. Now suppose in your package.json you have mentioned "jquery": "^3.1.0"and Jquery has a new version “3.2.1”. So in actual it will install or in other words LOCK DOWN to “3.2.1”.

So in package.json you will have “^3.1.0” but actually you will be using “3.2.1”. This entry of actual version is present in “package-lock.json”. So package lock files have the EXACT versions which are used in your code.

Below is the image snapshot of both the files.



Do not miss our Learn Angular Step by Step in 8 hours video training series: -


OR

You can also catch me teaching Angular in Mumbai at Andheri at http://stepbystepschools.net/?page_id=622.

Monday, July 11, 2016

== VS Equals in C#

Contents

Introduction

Point 1 :- Comparison on the basis of Equality

  • Scenario 1:- Value type comparison
  • Scenario 2:- Reference types comparison
  • Scenario 3:- String comparison, interning and object type casting
  • Point 2 :- Compile time VS RunTime

    Point 3 :- The NULL Situation

    When to use what :- Technical comparison VS Semantical comparison

    The Full Picture

    Introduction

    To compare equality between variables C# has provided two ways of doing comparison “==” and an overloaded method “equals()”. Most of the developers use “==” and “Equals” is hardly discussed.

    So in this small note we will discuss about differences between them and when to use what.

    Point 1 :- Comparison on the basis of Equality

    Answering to the point “There is no difference between equality comparison using “==” and “Equals()”, except when you are comparing “String” comparison.

    The common comparison Rule :-Whenever youare comparing variables they are either value types or reference types. When values types are compared they are compared on the basis of “Content” when reference types are compared they are compared on the basis of “Reference”(memory location) and not “Content”.

    The above rule is respected by both “==” and “Equals”.

    Scenario 1:- Value type comparison

    When you compare value types / primitive data types ( int , double etc) either by using “==” or “Equals” it’s always based on content. In the below code you can see both comparison methods will show as “true”.

    int i = 10;
    int y = 10;
    Console.WriteLine(i == y); // true
    Console.WriteLine(i.Equals(y)); // true
    

    Scenario 2:- Reference types comparison

    Now when you compare objects they are compared on the basis of reference (internal memory pointer). Below obj and obj1 comparison either through “==” or “Equals” will be false. So in the below code even though both the object have property name as “Shiv” still it shows unequal. Because the comparison is based on internal memory reference which is different for “obj” and “obj1”.

    Customerobj = newCustomer();
    obj.Name = "Shiv";
    Customer obj1 = newCustomer();
    obj1.Name = "Shiv";
    Console.WriteLine(obj == obj1); // false
    Console.WriteLine(obj.Equals(obj1)); // false
    

    But the below code will display true as the pointer points to same object.

    Customerobj = newCustomer();
    obj.Name = "Shiv";
    Customer obj1 = obj;
    Console.WriteLine(obj == obj1); // true
    Console.WriteLine(obj.Equals(obj1)); // true
    

    Scenario 3:- String comparison, interning and object type casting

    Now strings are immutable objects or reference types so they should be checked using the rules of reference types. In other words in the below scenario when we assign value to “str” it creates a string object and in heap has “test” stored. When you now assign “str1” this a different object so it should be a different instance.

    But look at the value, it the same. So C# string follows interning rule. In other words if the content is same “str” and “str1” they point to the same memory location and data. So both “==” and “Equals” will be true.

    objectstr = "test";
    object str1 = "test";
    Console.WriteLine(str==str1);
    Console.WriteLine(str.Equals(str1));
    

    But now look at the below code where we are explicitly creating new separate objects of string with same value. We are forcing and overriding interning behavior of string.In the below code “==” will return false even though the content is same while “Equals” will return true. This is one place where the equality behavior differs.

    objectstr = newstring(newchar[] { 't', 'e', 's', 't' });
    object str1 = newstring(newchar[] { 't', 'e', 's', 't' });
    Console.WriteLine(str==str1); // false
    Console.WriteLine(str.Equals(str1));  // true
    

    Point 2 :- Compile time VS RunTime

    The next point which makes them different is when do type checks happen. “==” does type checking during compile time while “Equals” is more during runtime. You can see in the below code how “==” is showing a warning message with green sign saying that you are comparing different types and you can have issues. “Equals” does not show any such warnings.

    Point 3 :- The NULL Situation

    “==” works with nulls but “Equals” crashes when you compare NULL values , see the below print screen.

    When to use what :- Technical comparison VS Semantical comparison

    “==” is a C# operator while “Equals” is a polymorphic method. So in other words “==” is a language feature while “Equals” is an object oriented programming feature which follows polymorphism.

    Now comparison is of two types one is purely based on content and reference, means computer based comparison and other is based on semantics. Semantics means the actual meaning of a thing. For example 1 <> 70 numerically ( technically) but 1 $ = 70 Rs in real world semantically.

    Some more examples:-

    • Technically: - 1 is equal to 1.
    • Semantically: - 1 Dollar is not equal to 1 Rs.
    • Technically: - “Destination “ word is not equal to “Last Stop”.
    • Semantically: - “Destination” means same as “Last Stop”.

    So technical comparison is computer based while semantic comparison is business based or we can say there is some kind of domain rule for comparison purpose.

    So now when to use “==” and when to use “Equals”:-

    • If you are looking for technical comparison then use “==” and most of the time “==” suffices as developers mostly do technical comparison.
    • If you are comparing semantically then you need over the “equals” with the semantic comparison logic and you need to use “equals” method while comparing.

    The Full Picture

    So if we list down all the point the final conclusion is the below table.

    == Equals
    Usage Technical based. Semantic based.
    Value types Content based Comparison Content based Comparison
    Objects Reference based Comparison Reference based Comparison
    String Content based Comparison Content based Comparison
    String with no interning Reference based Comparison Content based Comparison
    Type checking Compile time Run time
    Nulls Works Can crash

    See the following practical video on understanding the difference between == and .Equals :-

    Friday, March 11, 2016

    Learn ASP.NET MVC step by step: - Part 2

    Contents

    Learn ASP.NET MVC step by step: - Part 2

    Introduction

    Step 11: Understanding Model binder

    Step 12: Create model Binder Class.

    Step 13: Attach the binder with the object and execute

    Step 14: Implementing validation

    Step 15: Check If the validations are proper

    Step 16: Displaying error message

    Step 17: Client side validation with Jquery

    Introduction

    This complete article is a guest post written by Mr. Prathamesh mestry https://www.facebook.com/prathamesh.mestry?pnref=story . If you think he is doing a good job send him a silent thanks to his FB.

    In part 1 we saw http://www.codeproject.com/Articles/1081437/Learn-ASP-NET-MVC-Step-by-Step-Part basics of how to start MVC. In this session we will see model binder and validations. In validation we will do server side validations using data annotations and client side using Jquery.

    In case you are completely new to MVC we would suggest you to watch this video series Learn MVC in 16 hours given in the below youtube video.

    Step 11: Understanding Model binder

    Model binder helps to connect the UI controls to the model objects of MVC. In the previous article our UI text box names where same as customer class names so we did not have issues. But what if you text box names are different from class names.

    For example below is a customer UI which has text box names start with “txt” and class property names are without word “txt”.

    You can see the below class is not in synch with UI text box names.

    publicclassStudent
    {
    publicstringStudentRollNo{ get; set; } //Student Roll No.
    publicstringStudentName{ get; set; } //Student Name.
    publicstringStudentStd{ get; set; } //Student Standard.
    publicstringStudentDIV { get; set; }//Student Division.
    }
    

    This is where model binder class comes to picture. Model binder class binds the UI textboxes with model.

    Step 12: Create model Binder Class.

    To create a model binder class the first thing we need to do is implement interface “IModelBinder”.

    Right Click on ModelBinder Class  Implement Interface  Implement Interface.

    In the class we need to put the binding code in “BindModel” method as shown below.

    public class StudentBinder : IModelBinder
        {
    
    public object BindModel(ControllerContextcontrollerContext, 
    ModelBindingContextbindingContext)
            {
    HttpContextBaseobjContext = controllerContext.HttpContext;
    stringstuRoll = objContext.Request.Form["txtStudentRollno"];
    stringstuName = objContext.Request.Form["txtStudentName"];
    stringstuStd = objContext.Request.Form["txtStudentStd"];
    stringstuDiv = objContext.Request.Form["txtStudentDiv"];
                Student obj = new Student()
                {
    StudentRollNo = stuRoll,
    StudentName = stuName,
    StudentStd = stuDiv,
    StudentDIV = stuDiv,
    
                };
    returnobj;
            }
        }
    

    Step 13: Attach the binder with the object and execute

    Once the binding code is completed attach the binder with the object and execute to see the results.

    public ActionResult Submit([ModelBinder(typeof(StudentBinder))] Student obj)
    {
    
    return View("Student",obj);
    
    }
    

    Step 14: Implementing validation

    Now that we have the student screen and the output is displayed it’s time to put validations. So we will be applying the following validation for our student class:-

    • Student name and roll number is required.
    • Student Rollno should be alphanumeric with 7 characters with first three letter characters and last four letter numeric for example :-ABC1234, XYZ5678.

    In order to implement validations we need to import “data annotation” namespace and decorate the attributes on the student properties.

    using System;
    usingSystem.Collections.Generic;
    usingSystem.ComponentModel.DataAnnotations;
    usingSystem.Linq;
    usingSystem.Web;
    
    namespaceHelloWorld.Models
    {
    public class Student
        {
    
            [Required]
            [RegularExpression("^[A-Z]{3,3}[0-9]{4,4}$")]
    public string StudentRollNo{ get; set; } //Student Roll No.
    
            [Required]
            [StringLength(10)]
    public string StudentName{ get; set; } //Student Name.
    public string StudentStd{ get; set; } //Student Standard.
    public string StudentDIV { get; set; }//Student Divsion.
        }
    }
    

    Step 15: Check If the validations are proper

    When the object is filled the final output whether the validation is passed or failed is updated to the “ModelState” object. You can see in the below code we are checking if the “ModelState” object is valid by using the “IsValid” property.

    Depending on the property value its redirecting to the views.

    public ActionResult Submit(Student obj)
            {
    if (ModelState.IsValid)
                {
    return View("Student", obj);
                }
    else
                {
    return View("EnterStudent");
                }
            }
    

    Step 16: Displaying error message

    To display error message we need to use Helper class as shown in the below code.

    Step 17: Client side validation with Jquery

    Install Jqurey validation from Nuget.

    33.1 In Solution Explorer Right Click on MyApplication (HelloWorld).  Click on Manage NuGet Packages

    Search jQuery Validation.  Select Microsoft jQuery Unobtrusive Validation  install

    Using Helper class Create UI elements like Textboxes.

    Output Screen of EnterStudent View using Html helper Class...

    Validation Output 2(incorrect RollNo)

    Saturday, February 27, 2016

    Learn ASP.NET MVC step by step: - Part 1

    Contents

    Learn ASP.NET MVC step by step: - Part 1

    Introduction

    Step 1: Download & Install Microsoft Visual Studio 2013 Ultimate

    Step 2: Creating project

    Step 3: Add a New Controller

    Step 4: Add a view

    Step 5: Putting code in the controller and view

    Step 6: Run the project

    Step 7: Creating the student model

    Step 8: Adding the students controller

    Step 9: Creating the students screen

    Step 10: Writing logic for Submit click

    Step 11: Run the application

    Introduction

    This article series is targeted for freshers who want to learn ASP.NET MVC. So if you are senior then I would suggest to start from this MVC article.

    So in this two partarticle I will be creating a simple student data entry screen using ASP.NET MVC , ADO.NET and Jquery. I have used the below youtube video for reference purpose. And would encourage any new ASP.NET MVC learner to first see this videoto get a good kick start.

    I have broken this tutorial in to two parts. In part 1 we will see what we need to start MVC , we will learn the basics of creating controller , models and view and then we would create a simple student data entry screen and see how it works with the HTTP Post and submit.

    In the next article we will learn validations both client side and server side and also we will looking to how to interact with SQL Server using ADO.NET.

    Step 1: Download & Install Microsoft Visual Studio 2013 Ultimate

    For doing ASP.NET MVC the first thing we need is visual studio. So go ahead and install visual studio from the below link.

    http://www.microsoft.com/en-US/download/details.aspx?id=44915

    Step 2: Creating project

    Visual studio is an official IDE for doing any kind of Microsoft development work. And to do any Microsoft development we need to create a project. So click on file – menu and project as shown in the below figure.

    As said previously visual studio is used to do any kind of development like Windows, mobile , web and so on. So when we say ASP.NET MVC it is for web application. So select Visual C# à Web à ASP.Net Web Application àEnter File NameàPress ok as shown in the below figure.

    Now remember ASP.NET is the main framework on which MVC, WebAPI , Webforms and other web programming technologies work. So once you create the project you will get lot of options, select MVC from the same as shown below.

    Also change Authentication to “No Authentication” for now. We will learn more about authentication and authorization later. Lets first get our simple hello world project running and keep complicated things later.

    Once you click ok you should see the MVC project created with all necessary files as shown below. Do not get too much confused about the folder and file structure for now. For now concentrate on only three folders “Controller”, “View” and “Model”.

    Step 3: Add a New Controller

    In MVC architecture the first hits comes to controller, which in turn loads the model data and this model data is then sent to the view. So the first step is to create the controller. If you see the solution there is a controller folder. So let us add a new controller by click on the Controllers folderà Add àController.

    The next thing you will see is lot of readymade controller templates. But because we are learning let’s not use any readymade templates let’s start from scratch and select MVC 5 controller empty.

    Now when we add a controller, do not delete the word controller from the file name. For example if you want to create a “Home” controller then the full name of the file is “HomeController”. The word “Controller” should be present.

    4.3: Enter the Name Of Controller as Home.

    Step 4: Add a view

    So now that we have added controller, lets add view. To add view go to views folder and add view as shown below.

    Give a proper view name and uncheck the “user layout page” box.

    Finally you should see controller and views added in the respective folder as shown below.

    Step 5: Putting code in the controller and view

    So let’s start putting some code in Hompage.cshtml (HomePage View). In the HomePage.cshtml we have put a simple hello world text.

    In the controller let’s add a simple “ActionResult” method called as “GotoHome” and in that we are returning the view.

    namespaceHelloWorld.Controllers
    {
    publicclassHomeController : Controller
        {
    //
    // GET: /Home/
    publicActionResult Index()
            {
    return View();
            }
    publicActionResultGotoHome()
            {
    return View("HomePage");
            }sp;      }
    	}
    }
    

    Step 6: Run the project

    So once you are done with the previous steps just press control + f5 and run the project. It’s possible you get a below error as shown below. Do not get discouraged. This error comes because you have not specified the controller and action name.

    On the browser URL type your controller name (without the word controller) followed by action name as shown below. In our case we have “Home” controller and action name is “GotoHome” and you should be able to see the output.

    Step 7: Creating the student model

    Till now we have not added any model. So let us go ahead and create a simple model by the name students. A model is nothing but a class. So right on models folder and add a class as shown in the below figure.

    In the model we have created four properties for the class as shown below.

    using System;
    usingSystem.Collections.Generic;
    usingSystem.Linq;
    usingSystem.Web;
    
    namespaceHelloWorld.Models
    {
    publicclassStudent
        {
    publicstringStudentRollNo{ get; set; } //Student Roll No.
    publicstringStudentName{ get; set; } //Student Name.
    publicstringStudentStd{ get; set; } //Student Standard.
    publicstringStudentDIV { get; set; }//Student Divsion.
    
        }
    }
    

    Once you write the coderebuild the solution. I again repeat do not miss this step REBUILT THE SOLUTION.

    Step 8: Adding the students controller

    Let’s add a students controller from where we invoke the data entry screen for the students.

    In the controller do not forget to import model namespace.

    Lets add an action “Enter” which will invoke the data entry screen.

    Step 9: Creating the students screen

    So we have completed the model and the controller let us add a view for the same. So right click on the “Enter” Action and click add view as shown in the below figure.

    Lets give the view name as “EnterStudent” and uncheck the layout page box. Layout pages are like master pages in ASP.NET webforms.

    In view let’s put the below code which has four textboxes for the student data and one submit button.

    So now the user will enter data and click on Submit button , we need some kind of logic in the controller for handling the submit click.

    Step 10: Writing logic for Submit click

    To handle the submit click we need to create submit action in the student controller.

    When this submit action is called the data sent from the form will be collected and displayed in a view. Let us add a new view with name “Student” to this submit action.

    This view we will connect with the model namespace where we have the customer controller.

    Below is the view of the student.

    When the user click on submit we need to send data to the submit action. So on the form given the action name as “Submit” and method as “Post”. And also ensure that all textboxes are provided with a name as shown in the below code. For now keep name of the textbox and the class property names same.

    In the submit action we will use the request object to fetch data and load the student object and this student object is sent to “Student” view which we have created.

    publicActionResult Submit()
            {
    Studentobj = newStudent();
    obj.StudentRollNo=Request.Form["StudentRollno"];
    obj.StudentName = Request.Form["StudentName"];
    obj.StudentStd = Request.Form["StudentStd"];
    obj.StudentDIV = Request.Form["StudentDiv"];
    return View("Student",obj);
            }
    

    In this the student view we are displaying the values by using the “Model” object as shown below.

    Step 11: Run the application

    So now that all the hard work is done, take a deep breath and press control + f5 and enter the URL in format of controller name/action name :- http://localhost:22144/student/Enter

    Enter data in to the text boxes and press submit.

    And you should see this screen.