Wednesday, July 23, 2014

Visual Studio Project Structure for Angular

We all know how important is to have a proper project structure for any project. To jump start this Microsoft provided several project templates. You can also download additional templates. In this blog I show you the project structure I adopted for my Angular project after examining and reviewing several available project templates and recommendations.

Before going in detail, here is my recommended visual studio project structure:

As you see this is in line with Microsoft recommended structure with an addition of “app” folder. As you aware this app folder is used for Angular stuff. Here is the folder structure for this app folder:

First I will quickly cover the salient features of my MVC folder structure (some of which you already know):
  • I am using Bundle.config to bundle all my javascript files written for Angular app using the below bundle configuration entry. This is in addition to bundling the vendor javascripts such as Angular, Kendo etc..
                new ScriptBundle("~/scripts/app")
                    .IncludeDirectory("~/app", "*.js", true)

  • As our app is a single page application, MVC routing is not needed. I will override this default MVC routing with a catch all routing. This helps to directly go to the Angular routing and avoid 404 errors
                new { controller = "Home", action = "Index" }
  • We just need a single View (Home/Index) which renders the necessary html and Angular start up script. Here is what I used

        <html data-ng-app="AngularKendoBootstrapApp">
            <meta name="viewport" content="width=device-width" />
            <title>Angular Kendo Bootstrap Application</title>
            <a href="/home">Home</a> <a href="/contact">Contact</a>
            <div ng-view>
                <div id="splash" class="splash">
                    Loading ...

The below are the salient features of my app folder for Angular development

  • I am segregating based on the functionality or modules. So each folder will host both my angular controller and view. In addition these folders will also include the services and directives required to display the page
  • My UI layout such as master pages and other global UI elements go under the layout folder
  • As the name suggests common contains the shared files across the app
  • Finally app.js contains the configuration and initialization script. If it is a big project then I will split this app.js in to multiple small files, such as app.route.js, app.config.js etc.
This is the folder structure I am incorporating for my projects. You can find the source code of this project at mygithub site. You can also download the Visual Studio template file for this project from here.

No comments:

Post a Comment