Starting an AngularJS Project with Visual Studio
•
2 likes•1,001 views
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.
Starting an AngularJS Project with Visual Studio
- 2. Table of Content Setup Visual Studio Choosing kind of app Projects Testing Build Conclusion AngularJS architecture
- 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
- 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>
- 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
- 22. Testing Karma VS Adapter for Google’s Karma Test Runner KarmaVs
- 23. Testing Chutzpah
- 26. Build
- 27. Build Grunt or Gulp Grunt Launcher TRX – Task Runner Explorer
- 28. Thanks iranreyes.com @iranfleitas Iran Reyes Fleitas More information in: