Recently before some time Angular 6 was released and there are a couple of features that are added with Angular 6. In this blog post series, we are going to learn all these new features one by one. Today this post is all about Tree Shakeable providers in Angular 6 which is a new recommended way to create a new provider or service Angular 6.

What are Tree shakeable providers in Angular 6?

In an earlier version of Angular, we need to register service or provider under provider sections of your module like below.

Now with Angular 6, There is recommended a way to register a provider or service in Angular directly inside the @Injectable decorator using new providedIn attribute. It accepts ‘root’ as a value or any module of your application. When you use ‘root’ your services or providers will be registered as a singleton and you don’t need to add that provider or service in the module. Same way if you add module instead of ‘root’ it will act as a singleton on your module.

This is how its look like now.

This is the new way of registering provider or service. This led us to better tree shaking in the application. What was happening in an earlier version of angular is If you add a service in providers list it will finally be added in bungle which is created at the end. Even if it not used in the application which is sad and can increase your size of the bundle. Most of the time we don’t add services in the application which we are not going to use But when you use third-party services it provides a list of services and we want only a few. So new smart Angular 6 compiler add only those services in the bundle which is actually being used.

Demo:

Now let’s create an application and see how it looks like. So I’m going to create an Angular6Provider app with Angular CLI like following.

Once we are done with creating angular 6 application we are going to create a new service called “MessageService” like following.

And following is the code I’ve written for printing a simple message.

Here in the above code, you can see that I have created a method called ‘printMessage’ and I am returning a simple observable of the string as a message. Please do notice that providerIn attribute in injector decorator.

Now let’s write some code in ‘app’ component to get the message from service. Following is a code I have written for that.
Here in the above code, You can see that I have injected the message service in the constructor of the component and then I have created a ‘printMessage’ method to get a message from our message service. Now let’s print this message in HTML part of app component like below.

Here you can see I have just printed a message via two curly braces. Now let’s run this application and with ng serve command and here is output in the browser as expected.

I love Angular as Framework and I used it for many applications so I always look forward to how I can make my life easy as a developer and How I am more productive. So Angular Language Service Extension help do that.

In this Video, I have demonstrated Angular Language Service Extension with Visual Studio Code. It analyzes your property and methods from Angular Component and provides Great Intellisense in App component HTML pages in Visual Studio Code. So you don’t have to worry about your spelling mistakes and other stuff.

Recently, I have been enjoying creating videos, So I have created a video related debugging of the Angular app in Visual Studio Code. In this video, I have shown how we can debug Angular 5 application in Visual Studio Code with Chrome Debugger Plugin and what configuration we need to make. And It always has a great feeling when you debug your application in the code editor itself instead of the browser.

TL;DR;

I have been using Visual Studio Code for quite a good amount time and I am loving it as a code editor. Recently I have started using it as my development editor for Angular 2 as it has recommended by the Angular 2 development team also. There are quite a few good extensions available in market place for the same. In this blog post, we are going to talk about my favorite extensions of Visual Studio Code for Angular 2 development.

With this extension, you will get TypeScript extension as well as some of HTML snippets for binding of Angular 2 as well as some of the ngform and other snippets.

Path Intellisense from Christian Kohler:

It is the plugin that autocompletes the path and provides Intellisense for the paths and it is a great extension and comes quite handy when you put different JavaScript and CSS files. You can find more about it at the following location.

Auto Import by Steoates:

It is an auto import extension for everything. It finds, parses and provide code actions and code completion for all available imports. It works great with TypeScript and even for TSX which used for react.js with TypeScript. You can find more information about that extension at the following link.

That’s it. This all extensions are my favorite extension for Angular2.What are your favorite extensions that make your life easy? Please put your favorites in this blog post comments. Hope you like it. Stay tuned for more!!

Recently, I have written a blog post about Angular 1.5 Packages for the sublime text 3. It was a great hit and lots of people were asking for packages for the Angular 2. So I thought it would be a good idea to write a blog post about it. So let’s get started. We have already learned that how we are going to install packages on the sublime text 3. So Followings are packages that are good for angular 2.

As we all know that Angular2 is built with TypeScript and So first thing we need is a Typescript package.

Typescript:
This plugin is developed by Microsoft it self. You can find more information at their Github Repository.

There are code editing services provided by this package. You can do lots many things with the package like Rename, Format document i.e where different shortcuts are already defined in the GitHub repository. This package is a must for Angular 2 development.

Angular 2 snippets:
This package provides code completion and snippets for the angular 2. It has been imported from John Papa’s code completion for visual studio code.

One of my friends was using Sublime text 3 as editor for the Angular.js application but he was using it without packages so he has to do manually all the things. I suggested him few packages and now he is much more productive than ever. So in the blog post, I’m going to share few tips and packages working with Sublime text.

Installing package on Sublime Text 3:

Sublime Text 3 support packages that make Sublime Text 3 a great choice for any kind of Web Development project. This makes developer’s life easy and developers will be much more productive than ever. Sublime Test does not come with inbuilt package manager but there is a third party package manager called “Package Control”. You can find more information about that on the following location.

Angular.js 1.5 packages for Sublime text:

