Create Effective Project Architecture with Angular, Bower, Grunt, and NodeJS

Front-end technology is developing fast and excellent architectures are emerging. This blog does not compare architectures or whether one framework is preferred over another but provides an efficient methodology to create a mature architecture.

Functions of a Mature Project Architecture

Let’s discuss this architecture one by one in detail:

Project Builder

yo webbp

Run the command as prompted. When the project architecture is generated, open the project directory and run the npm install and grunt commands to automatically enable the browser to view project items.
Generate Controller in one step:

yo webbp:controllers

The following files are generated:


The generated about.js and contact.js are automatically loaded in detail.js.
Generate View in one step.

yo webbp:views (no dots in between)

The following files are generated:


Generate routes, which automatically associates with View and Controller:

yo webbp:routess (no dots here)

This command automatically calls Controller and View commands.

The following are the generated routes codes:

define(['./states', '../cons/simpleCons'],
function (stateModule, simpleCons) {
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("detail", {
abstract: true,
resolve: {
instanceBasicPromise: [ '$stateParams', function( $stateParams){

url: "/detail",
controller: 'detailController',
templateUrl: simpleCons.VIEW_PATH + 'detail.html'

.state("detail.about", {
url: "/about",
views: {
detail: {
templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
controller: 'detail.aboutController'


The Controller and View files are automatically generated.

Static Resource Management Based on Bower

CSS Dynamic Compiling Based on Sass; Compass Achieves CSS Nesting and Cross-Browser CSS Prefix.

This is common knowledge, and people prefer to use these modules. Another module you must know about is LESS.
Achieve nested compiling:


Achieve cross-browser compiling:

Various prefixes on the browser are very difficult to configure. It is much easier to use Compass to compile various CSS codes that can be recognized by all browsers.

@include border-radius(4px);

It’s easier to compile CSS codes and define variables as compiling JS codes. Google it for more details!

Decoupling and Modular Development Based on RequireJS

Architecture Achieves View-Model Bi-directional Binding Based on Angular

Code Management Manages Code Versions Using Git; Introduces Public Modules Using Git Submodule.What is the difference between Git and SVN?

  1. Git is distributive, while SVN is not.
  2. Git stores content based on metadata, while SVN stores content based on files.
  3. Git and SVN have different branches.
  4. SVN has a global version but Git does not.
  5. The content integrity of Git is better than that of SVN.

Besides these differences, there are many other advantages of GitHub because of which majority of people prefer to use Git. Moreover, you can use the Submodule tool in Git to efficiently initialize, update, or inspect Submodules. This tool is also suitable if you have multiple sub-projects and need to extract common components.
Locally Mock Data Supports GET and POST Request Simulations Based on Express Extension.
Separating front-end from back-end facilitates collaborated development and improves efficiency. However, it requires simulating back-end interfaces locally. Before being able to use NodeJS, I use the WAMP architecture and enable the server services locally. NodeJS is developing at such a fast pace that various automated tools can be developed based on it. Therefore, based on the Express extension, I tried to mock GET and POST requests in this project builder. You can also simulate interface delay.
Locally mock GET and POST requests:

Call the HTTP service in:

|-- home.json
and in:
The interface URL is /home.json.

Simulate the interface delay

Package, Compress, and Go Live: Package and compress project files based on NPM module, modify it, and refresh page from time to time.

The last step after developing the project is to package and compress the project files and make the project available online. This step is automatic, so we only need to run the grunt build command in the generated project and release the build file to the online server.



Follow me to keep abreast with the latest technology news, industry insights, and developer trends.