Angular2 - A quick start

Preface

In today's world of modern technology, mobile solutions has taken off in the speed of photons. Everyone talks about building a web application wether they have a need for it or not. Studies have indicated that more than 40% of the businesses have seen no improvement by going mobile. They were doing as much business before they invested into mobile. Now does that mean we should not build mobile applications?. Nope. It only indicates to us that mobile technologies are not a viable alternative for web as yet. Further, it suggests, that mobile is a great supplement for web. From a developers perspective it conveys a lot more. Things that they have taken for granted in the past on UI will no longer escape eyes of end-users Like choice on controls, fonts, formats, page layouts, navigation, etc. Proliferation of mobile technology and mobile solutions has made life easy for users, they expect same sort of easy and convenient experience on web too.

UI is not the only change. In the past, when we start developing web applications, rarely did people think about 3-tier architecture. Except for enterprise solutions, most of the solutions were tightly coupled, wether for a reason or by mistake, is subjective.

We are left with 2 things from the past that we want to fix right away when we start building our application. Guess what, Angular2 helps you in both from the word go.

First on UI, Angular2 takes a deviation from the past. Rather than building a view, or a page, it now allows to think & build components that are reusable, either with-in the application or anywhere outside the scope of application. If the input and output directives are well defined, you have a seasoned machine that can run for ever (or at least till Angular3 comes along with bigger magic).

What about Angular1 & how does Angular2 fair compared to Angular1?

There are a lot of things that are different in Angular2, but that does not mean you are alienated. Angular2 is something that's inline with needs of todays requirements. How do I say? Look around all the latest UI frameworks from React to Sencha, all of them have changed development paradigm of yester-years. Building monolithic large applications into something that's smaller, faster, scalable, configurable solution. Angular2 will not be left behind in this approach. Angular1 had a lot of great features. Acceptability from developer community is a testimonial of how good it was. Angular2 takes it to another level - build components. Unless we build components, think of application as a conglomeration of components, we are seldom going to change the way they we write application.

How do we go from Angular1 to Angular2?

This post is more about Angular2. Towards the end of this, I'll try to put together things that we need to take care of for migration. Angular team has been talking about or they already have a migration tool that helps you in the conversion process. In addition, both Angular 1 and Angular2 can co-exist. This is good news to all Angular1 folks. It means you don't need to sweat it out over-night to convert all your Angular1 code to 2.X. Gives you time think through, get used to the newer ways of development, build bridges, get the infrastructure ready and change one page/view/component at a time and then have the entire app running on Angular2. Although I may not give you a very objective answer, I hope this at least allows time for a deep breath and tells you that all is not over.

What are we going to do here?

This is more a hands on exercise for Angular2. We'll build end-to-end solution on Angular2, in the process, touch on a variety of areas that will make it very easy for you to see how Angular2 fairs against some of the other web technologies and in the process gets you acquainted to new ways to handle things.

To start with I would say this will be a 15 - 18 part blog. In each step we will build on the solution one step further to understand Angular2 more. I may also want to caution you that we will not be able to cover Angular2 exhaustively. This is more of an attempt to introduce Angular2 concepts the way I learnt it from a lot of resources out there. With that introduction lets talk about what we are going to build. We build a SPA for contacts. It will have both form and list to allow for experience in both the world.

Kickstart

To start on application development we need a bootstrap to take care of several things folder structure to say the least, IDE, choice on languages etc

• Download boilerplate code from here https://github.com/mschwarzmueller/angular-2-beta-boilerplate
• I prefer using Webstorm. It does a lot of intellisence and imports great, but you can use what ever you are comfortable with
• Typescript is what we will use in this case. You can learn a lot more from here https://www.typescriptlang.org/docs/tutorial.html