Angular Framework
Imal Perera  

Your First Angular Application With Angular-cli ( part 1 )

Spread the love

Waiting time is over!!

Angular 2.0 is officially released and it is time for all you guys to get some hand-on experience. In this first tutorial I’ll be helping to you to setup your environment and get ready to write your first application. 

I don’t want you guys to call it AngularJs anymore because google consider Angular 2.0 as a completely new framework built with the knowledge on Angular 1.x so they want it to be just Angular so let call it Like that from no on. 

Lets continue this like this, we will first setup our environment before digging more into Angular because sometime without seeing an output everything else get so boring to understand, then we will slowly catch up everything. 

Ok. First things first

Angular-Cli

The recommended way to setup an Angular project is using the angular-cli tool and that is now ridiculously easy.  Just few lines of commands and you are ready to go.

 
npm install -g @angular/cli

What does this do is it will install ng globally for you so that you can simply use ng command anytime you want.  Ok guys we are now officially ready to create our first angular cli application.

I’ll be creating a folder and inside that and then i’ll be creating our first application called  “hurray-angular” ( funny name right ? that is because i’m funny too 🙂 )  

FYI : you don’t need to actually create a folder you can simply run the command.

 
mkdir angularProject 
cd angularProject 
ng new hurray-angular

Awesome!! after waiting for few minutes 😛 we get our first brand new application ready.  now lets run it by visiting the project folder and using ng serve

 
mkdir angularProject 
cd hurray-angular
ng serve

open up the browser and hit on  http://localhost:4200/  hurray! our hurray-angular project is running.. please start clapping!!  ok now easy parts are over lets get into business, 

screen-shot-2016-10-09-at-1-37-11-am

I want you guys to familiar with the project structure and the naming conventions that are recommended. and then before we go more further I want you guys to familiar with Typescript  which will help us to write ES6 code and transpile them to ES5.  Next tutorial will be about these  

Leave A Comment