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..
bundles.Add(
new ScriptBundle("~/scripts/app")
.Include("~/app/app.js")
.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
routes.MapRoute(
"default",
"{*url}",
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">
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular Kendo
Bootstrap Application</title>
@Styles.Render("~/Content/css")
</head>
<body>
<a href="/home">Home</a> <a href="/contact">Contact</a>
<div ng-view>
<div id="splash" class="splash">
Loading ...
</div>
</div>
@Scripts.Render("~/scripts/libraries")
@Scripts.Render("~/scripts/app")
</body>
</html>
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