In this chapter, we will see Angular in practice, covering all the concepts of the previous chapters and using good practice to create a scalable application. We will focus on modularization and refactor our example application this time using a robust Yeoman generator for MEAN applications.
At this point, you should already be comfortable with the creation of an API using Node, Express, and MongoDB and also with tools like Bower, Grunt, and Yeoman, then we create our sample application. The following topics are covered in this chapter:
- Dissecting and understanding the MEAN.JS generator
- Scaffolding the application
- The application anatomy
- Refactoring the API
- Testing the speakers' API routes
On a MEAN stack environment, our ecosystem is infinitely diverse, and we can find excellent alternatives to start working with RESTful APIs. We have at our hand simple boilerplates to complex code generators that can be used with other tools in an integrated way, or even alone.
Boilerplates are usually a group of tested code and are modified to provide the basic structure to the main goal and create a foundation for a web application project. Besides saving us from common tasks such as assembling the basic structure of the code and organizing the files, boilerplates already has a number of scripts and snippets ready to go.
Let's describe an alternative that we consider as a good starting point for the development of RESTful APIs with the Express framework, MongoDB database, Node server, and AngularJS.
MEAN.JS is the most popular boilerplate that is currently available. It is a fork of the original project MEAN.io, both open source with a very peculiar curiosity and have the same author. For more details, check out http://meanjs.org/.
However, there are some differences. MEAN.JS consists of better code organization and structure of directories. Furthermore, it follows a vertical modularization system, thus facilitating the organization of code in decoupled modules with a more complete and robust environment.
The most common problem when we need to scale a SPA is undoubtedly the structure of directories that we adopt and how we manage all JavaScript files, when using the MVC/MVVM approach.
MEAN.JS provides the Angular framework with more flexibility to deal with the MVC approach for the frontend application, as we'll see inside the public folder. In the modules approach, each module has their own structure, maintaining some conventions for controllers, services, views, config, and tests.
This flexibility is very useful for team development and keeps the project structure well organized. Besides, we have the power of subgenerators for almost all kinds of tasks such as creating routes, controllers, services, and directives.