Setting up the environment for AngularJS

Posted on Jul 20th, 2015 in Development, Technology

angularjs

During my development carrier I have come across many problems when developing AngularJS applications. The more you experiment on new things; More obstacles you are going to have ahead. So don’t worry, I am going to share the knowledge I have and the shortcuts I used to get over those problems 🙂 In this article I will be discussing about most of the issues occurred when getting the environment ready to start building your first AngularJS application.

These are the things that you are going to be doing.

  • Get an appropriate text editor
  • Install NodeJs, Git and Bower
  • Know what kind of issues that can occur

First things first, to start developing an AngularJS application, what you should have first is a good text editor. There are many text editors out there but my favorite text editors are SublimeText and Brackets (by Adobe). Both of these are free applications which you can use them to this occasion. As an easy way out it is also possible to use Plunker to startup with this. But I will be discussing more about how AngularJS based apps could be developed from your local machine locally.

For the next step I hope you have heard about package management systems. For AngularJS we could use many types of third party libraries which more functionalities could be integrated into our applications. For this we will use Bower as the package management system. You might not need to have these in the beginning. But I recommend that you know about this because its going to make your development carrier super easy. Bower is going to be easy when it is time to start handling other libraries and when including them in your application.

Bower Logo

Bower Logo

Bower runs on NodeJS. Therefore NodeJS and Git should be installed on your local machine first. To install NodeJS go to this link, download and install it on your system. Once that is complete get Git for windows installed on your machine. Installing NodeJS and Git isn’t a bit of an issue. but installing Bower is much more trickier because that’s where people find it difficult to understand that installation procedure.

Thereafter go to Bower.io website and follow the installation instructions. You also can get more information about the installation from this link. but I will explain a how this could be done in a much simpler way.

Steps to follow :

  • Open up Command prompt on your windows machine.
  • To check if nodejs is up and running enter “npm version” and press enter. The version of the installed nodejs will be displayed. If it is available you are good to go (if not there will be instructions, please go on reading)
2015-04-02_11-45-07

Check installed NodeJS version

  • To install Bower enter “npm install -g bower” and press enter.
  • There will be a small animation on the cursor indicating the installation progress. Once installed the details will be displayed on the command prompt window.
2015-07-21_11-04-06

Installing Bower

There are times that “npm” or “bower” is not recognized by command prompt. This is due to issues with the “PATH” variable in the System environment variables. To check this follow these instructions.

  • Go to “Control Panel” > “System” > “Advance System Settings”
  • And on the next window navigate to “Advance” tab and then click on “Environment Variables”
  • In the next window search for the variable “PATH” in any of the sections. Doesn’t matter if it is on “User variables” or in “System variables”. If “PATH” variable is not available create one with the following. The paths should be separated with semicolons.

C:\Program Files\nodejs\;C:\Users\<username>\AppData\Roaming\npm;

2015-07-21_11-10-51

Checking for PATH variable in Environment Variables

2015-07-21_11-11-08

Setting up PATH variable

  • In the above paths, the first part is referring to the functionality of NodeJS in your computer. If “npm” is not recognized in command prompt check if this section is correct. Then it would work.
  • If “Bower” is not recognized in command prompt the second section is the one responsible. Make sure that path is correct and you could get Bower working.

When all these issues are fixed you have completed setting up your environment for developing AngularJS applications using Bower. Now you can move on to the next post which is about Building your first web application with AngularJS.

LEAVE A REPLY

Your Name
Your Email (will not be published)
Your Message