Getting Started with Angular

Tweet

This short blog post is expected to serve as a quick reference to tiptoe into the murky waters of angular. The coolest thing about this is that we'll be using the command prompt quite a bit...nothing like a little retro-feel to things. One clarification before everything else is that this is ANGULAR and NOT ANGULAR JS. The difference between the two is well documented and beyond the scope of this humble post - just keep in mind that Angular is the newer type-script based thingy ... Angular JS is a little old and is probably destined to the same fate as DVD's DVD Players, CD's etc.. Now that we've cleared the air the first thing of course is to download Node. It's a pretty straightforward thing. Head on to https://nodejs.org and download the latest version for Windows. (Or whatever your OS is) I'm using Windows 10.

After the executable is downloaded just let it run - don't change any of the defaults. Soon node is installed.  The next step is to make sure it's properly installed. For that the old command prompt needs to be fired up.
The next command is pretty straightforward typing in node --version (make sure there's a space)  shows the node version and in turn verifying that we do have node running on our computer.

Now that node is properly installed and hopefully up and running - the next requirement is to install the Angular CLI

in the same prompt type npm install -g @angular/cli 

npm here stands for node package manager. the -g option is important as it means that the installation is global , as in not restricted to a specific folder that we are in.                                          

This process will take a little bit of time.  The console will keep displaying what's going on etc. Eventually the installation finishes and we will be notified.   

The next step is to verify if angular was properly installed  for this we simply need to check the version of angular and just as it was with node  the command is ng --version   This will bring up a nice retro looking output reminiscent of the ancient days of computing. 

   This is about it - Angular is installed on your system BUT it would be nicer to see angular in action as in seeing some output. So for that we'll just make a very basic app and verify. 

CREATING  A NEW ANGULAR APPLICATION 

Still sticking to Command prompt let's move into any preferred folder to create the application. In this case I've  created a folder called 'My folder' . Inside this folder we can create an angular application with any name we like. In this case I'll just call it 'TheFirst'  the keywords of course are  ng new 

and boom your application is created. If you have something like Visual Studio Code installed it can be used to explore this project. Simply select ' Open Folder' in VS code. and select the folder you create the Angular Application. The structure can be seen in VS Code. 

One final step is to actually deploy this application. And yes we're doing that with the Command Prompt. 

Just typing ng serve  will do the trick. This should be done inside the folder that was created when creating the application. In this case it should be 'TheFirst' 

This will deploy the application on the Angular Live Development Server. Fire up the browser and type the url shown in the screen (http://localhost:4200/) 

We can now see the default Angular Page hosted - this is like every other Development Server's "Hello World" 

the port number is usually 4200 but if it is already in use a different port number can be assigned for example 4300 

and that's it!