Project Directory Structure
The project is organized into the following directory structure:
./: Contains the base application files and supporting folders. This is the project root.
./npm_modules: Created when the NPMs listed above are installed in the system.
./controllers: Contains the Express route controllers that provide the interaction between routes and changes to the MongoDB database.
./models: Contains the Mongoose model definitions for objects in the database.
./static: Contains any static files that need to be sent, such as CSS and AngularJS code.
./views: Contains the HTML templates that will be rendered by EJS.
../images: Contains any images for the project. This is at a peer level to the project so that multiple projects can use the same images.
../lib: Contains the AngularJS libraries so that multiple projects can load them locally. In production, you may want to use a CDN delivery address instead.
Note
This is just one method of organizing your code. You do not have to follow this directory structure, but keep in mind that directory structure should be part of the overall design of your projects so that you can easily find the code you are looking for.
In addition to the directory structure, the following code files are included. This list is intended to give you an idea of the functionality of each file:
./word_init.js: Provides standalone initialization code that generates a words database used for the tabular view. You need to run this to test the tables view.
./rich_ui_server.js: Loads the necessary libraries, creates a connection to MongoDB, and starts the Express server. This is the main application file.
./rich_ui_routes.js: Defines the routes for the Express server. This file handles functionality that does not interact with the database.
./controllers/weather_controller.js: Defines the functionality for the routes to access the remote weather service.
./controllers/words_controller.js: Defines the functionality for the routes that require interaction with the MongoDB database to get the word objects.
./models/word_model.js: Defines the word object structure used for the table example.
./views/rich_ui.html: Provides the main example page that implements the tabbed view elements to support the other views.
./static/rich_tabs.html: Acts as the container object for multiple tabbed views. This is an AngularJS partial template.
./static/rich_pane.html: Houses the individual tabbed view. This is an AngularJS partial template.
./static/draggable.html: Implements the draggable example view. This is an AngularJS partial template.
./static/tables.html: Implements the interactive tabular view. This is an AngularJS partial template.
./static/weather.html: Implements a simple weather widget. This is an AngularJS partial template.
./static/js/rich_ui_app.js: Provides the AngularJS module and controller definitions to handle all of the example code.
./static/css/draggable_styles.css: Provides the CSS styling for the draggable AngularJS HTML partial.
./static/css/rich_ui_styles.css: Provides the CSS styling for the tabbed views.
./static/css/table_styles.css: Provides the CSS styling for the tables AngularJS HTML partial.
./static/css/weather_styles.css: Provides the CSS styling for the weather AngularJS HTML partial.
Note
The example in this chapter needs data to be initialized in the database. If you want to follow along with the examples, please look at the “Initializing the Application” section at the end of this chapter for instructions on how to initialize the data.