AngularJS Made Easy, by Example – Part 1; File & Folder Structure

The first part of a series on rapidly learning the AngularJS JavaScript framework, to get productive at hyper-speed

The JavaScript framework AngularJS has been on my To-Do list of “stuff to learn” for about a year, and in the last month I have finally found a suitable muse through which I can learn-by-doing. The project is an e-learning website that I’m working on with a friend of mine, and if the venture fails then at least I can be consoled in knowing that I gained a new skill from the enterprise. This series of articles on learning AngularJS assumes that the reader has a basic knowledge of the fundamentals of the AngularJS framework. My aim is to illustrate my progress in learning AngularJS through a series of example code that I have produced, which is now operational in a production environment. I believe in a just-in-time learning approach, by which I mean I don’t delve deeply into the details of things that I don’t need to know yet. For me, getting something working as quickly as possible is the key thing, whilst defining a solid core pattern for modules/variables/functions/patterns. The ultimate idea is that, once I’ve coded the first screen, the following ones can be built an order of magnitude faster.

But first we need some foundations; a file and folder structure for the project. I’m using ASP.NET MVC through Visual Studio 2010 to build the website, but the server-side technology and IDE are irrelevant, so (ignoring the MVC folders) the structure I have adopted is as follows:

Presentation
	Css
		Images
Scripts
	App
		Configuration
			app.js
		Controllers
		Directives
		Factories
		Views
	Libs
		angular-animate.min.js
		angular-route.min.js
		angular.min.js
		jquery-1.9.0.min.js
	MyLibs

Everything within the “App” folder is an AngularJS asset, the actual library scripts being stored within the “Libs” folder outside of this. I will definitely require routing capabilities from the get-go, so I have included the additional script “angular-route.min.js”. I also anticipate that a spot of animation will take my fancy at some point, so I have included the “angular-animate.min.js” script to make this possible. AngularJS features its own slimmed-down version of jQuery, but I prefer to have the full library so I have included this too.

At the bottom of the “_Layout.vbhtml” page (the website’s main master page), just inside the closure of the BODY and HTML tags, I have referenced the scripts I require:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
	window.jQuery || document.write('<script src="/Scripts/Libs/jquery-1.9.0.min.js"><\/script>');
	window.angular || document.write('<script src="/Scripts/Libs/angular.min.js"><\/script>');
</script>
<script src="/Scripts/Libs/angular-route.min.js">>/script>
<script src="/Scripts/Libs/angular-animate.min.js">>/script>
<!-- All the other site-wide global script imports I require go in place of this comment -->
<script src="/Scripts/App/Configuration/app.js?"></script>

This covers the global “includes” that I’ll need site-wide. In future, as I add Controllers, Factories, Services and Directives to the project, I’ll need to include references to these scripts also. This is one of those steps I frequently forget, having spent a difficult few hours crafting a Controller, thinking my work is done, only to forget to include it in the document. My website is divided into different areas, so in my case these script references don’t go in the grand layout page; they are placed in the sub-layout page for each of my user types (e.g. Teacher, Student, etc). Thus in my Teacher sub-layout page I might end up with the following further script references:

<script src="/Scripts/App/Controllers/teacherteachingclassescontroller.js"></script>
<script src="/Scripts/App/Controllers/teacherteachingclassstudentscontroller.js"></script>
<script src="/Scripts/App/Controllers/teacherteachingclassstudentcontroller.js"></script>
<script src="/Scripts/App/Directives/studentprogresscolourcodingdirective.js"></script>
<script src="/Scripts/App/Factories/userfactories.js"></script>
<script src="/Scripts/App/Factories/teacherfactories.js"></script>

Finally, either in the layout page or a sub-page (depending on how you wish to organise your HTML and boundaries within the system) I include a simple DIV element that defines the container for AngularJS Views. AngularJS will not act on anything that occurs outside of this DIV:

<div data-ng-app="elearningapp">
	<div data-ng-view=""></div>
</div>

(NB. The contents of the attribute data-ng-view can be left blank.)

For the foundations of an AngularJS application that’s it. In the next article in the series I shall describe the construction of a script file I’m calling “app.js”, that will sit inside the “Configuration” folder. This will establish the main AngularJS application module and define the routing rules to link the various Views I’ll create to their associated Controllers.