Wednesday, August 9, 2017

Angular 2  —  Exception Handling Mechanism

One of the main issue which i came across with angular2  was error handling.  When you are developing an application, you are in full control, and you will be able to see the errors and handle them accordingly.
But as you soon deploy it in the production,  you can’t see what your user is seeing and experiencing and you not capable of knowing about errors unless you find a way to be notified about the exceptions.
This solution i have implemented recently and it worked pretty well. Angular 2 has his own way to catch and handle errors. The default implementation of ErrorHandler prints errors messages to the console. You can intercept the default error handling and write a custom exception handler that replaces this default as appropriate for your app.
If you have a production server and you want to send the errors to the server, Let’s see how we can do it.

you need to create your own ErrorHandler class that implements the default ErrorHandler. The only method that required is the handleError method that takes the error as an argument.

 import { ErrorHandler } from '@angular/core';  
 export default class MyErrorHandler implements ErrorHandler {  
   handleError(error) {  
    // send the error to the server  
   }  
 }  


The next step you can go is to change your injector to use your implementation instead of the default. So code will be something like this,

 import { ErrorHandler } from '@angular/core';  
 export default class MyErrorHandler implements ErrorHandler {  
   handleError(error) {  
    // send the error to the server  
   }  
 }  

That’s all folks. If you don’t want to ignore the Angular default handler, you can extend the ErrorHandler class and also call the default handler like this:

 import { ErrorHandler } from '@angular/core';  
 export default class MyErrorHandler implements ErrorHandler {  
   handleError(error) {  
    // send the error to the server  
   }  
 }  

That's it guys!. You can apply this method on your application and make it error free on production. 
You can check the sample on plunker and play with it!

Monday, August 7, 2017

Google search tip for angular

This tip is for Angular enthusiasts, whenever you search something on google for angular, it will end up showing the results with angularjs(1.x) aswell. To avoid this, you could simply do the following


add “ -AngularJS “ to your search query



For example,


https://www.google.com/search?q=Angular+components+with+%40Input%28%29+-angularJS


Will return only the results which matches angular. This will seriously improve the productivity and help rapid development. Spread this tip across your friends.

Monday, July 31, 2017

Running Python Inside SQL Server

One of the valuable addition to data analytics by Microsoft was adding python into SQL server.Now SQL Server will support the two primary languages of Data Science within SQL Server R and Python. I am a fan of Python and  Python is near the top of the most popular programming language charts, many people are interested in learning more about it.  As many professionals are unfamiliar with Python, i wanted to this post about the same.

Installing Python in SQL Server

























If you have already used R with SQL server then the process for using Python in SQL Server is very similar to it.  Microsoft renamed R Services to Machine Learning Services, and now allows both R and Python to be installed, as shown in the screen.  Microsoft’s version of Python uses Anaconda, which is an open source analytics platform created by Continuum. This is where Python differs from other open source languages, as Continuum is providing the version of Python as it contains data science components which are not included in the standard distribution of Python. Continuum also sells an enterprise version of Anaconda, with of course more features than come with the free version. Also it is mandatory and  important to remember the python environment as you will need select the same distribution when running Python code outside of SQL Server.

Configuration Changes for Python

The last thing needed to run Python is to configure and restart the SQL Server Services. In a new query type the following command

 sp_configure 'external scripts enabled', 1  
 GO  
 Reconfigure  
 GO  

After restarting the SQL Server Service, SQL Server will now run Python code. Since Python is easy to learn for even a novice developer. Code is easy to read and you can do a lot of things just by looking at it. Lets dig into python with sql server and do wonders with data analytics.

Saturday, July 15, 2017

Angular 4.3 Now released

Angular version 4.3 has been released. This is a very minor release.

What’s new?
  • It has HttpClient, a smaller, easier to use, and more powerful library for making HTTP Requests. Learn more about it from the docs
  • New router life cycle events for Guards and Resolvers. Four new events: GuardsCheckStartGuardsCheckEndResolveStartResolveEnd join the existing set of life cycle event such as NavigationStart
  • Conditionally disable animations via a new attribute, [@.disabled]
  • Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature. 
Wondering what have changed ? For the complete list of features and bugfixes check the changelog.

Sunday, June 11, 2017

Build a select dropdown with *ngFor in Angular 2

One of the most repeated questions with angular2 i have come across Stack overflow is "how to generate a select dropdown with an array or object". Hence, i decided to write a sample post with sample code to ease the search.

I will be posting two samples with one simple array and other with object.

Assume you want to generate a dropdown select by having an array with years.

  years = ['2016','2015','2014'];  

The app.component.ts code will look like,

 import {Component} from '@angular/core';  
 import {Http} from '@angular/http'  
 import {bootstrap} from '@angular/platform-browser-dynamic';  
 import { Component } from './Component';  
 @Component({  
  selector: 'material-app',  
  templateUrl: 'app.component.html'  
 })  
 export class AppComponent {  
  years = ['2016','2015','2014'];  
  selectedyear = '2015' ;  
  onChange(year) {  
   alert(year);  
  }  
 } 

In the above cocde selectedyear indicates the default value of the dropdown whenever the app is loaded.  onChange is the event gets fired whenever a option is changed, you can capture the selected value with the event.

And the template  app.component.html will look as follows,
 

*ngFor is being used to repeat the items as options. It's simple as above.

DEMO USING ARRAY

Next we will see how to bind a object using *ngFor . Assume  if you have a object and want to bind the keys as drop down values,

 currencyList = {  
 "USD": {  
 "symbol": "$",  
 "name": "US Dollar",  
 "symbol_native": "$",  
 "decimal_digits": 2,  
 "rounding": 0,  
 "code": "USD",  
 "name_plural": "US dollars"  
 },  
 "CAD": {  
 "symbol": "CA$",  
 "name": "Canadian Dollar",  
 "symbol_native": "$",  
 "decimal_digits": 2,  
 "rounding": 0,  
 "code": "CAD",  
 "name_plural": "Canadian dollars"  
 }  
 };  

to get the keys of object you can use  Object.keys(this.currencyList); and the rest is same as above sample.

DEMO USING OBJECT






Sunday, June 4, 2017

ESLint with Visual Studio Code (vscode)

Poor code quality application can lead to many serious problems when the size of code grows. Linting is the process of checking the source code for Programmatic as well as Stylistic errors. This is most helpful in identifying some common and uncommon mistakes that are made during coding. To do this process many linters are out there like eslint, jshint, jslint etc.  



All the above helps us to be consistent in semicolons, quotes & code formatting etc. In this blog post i will be showing you how you can setup ESLint with visual studio code which is my favorite code editor.


Install ESLint global


Install it globally by using NPM by this command:

 npm install -g eslint  

Download ESLint extension 

Install the ESLint by downloading the extension, as shown below,
















After downloading we need to initialize the ESLint.

Initialize ESLint in project

Next is to initialize ESLint by using Ctrl + ` to open the terminal in Visual Studio Code
















That's all folks, now your project is setup with ESLint, from now on it will be very easy to catch lint errors and fix them even if you had missed it. Let's see ESLint in action.

















And if you want to explore more on ESLint you can explore it on the website http://eslint.org/