The "Zza Breeze-MEAN" sample app is a single page application (SPA) built with BreezeJS, AngularJS, Node, and MongoDB
MEAN == Mongo, Express, AngularJS, and NodeJS.
Recent upgrades to the upstream source added an improved user experience, code-cleanup, and integrated the AngularJS UI-Router plugin: to provide robust nested-view management.
The upstream repository was published as part of a BreezeJS training course. But many enterprise conventions were not introduced in order to both keep the student sample less complex and allow maintain focus on BreezeJS ORM integration.
This downstream fork enhances the code and architecture with features and patterns demanded by larger applications and team-based development. Those features and patterns are manifested in other technology/platform solutions: Java, AS3, etc... so it seems obvious to use the similar ones within AngularJS SPA architectures:
- Use of RequireJS to provide AMD and Class depedency management.
See Dependency Injection Using RequireJS and AngularJS for detailed explanations.
- Organization of classes/packages by feature
- Use of UpperCamelCase naming conventions
- Clear separation of angular registrations from class registration
- Consistent use of enhanced $log for full-workflow logging
- Color-enhanced logging to easily highlight route logging (see above snapshot)
- Consistent use of Services; with a hidden back-plane ORM layer.
Considering the complexity of workflows and components within an AngularJS SPA, we cannot ignore the "unreasonable effectiveness of data"... Class and method logging delivers high quality data concerning the state and flow of an SPA. Do not underestimate the effectivenes and positive impact [on code quality] that be achieved with consistent logging.
The most important [and radically different change] is the use of AngularJS services to hide all ORM activity and usages.
Now the custom Breeze ORM setup and uses are hidden by services such as
CustomerService. And static lookups are performed by the global
This revised architecture supports the expected MVVM AngularJS best-practice architectures and leverages the ORM layer as the behind-the-services layer for the application. This encapsulation significantly improves understanding of the application layers and centralizes all ORM activity/configuration into the ORM layer.
Shown below is a snapshot of the Zza application and its console view:
A live version has been deployed to Heroku: Zza Live!
This version will demonstrate the UI-Router and AngularJS transitions/animations within the screens, the live logging (Chrome Console), deep linking, routing/navigation, and more...
The Heroku deployment is published on a free, sleep-after-1-hour virtual image. This means that the 1st-time loading of the application may require 3-5 seconds to startup. Subsequent database queries and loads should be much faster. So please wait during the initial startup...
Install and use
This repository represents a full MEAN stack; where both the client and the server and database must be configured. Libraries must be installed for the client and ser applications. Since the App-Server will handle RESTful web service requests and route appropriate commands to query the Mongo
zza database, Mongo must be installed and the zza database configured properly.
Extract the database
Extract the Zza application's MongoDB database in zza-mongo-database.zip to your MongoDB data directory.
The default location per MongoDB installation instructions should be
You only have to install this database once.
Install dependent node modules
Open a command prompt window.
Navigate to the Zza-Node-Mongo directory; aka .
cd <projectDirectory>/server npm update
This should update/install all the NPM modules needed for the NodeJS, Breeze, Mongo stack.
cd <projectDirectory>/client/build rem Now update the NPM modules for Grunt npm update rem Now use Bower to install/update the AngularJS vendor libraries bower update
These will install all the vendor libraries for the AngularJS client. And the NPM modules required for the optional Grunt build tasks. You only have to install these modules and vendor libraries once.
Start the servers
Every time you run the application you must first launch two servers: the MongoDB server and the Zza application's node/express Server. If you are using WebStorm IDEA, here are two snapshots to make these tasks trivial:
Open localhost:8080 in a web browser to run the Zza application.
- UpperCamelCase class names
- Class packaging by features
- Use of RequireJS and define()
- Best-practice usages of angular.module()
- Use of HeadJS for non-blocking, script loading
- Separation of script loading from HTML markup
- Separation of Class registration from AngularJS instantiations.
- Use of AngularJS UI-Router plugin for easy-to-maintain, sophisticated UX and workflows
- Encapsulation of ORM classes... only utilized within the Services and SessionController.