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:
Using npm we can install all these plugins like this:
npm install yo bower gulp
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
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)
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
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
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
6) Select all the files above and include them in the project
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!