JS Hint:
If you have ever work with JavaScript you should be knowing about linter for JavaScript. JS Hint is a JavaScript linter which will look your code and verify that it has proper styling, proper syntax, and error related to JavaScript best practices.

To make sure that this plugin works correctly. You need to install JS Hint installed globally via npm:

npm install -g jshint

Then type Ctrl+ Shift + P and select install package.

Once you click on Install it will load the extension from the repository and you can install the extension you choose.

AngularJS:
This package is developed by Angular UI Team. It contains lots of functionality like

Code completion for Inbuilt angular libraries.

Angular-Related Snippets.

Directive completion of Custom Defined Directives

To Take advantage of this plugin’s syntax highlighting You need to change the view type of your HTML page file View-> Syntax-> HTML(Angular.js).

And then you can code completion like following.

JSFormat:
This package helps you format your Javascript and JSON. It is based on JS Beautifier. It highly configurable and you can also define your preferences. There are plenty of options available you can see that on the following link.

John Papa’s Angular Snippets for Sublime Text:
John Papa has created great snippets for Angular.js and it’s very useful. He has written a nice blog post about how to install it with Sublime Text. You can refer that from the following link and refer that.

Before some time I have written a blog post about routing - Routing with UI-Router and Angular.js I have got few questions from my reader in email. One of question is to how we can activate state of UI-Router as UI-Router works with state instead of URLs. In this blog post we are going to explain, different ways to activate state in UI-Router.

There are three ways of activating state in UI-Router.

Call $State.go

UI-sref directive as link

Navigate to URL associated with State

We are going to learn about this three ways in details.

Call $State.Go:

It is a one of convenient method of changing state, Returns a promise representing the state of transition. It calls underlying $State.Transition method internally but automatically sets option location: true , inheritance:true, relative: $state.$current and notify:true. This allows you to set easily update parameters with passing arguments. You can find more information about that at following location.

UI-sref directive as link:

We have used this method already in previous example. It is a directive that bind a link to state. If the state has an associated URL, the directive automatically generate and update the href attribute via $State.href() method. Clicking on link will trigger a state transition with parameters.
You can use it in following way.

ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()

Navigate to the URL associated with State:

As we have seen in previous blog post, most of the state will have URL associated with it. Now when user access the index.html/contactus, it will activate contactus state and load the template associated with this state. You can also pass the parameters with that. Following is documentation for the same.

In Today's world, Angular.js is one of best JavaScript framework available to create Single page applications. It's provides some great features and with the help of this features we can built great interactive apps. In any single page application routing is very important as in most of the time single page application will not have full post backs. So routing will be very important to give feel like normal page application and sometimes proper routing will increase search engine ranking also.

So in this blog post we are going to learn how we can create routes in Angular.js application with help of UI-Router.

What is UI-Router:

UI-Router is a routing frame work created Angular.js team and its not a part of Angular.js But it built on top of Angular.js. You can say it's a 3rd-Party module and is very powerful. It support most of things that we can do with ng-route and also do many other stuff that is not possible with ng-route.
You can find more information about UI-Router at following link.

It allows you to strong type linking between state based on state names.

State allows you to map and access different information about different states and you can easily pass information between states via $Stateparams parameter.

With states approach your views are not tied to the URL and it is tied to states. Which can be very useful in large applications as you can change UI part without changing URLs.

You can also change Partial UI of application which is not possible with ng-route.

So what are we waiting for let's create a sample application with UI-Router and Angular.js.

Sample application with UI-Router:

I'm going to use visual studio for creating this sample application. So that we can use IIS local express to host this application. I'm going to create asp.net web application.

We are going to use empty asp.net web forms application as we are not going to use asp.net code here it's a simple HTML page application to demonstrate the power of UI-Router.

We are going to create sample application with 3 pages.

Home

About Us

Contact Us

So for that we need three html pages which will acts as partial views just like ASP.NET MVC partial views or user control in ASP.NET Web Forms.
I'm going to create a very basic HTML pages with following code.
home.html page code:

<h1>Home</h1>

About Us HTML page code:

<h1>About us page</h1>

Contact Us HTML page code:

<h1>contact us </h1>

And now we are going create index.html and following is a code for that.

If you see above code you can see I have added angular.js and angular-ui-router-min.js JavaScript files from the cloud flare CDN and then I have created a ng-app "routerDemoApp" with body tag of html page. I have used UL and Li ta and UI-Sref to create link for our routes. Here also notice ui-view tag in one of div where html pages will be rendered in this div.

So now basic infrastructure is ready now its time to create JavaScript code for our application. So lets create app.js file and write code like following.

So if you see above code carefully, Here I have created a angular app module called routerDemoApp and I have injected dependency of UI-Router. Then in config function we have created different states for Home, About Us and Contact Us. You can see I have passed two parameter url and template url for each state with respective html pages. Also I have written otherwise function which will return home state by default.

Now let's run this application in browser.

So by default Home page is loaded as you can see and in URL also you have /home now when you click on About us it will load about us page like following.

So it's very easy to create routing with Angular UI-Router in future post we will see how we can use nested view and multiple view.