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
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 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.