This document discusses setting up Visual Studio for AngularJS development. It covers choosing an app type, project setup, file and folder organization structures for AngularJS apps, and testing and build tools like Karma, Chutzpah, Grunt/Gulp, and TeamCity.

2. Table
of
Content
Setup Visual Studio
Choosing kind of app
Projects
Testing
Build
Conclusion
AngularJS architecture

3. Setup Visual Studio

4. Setup Visual Studio
General plugins
Web
Essentials
Productivity
Power Tools CssCop
Mexedge
Stylesheet MultiEditing
Task
Runner
Explorer
Package
Intellisense Snippetizer
Visual
Studio
Spell
Checker
File
Nesting

5. Setup Visual Studio
Templates
AngularJS
SPA
Template
ASP.NET
Boilerplate SideWaffle HotTowel AngularStart
ng.Net
Template

6. Setup Visual Studio
Intellisense

7. Setup Visual Studio
Intellisense
Web
Essentials
2013

8. Setup Visual Studio
Intellisense
Resharper

9. Setup Visual Studio
Intellisense
Custom

10. Setup Visual Studio
Intellisense
Visual
Studio

11. Choosing kind of app

12. Choosing kind of app
Using
AngularJS
inside an
MVC layout
or a Web
Form
AngularJS and
WebAPI
AngularJS and
externals
RESTful
endpoints
External

13. Projects

14. Projects
Shared Projects
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
<ProjectExtensions>
...
</ProjectExtensions>
<Target Name="BeforeBuild">
</Target>
<Target Name="AfterBuild">
</Target>
<Target Name="CopyJsFiles"
Inputs="@(Content)"
Outputs="%(Content.Link)"
BeforeTargets="Build">
<PropertyGroup>
<OriginalLink>%(Content.Link)</OriginalLink>
</PropertyGroup>
<Copy SourceFiles="%(Content.Identity)"
DestinationFiles="$(OriginalLink)"
SkipUnchangedFiles="true"
OverwriteReadOnlyFiles="true"
Condition="'%(Content.Link)' != ''" />
</Target>
</Project>

15. AngularJS arquitecture

16. AngularJS arquitecture
Monolithic files
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-css
animations.css
app.css
bootstrap.css
...
-img
favicon.ico
header.png
profile.png
-js
animations.js
app.js
controllers.js
directives.js
filters.js
services.js
-lib
angular.js
jquery.js
_underscore.js
-partials
user-profile.html
group-profile.html
index.html

17. AngularJS arquitecture
Monolithic folders
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
-fonts
glyphicons-halflings-regular.eot
-css
animations.css
app.css
-img
favicon.ico
header.png
-scripts
-controllers
home.js
-directives
contact.js
-filters
dataUnique.js
-services
contacts.js
-lib
angular.js
_underscore.js
-views
home.html
index.html

18. AngularJS arquitecture
Organize by feature
-assets
-fonts
glyphicons-halflings-regular.eot
-styles
app.less
-images
profile.png
-core
-admin
admin.html
adminController.js
adminService.js
-authentication
-directives
hasPermissionDirective.js
-services
authenticationService.js
permissionService.js
-shared
-services
apiFactory.js
-directives
imgSrcDirective.js
cloneDirective.js
-lib
angular.js
_underscore.js
index.html

19. AngularJS arquitecture
Organize by module
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
-assets
...
-core
-admin
admin.html
adminController.js
adminService.js
app.js
-authentication
-directives
hasPermissionDirective.js
canShowDirective.js
-services
authenticationService.js
app.js
-shared
-services
apiFactory.js
httpInterceptor.js
proxyService.js
-directives
imgSrcDirective.js
app.js
-lib
angular.js
_underscore.js
index.html

20. Testing

21. Testing
Testing
Karma
Chutzpah
Resharper
TeamCity

22. Testing
Karma
VS Adapter for
Google’s
Karma Test
Runner
KarmaVs

23. Testing
Chutzpah

24. Testing
Resharper

25. Testing
TeamCity
Jasmine
SpecRunner
PhantomJS

26. Build

27. Build
Grunt or Gulp
Grunt
Launcher
TRX – Task
Runner
Explorer

28. Thanks
iranreyes.com
@iranfleitas
Iran Reyes Fleitas
More information in: