Starting with yeoman(yo man) and visual studio 2013 angularjs spa development


visual studio 2013yeoman

Today I am going to provide a walk through of how to setup yeoman scaffolding tool for  AngularJS and use the angularjs spa files with visual studio 2012+ for development.

I am sure everyone is already familiar with npm modules (npm stands for node package manager) we will be using it alot in this post. Npm is available as soon as you install Node.js on windows or unix environments.

In order to use yeoman scaffolding for angularjs development we will install yeoman from npm and also other tools that will help with our development:

  • yeoman
  • bower
  • gulp

Using npm we can install all these plugins like this:

npm install yo bower gulp

Once these plugins have been installed in the global namespace we can then utilize these plugins to build our angularjs spa source files and folders. The benefit of doing this is that all the repetitive tasks are automated from vendor libraries to minification of javascript files etc.

Below are the screenshots where I am going to show you how I went about setting up yeoman project and then integrating it inside visual studio solution .

1)Create your project directory

createDir

2)Create a new visual studio solution, uncheck directory solution folder and use this folder for visual studio project (name it the same as the root folder)

vs1

3) In the above screenshot you will then open the project folder in the windows explorer and then access the command prompt from there or you can use the command prompt extensions in visual studio to do the same

vs2

4) In the below command prompt you will then use yo to get the scaffold menu and choose the generator , I already have angularjs installed so you might have to install the angularjs generator if this is first time

yo1

5) yo will do its work and help scaffold all the nitty gritty parts; after success on yeoman you will click the show all files button on solution explorer tab to retrieve all the new good stuff that was added by yeoman

vs4

6) Select all the files above and include them in the project

vs5

All set to go – in the next post I will talk about the other plugins such as bower and gulp , and how we can use the task run explorer in visual studio 2013!

One Reply to “Starting with yeoman(yo man) and visual studio 2013 angularjs spa development”

Leave a Reply

Your email address will not be published. Required fields are marked *