Since I truly believe that one of the keys to success relies on practice, I decided to scaffold an AngularJS project today using some of the tools I already use, like Express, RequireJS, a special version of Bootstrap for AngularJS and Bower.
It is worth to mention that, even tho this project could give you a nice start for a basic demo, I would not encourage you to use it for production as it lacks for testing and build tools. The aim of these is just to work as a start point for other practice examples/demos but nothing more than that.
The code of this example can be found at GitHub.
The directory layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
A quick overview
First, to get this up and running you will need:
npm install -g bower
Once you grab the code, in the project folder you will need to install the dependencies by doing
npm install && bower install. Finally the dependencies are installed, the project can be started by doing
The code on
app.js (the one at the top level) is mainly Express code to setup an Express application. The most “interesting” parts of it on this example are the lines with
var routes = require('./routes') and
routes(app). The first one will do a Node.js import of our module called “routes” and as you will see, it is a folder with an
index.js file on it. This file will be our routing bootstrap as it will be including other route files the same way it is included and set up the routes so we do not end upt with a big mess of routes on a single file. An easy way to keep things clean on the urs is to set a
baseUrl and pass it around to submodules avoiding having to hard-code the path everywhere.
Say you have your folder
routes/ with an
index.js on it. Also you may have a submodule
users/ on it (with its respective
index.js) and maybe also inside you also have a sub-submodule
pets/ (with its respective
index.js). From the URL you may want to have some RESTful URLS like
/users/pets. To accomplish this you may follow this pattern:
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7
The RequireJS code will be found on
public/js/app/main.js. This file should contain only
require.config and the dependencies to start up our application. The configuration will be filled mainly with paths to our libraries and shims for the code that have specific dependencies that cannot be loaded using modules. For more details about it you can always refer to RequireJS documentation.
Last but not least, the Angular part of this scaffolded code will make extensive use of RequireJS to manage file dependencies and lazy load them; this way we would not have to worry about loading them manually by adding script tags on the index.HTML file.
An AngularJS module can be completely on a single .js file containing all its directives, filters, services, etc. or it can also be split into multiple files and then loaded as required, again, using RequireJS.
An example of this can be as follows:
1 2 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1 2 3 4 5 6 7 8 9 10 11
1 2 3 4 5 6 7 8 9
What is next
As I said at the beginning of the post, this code is only intended for learning purposes and it is far of being production ready. There are several things to be added like a Grunt file for building or a testing framework to mention some.
Do not hesitate in contact me if you have any questions regarding this example, the code snippets or anything related, I’ll be more than happy to help you.