Hello Everyone if you previously have worked with angular 1.x or not. It doesn’t matter you can easily follow my tutorials to get started with Angular (2 onwards). There are two generations of angular 1st and 2nd (2 onwards). All the 1.x are considered as first generation that is called AngularJS. Starting from 2nd version the framework has rewritten and is no relation with previous one. This version is simply referred as Angular. If you haven’t worked with Angular 1.x, you can start learning Angular. Before starting Angular, I request you to get started with angular fundamentals from here. So that you can have at least basic idea about angular and it’s structure.

Angular Pre-requisites

Before getting started with angular app development you should already have the following technologies installed on your system.

• Node js : You can install it from here.
• Npm (Node package manager) – It comes with nodejs so you don’t need to install it separately.
• Angular Cli – It is a dev tool from Angular team that helps you create a skeleton of you app. You may do it manually but It will add a lot of hassle to your development process. So I recommend you always use Angular cli for your angular app.

To get started with the angular lets first install the angular cli globally. It’s an npm module provided by angular team.

npm install -g @angular/cli

After having the angular-cli installed on your local system. Simply go to the folder where you want to keep your app code-base and run the following command to create your app skeleton.

ng new my-app

After running the above command you will be asked following questions.
1. Would you like to add angular routing?

Another Important thing for every app is routing (different urls for different views or pages). if you are coming from the php background. you may feel it little bit weird. Because managing the url is the back-end responsibility. But now era has changed. Now your app has two separate aspect front-end and back-end. Both will have their own routing mechanism. All the front-end’s dynamic behavior will be handled by angular and back-end will only be serving as resource server (delivering static files) or api server (user dependent dynamic data, commonly in the form of json).
With angular routing you will be able to navigate between different pages in your Angular app. Press y and enter to get the basic router setup for your app. This will add a routing module file to your project, where you can add the routing detail.

2. Which stylesheet format would you like to use?

Now This is asking you which stylesheet format you want to use.
These css preprocessors make your coding experience smooth. So if you are not aware of these I recommend to have a brief overview here for sass/scss and less. Press up and down arrow to highlight the suitable choice for your project and press enter.

After selecting the stysheet format, angular cli will start creating the project files for you.

this will create a required skeleton for your app to get started easily with all the required node modules pre-installed.

After creating the app structure go to the folder and initialize the app with following command.

cd my-app
ng serve --open # or you can you -o

The –open or -o flag to the above command automatically opens your new app in your default browser. Your app will be running under http://localhost:4200. Once app starts you will see the following default view in page.

Now you can go into the src/ directory in your project folder and edit the files as you wish. Your changes will be auto detected by angular when you save save files in editor and reflected in browser. You don’t need to reload the browser manually.

So this is all the very basic chapter to getting started with angular and creating your basic app skeleton with just few commands. this way you don’t need to setup the webpack or any other modules on your own. Angular is superior above all and you can deliver you apps much faster and systematically organize your code while focusing on the application logic.

Thanks for your time. Let me know what you think about the post and did it help you to get started with angular. Have a nice day 🙂