How to create AngularJs Application in Visual Studio 2015

Nowadays one of the most popular client-side framework is Angularjs and when we talk about .net developers they love to use Visual Studio IDE for developing any application because they used to with visual studio.

Once, you have installed visual studio 2015. Now time to add some extension to support AngularJs.

Open visual studio IDE and go to tools section from the main menu and select Extension and Updates.

The popup is open once the selection was done. Now click on Online from the left side menu and search “SideWaffle" which is one of the extension provide client side templates for visual studio.

Once result populates for SideWaffle, Click on install button so It will take some time to install templates on visual studio.



Once installation was done for SideWaffle then we are done with all require setup for AngularJs application for visual studio.

For creating new AngularJs Application in Visual Studio

Select File, New Project. Under the Visual C# templates, select SideWaffle under the Web, select AngularJs And Web API - Empty template and name the new project “FirstAngularJSApp” and click the OK button to create the new project.



Now we are ready to do magic with AngularJs Application and Web API.
SideWaffle also installs many other templates which are useful for other applications.

Hope you like it. Keep a reading blog.

How to get application base directory and WWWroot path in asp.net core 1.0

Short and simple post for accessing Application base directory and wwwroot path in asp.net core 1.0.

This post is useful for newbie of asp.net core framework because many things changed from previous version of .Net framework.

IHostingEnvironment service to get both Application base directory and wwwroot. 
Let's see code example for IHostingEnvironment service.

private IHostingEnvironment _hostingEnvironment;
public ValuesController(IHostingEnvironment hostingEnvironment)
{
    _hostingEnvironment = hostingEnvironment;
}
// GET: api/values
[HttpGet]
public IEnumerable<string> Get()
{
    // _hostingEnvironment.WebRootPath -- wwroot folder path 
    // _hostingEnvironment.ContentRootPath -- Application Base Path

    return new string[] { _hostingEnvironment.WebRootPath, _hostingEnvironment.ContentRootPath };
}

It's a simple and informative post regarding asp.net core 1.0.

Hope you like it and keep reading for more!!

Microsoft has released Asp.Net Core 1.0

Recently Microsoft has released Asp.Net Core 1.0 with significant updates. New release with many updates like more modular, cross-platform, and cloud optimized.  ASP.NET Core is now available, and you can start using it today by downloading it here.

ASP.NET Core 1.0 is an open source web framework for building modern web applications that can be developed and run on Windows, Linux and the Mac. 

One good news for developer who are confuse for MVC and Web API because of now that it combine into single web programming framework.

For more detail please read of Microsoft Website.

Go to Implementation feature in Visual Studio 2015

Latest Microsoft IDE is Visual Studio 2015 and there are many features introduced with this IDE. So I always existed to explore those features whenever new feature comes.

We are going to talk more about one of the more productive feature is Go to Implementation. That is very easy to navigate actual implementation.

Developer's life is easy to pick/navigate on actual implementation because previously this option is not  available to need to depend on some third party tools like Resharper, etc.

Older version on Visual Studio has only Go to Definition option so it will bring to interface where function is declare and not able to reach on actual implementation.

So for more productive and reach at actual implementation. Go to Implementation feature is useful and I love to explore this feature and make development life easier.

Hope you like this new feature from Visual Studio 2015.

How to use constant in AngularJs

As we know like some short of configuration require in project level. How we do such configuration in Angularjs using Constant.

Let’s more talk about how to declare and use Constant configuration.

We are going to cover classic example of constant . Whenever you want to use config that could be ineluctable at any part of application and it works.

Lets see code here.

(function () {
    'use strict';

    angular
        .module('app', [
        // Angular modules
        'ngAnimate',
        'ngRoute'

        // Custom modules

        // 3rd Party Modules

        ])
        .constant('userRole', {
            owner: 'Owner',
            administrator: 'Administrator',
            user: 'User'
        });
})();

As define userRole as a constant in code same like JSON format so there are better way to config in your application. Classic way might be it is not best way to use constant instead of create a service and load with $http a JSON file.

Once you declare constant than how to use in your application.

(function () {
    'use strict';

    angular
        .module('app', [
        // Angular modules
        'ngAnimate',
        'ngRoute'

        // Custom modules

        // 3rd Party Modules

        ])
        .constant('userRole', {
            owner: 'Owner',
            administrator: 'Administrator',
            user: 'User'
        }) 
 .controller('MainCtrl', function (userRole) {
            // Do something with myConfig...   
            var vm = this;
            vm.Role = userRole.administrator;                        
        });
})();

In the above code we have inject userRole on MainCtrl so we can use userRole inside the controller.

Define controller as vm (var vm = this) and userRole assign to Role property of controller like vm.Role = userRole.administrator;

You can find source code from GitHub.

That’s it. Hope you like it. Stay tuned for more!!

HtmlEncode and HtmlDecode in Asp.Net Core or Asp.Net 5

Latest version of Microsoft Asp.Net Core 1.0 provide Html encode and decode feature using following Namespace and class.

As we know now Microsoft Asp.Net Core is open source so we can see the actual code of system level classes which was not possible earlier.

All source code avalaible in GitHub on aspnet repository.

HtmEncode and HtmlDecode is now part of System.Runtime.Extensions.

namespace System.Net
{
    public static partial class WebUtility
    {
        public static string HtmlDecode(string value) { return default(string); }
        public static string HtmlEncode(string value) { return default(string); }
        public static string UrlDecode(string encodedValue) { return default(string); }
        public static byte[] UrlDecodeToBytes(byte[] encodedValue, int offset, int count) { return default(byte[]); }
        public static string UrlEncode(string value) { return default(string); }
        public static byte[] UrlEncodeToBytes(byte[] value, int offset, int count) { return default(byte[]); }
    }
}

How to use HtmlEncode and HtmlDecode static property.

var dummyString = "Dummy%20String";
var decodeString = System.Net.WebUtility.HtmlDecode(dummyString );

That’s it. Hope you like it. Stay tuned for more!!

isNaN funtion and NaN error in Javascript

This blog post is dedicated to JavaScript newbie and JavaScript lover.

NaN is a "Not a Number" in JavaScript.

1. NaN error
- NaN error is very common for JavaScript developer. When you are looking some calculation that time generally come.

- One thing remember when you are working with JavaScript  and declare any variable (var i;) and that variable value default as 'undefined'. so its a good practice to assign default value to the variable.

//var first = undefined;
var first;

//So when you do console.log(first); its print in console 'undefined'
console.log(first);

So take care it and don't forget to assign default value to variable else it will create a problem on some statement.

var first = 0;

consol.log(first)
//Console output is 0

When getting NaN error?
- When variable value is undefined and use that variable and calculate with some other variable that time getting NaN.

Let's see example.

var first;
var second = 4;

console.log(first + second);
//Output is NaN

//As we prevent NaN, declare variable with default value
//in our case first variable value is undefined so let assign value to variable.

first = 0;
console.log(first + second);
//Output is 4

2. isNaN function
  - It's a global function in JavaScript to check if a value is a NaN value.

When you writing JavaScript code for calculation of numeric values and its a safe way to handle numeric value and check value is not a NaN value using IsNaN function.

Let's see example how to handle NaN value in JavaScript.

var first;
var second = 4;
var sum = first + second
if (isNaN(sum)){
  console.log("value is a NaN");
}else{
  console.log('Value is not a NaN');
}

Hope this is useful for newbie of JavaScript.