How to create a modular SPA with AngularJS

In this article, we’re going to look over modularized AngularJS applications, why you should use them, and how to build them.

Before you start, you’re going to need NodeJS installed. If you don’t have it already, simply follow the link.

Also, if you don’t have a Javascript IDE yet, it’s ideal when working on applications like such. My personal recommendation is JetBrains Webstorm, which you can find here, although other great alternatives are Atom, Sublime Text 3, vim, and Brackets(although not all IDE’s, they’re highly modifiable environments for development that may be used as one). You can read 15 Great Free Code Text Editors Alternatives with a roundup on several alternatives.

What is AngularJS?

AngularJS is a web application framework built by Google in Javascript. It’s a data binding, scope and modular abilities make it a strong and powerful framework for building web applications. You can find more info about AngularJS at its homepage or you can check out their git repository here.

Modularized AngularJS applications are applications built into small modules, with the purpose being to make the application as flexible, upgradable, and scalable as possible. The ideal modularized AngularJS application has one purpose per file, uses modules to make features and sections of applications easily addable/removable, is buildable, and is built with clean/readable code with comments to help label the application.

Chapter 1 – Configuration

Step 1 – Scaffolding the application

First, we’re going to scaffold the application. Now that we’re using a modularized structure our application structure is more important, as we have to have a build process. Referencing the image above, create the files and folders in the structure as pictured. Leave the files empty for now, we’ll come back to fill them later.

Step 2 – Include the project css

Go ahead and download the project source files zip and unzip it. Once you open it, go ahead and navigate into the folder labeled dependencies. Grab the file style.sass and drag it into your /src/sass folder in your project. If you’d like, you can create your own sass/css code for the project and use that instead.

Step 3 – Include the gulpfile

Now, go back into the previously mentioned dependency folder and drag the gulpfile.js folder into the root of your project. This gulp file will automate your build process for you for this application. If you’re interested in learning more about gulp or creating your own gulpfile, you can view their website.

Step 4 – Install the project dependencies

Running npm install in the terminal

Because I’m using node for the project, it makes it very easy to download and install all the dependencies that gulp requires, by utilizing a package.json file in my project. If you’re interested in learning more about NodeJS, check out their website. Go ahead and cd into your project folder and run the commands as pictured above to run the install.

Step 5 – Start Gulp

Running gulp in the terminal

Now, it’s as easy as typing in gulp in your terminal! Make sure you have completed the previous installation step before you proceed, or else

We’ll start by adding some code to our index.html file, which you can see in the above example. If you notice, we’ve added a base tag and a meta fragment tag that will help configure our routing. These are very important, so ensure that you set your base accordingly, so angularjs knows from what address to route your application from. In most cases, your base value will be “/”

Now we’re going to add a config function to our core module to setup the routing, by telling AngularJS what view and controller(state) to goto when a user visits a URL. We’re going togo ahead and use ui-router for this, and set it to HTML5Mode so we don’t see the hideous hashbang.

UI Router is an extremely flexible url routing framework for AngularJS. You can learn more about it here if you’d like as well. Go ahead and add the code above to the module instantiation we discussed earlier. Notice how the functions are handling injections now, you are declaring

Notice how the functions are handling injections now, you are declaring CoreConfig object and setting the $inject prototype array to the dependency needed, and then referencing the dependencies again in the parameters of the function.

Now head over to todo.ctrl.js and we’re going to add some substance. Notice how instead of using the $scope variable to access our scope functions, we’re using a variable called vm (View Manager). This will replace the $scope variable when accessing in scope variables, but for $scope functions you’re still going to have to inject $scope.

Let’s head over to todo.route.js and let’s get the route established. We want it to be the homepage so let’s go ahead and put / as the url. As you look further down the page you’re going to notice the controllerAs key that is set to vm. This is dynamic and can be changed, but you’ll have to reference it with that variable in your controller if you choose to.

Now that the todo module is created and runnable, we’re going to integrate it into the core of our application. This is where your really start to see the advantages of modularization, as it’s easy to add and remove whole sections of applications. Add the string ‘bit.todo’ under the first-party dependencies comment. This will integrate the todo module into the app.

Go back to the todo controller as we’re going to integrate all the functions and variables we need to go live. We’re going to add an array of tasks to the vm variable, and then also create a function to remove a task by it’s text, not by index. Go ahead and add all the code you see above to the controller.

Now, go ahead into the index.js file and paste this code on in. We’re going to push up a basic node.js server to test out our new application, using express. Make sure any route that’s not an asset redirects into the index.html file as we have above.

Step 2 – Initiating the server

Running the server!

Now, cd into your project folder and run

node index.js

to initiate the server. If you have the PORT environment variable set, it will run on that port, otherwise, it defaults to port 8080.

Step 3 – View the app!

The app in action!

At last! Head on over to http://localhost:8080 (or the port of your choice) and have fun!

Conclusion

These concepts are widely used in the industry to make applications easily scalable, and you should use it on every application you make from now on. Also, leave a comment below and show me what applications you’ve built with the modular structure!

Have you enjoyed this article? If so, supports us by sharing this article or Become a Patron!