Getting Started with Angular 2 step by step : Your First Component

rnWhy Should You Care? The JavaScript and web world has changed a great deal since Angular JS was discharged. Angular 2 takes favorable circumstances of the considerable number of advances that have occurred from that point forward, grasps web norms and gets rid of a ton of develops that are currently local to Javascript, for example, modules,classes or decorators. And not only that,it draws on all the teachings of tons of projects carried out by thousands of developers in AngularJS to provide a more consistent and compact developer experience.One with a reduced number of concepts to grasp and an easy-to-learn development model and syntax. It is also faster,provides server-side rendering out of the box,is cross-platform,supports legacy browsers. etcrn Angular 2 is the regular way ahead for all the AngularJS engineers out there and an incredible decision for those that welcome a stubborn system with a reasonable arrangement of defaults,focus on measured quality and testability.rnIs Angular 2 Ready? Angular 2 is ready indeed! since the initial publishing of this article Angular 2 has gone from beta, to RC, to final and now it is in its version 4.It is used not only by numerous companies but even extensive lt at Google in more than 200 projects including AdWords,GreenTea (Google's internal CRM system), Google Fiber and Google Cloud Platform.rnThe Code Samplesrn You can download the complete code samples for this blog post from this GitHub repo. You can likewise check the incredibly cool online supervisor Stackblitz which has wonderful suppoprt for composing Angular models on the web.My recommendation is that you follow the tutorial along using your own development environment,that way you get to enjoy the full Angular developer experience.But if you do not have time or energy to set it up right now, then try Stackblitz.rnGetting Started with Angular 2 and Typesciptrn The most ideal approach to begin learning Angular 2 and Typescript is to utilize the Angular CLI to bootstrap another task. The Angular CLI is incredible in light of the fact that it incorporates all that you have to begin composing your Angular 2 application immediately: Afront-end fabricate pipeline to traspile your TypeScript into JavaScript that can keep running in the browser,lots of generators to platform your application, a web advancement server that naturally mirrors your adjustments in the programs as you make them and much more.I call that zero-grinding learning. So start by installing the Angular CLI using npm ( you will need to install node.js and npm in your development machine before you can continue).In your terminal of chioce type : PS> npm install -g @angular/clirn Presently you are prepared to utilize the Angular CLI to make another project.The direction that you use to get to the Angular CLI is ng.To make another application type the accompanying.rnPS> ng new angular-get-started --style scssrn This will make another Angular 2 venture sans preparation and set it up with the goal that you can utilize SASS as CSS preprocessor.If you go inside the angular-get-started folder that should have just been created you will find a folder structure that will look more or less like this : // app source code (and specs) -scrrn -app # your app source code (and specs) -assets # static assets like images, etc. -index.html # the entry point to your apprn -styles,scss # the global styles for your apprn -environments #here you can define different environment configuration (prod,dev, etc). //dependenciesrn - node_modules# the source code of your app's dependenciesrn - package.json# the manifest of your app that states all dependenciesrn//TypeScript configurationrn -tsconfig,json # TypeScript compiler configurationrn -tslint.json # TypeScript linting configurationrn//Testingrn -e2e #a folder with end to end testsrn -karma.conf.js #karma test runner configurationrn -protractor.conf.js # protractor e2e tests configurationrn- .gitignorern-README.mdrnYou can test everything works as it should by running the development server.Type the following command.rnPS> ng serve --openrn# the short-hand syntax is : ng s -o This should start the development server,open a browser and load your app.You can stop the server any time by typing CTRL-C a couple of times in the terminal.But for the time being just rejoice!You have created your first Angular 2 application! #INDEX.HTML THE ENTRY POINT FOR YOUR APP The index.html is the entry point to your application. *It links to yours styles and javascript filesrn*It provides the HTML markup for your application with the custom element.