Getting Started with Angular

Hello Everyone if you previously have worked with angular 1.x or not. It doesn’t matter you can easily follow my tutorials to getting started with Angular (2-7). There are two generations of angular 1st and 2nd (2-7). 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 (2-7). Before starting angular (2 – 7), 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

If you are planning to use the SASS/SCSS or LESS you can provide the style flag along with the above command. See code below.

ng new my-app --style=scss
ng new my-app --style=sass
ng new my-app --style=less

this will create a required skeleton for your app to get started easily with all the required node modules (node-sass) pre-installed and required config and filename extension changes for you. Otherwise you have to manually configure these changes on your own later. 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.

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). For routing add the routing flag too.

ng new my-app --style=scss--routing

It will add the routing module in your initial code base.

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

cd my-app
ng serve --open

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 which is the common case in angular’s other competitor like react and vue. Angular is superior above all and you can deliver you apps much faster and systematically organize your code while focusing on the application logic.

Comments

Write a Reply or Comment

Your email address will not be published.