starting an angularjs project with visual studio

Tableof

Content

Setup Visual Studio

Choosing kind of app

Projects

Testing

Build

Conclusion

AngularJS architecture

Setup Visual Studio

Setup Visual Studio

General plugins

Web Essentials

Productivity Power Tools CssCop

MexedgeStylesheet MultiEditing

Task Runner Explorer

Package Intellisense Snippetizer

Visual Studio Spell Checker

File Nesting

Setup Visual Studio

Templates

AngularJSSPA Template

ASP.NET Boilerplate SideWaffle HotTowel AngularStart

ng.NetTemplate

Setup Visual Studio

Intellisense

Setup Visual Studio

Intellisense

Web Essentials 2013

Setup Visual Studio

Intellisense

Resharper

Setup Visual Studio

Intellisense

Custom

Setup Visual Studio

Intellisense

Visual Studio

Choosing kind of app

Choosing kind of app

Using AngularJSinside an MVC layout or a Web Form

AngularJS and WebAPI

AngularJS and externals RESTfulendpoints

External

Projects

Projects

Shared Projects1

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>

AngularJS arquitecture

AngularJS arquitecture

Monolithic files1

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

AngularJS arquitecture

Monolithic folders1

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

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

AngularJS arquitecture

Organize by module2

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

Testing

Testing

Testing

Karma

Chutzpah

Resharper

TeamCity

Testing

Karma

VS Adapter for Google’s Karma Test Runner

KarmaVs

Testing

Chutzpah

Testing

Resharper

Testing

TeamCity

Jasmine SpecRunner

PhantomJS

Build

Build

Grunt or Gulp

Grunt Launcher

TRX – Task Runner Explorer

Thanks

iranreyes.com

@iranfleitas

Iran Reyes Fleitas

More information in: