Frontend (AngularJS)

CleverStack provides a fully featured AngularJS development workflow.

Some highlights:

• AngularJS Application Core Integrated with RequireJS
• Grunt Server with Live Reload, Bootstrap 3, LESS
• JavaScript Dependency Loading with Bower
• Modularity NPM Coding Structure
• Unit Testing with Karma & Code Coverage Reports
• E2E Testing with Angular Protractor
• Optimized Production Build Process

Application Structure

front-end/
├── app/              # angular app source files
│   └── modules/      # cleverstack app front-end modules
├── scripts/          # app scripts and binaries
├── tests/            # app tests
├── Gruntfile.js      # app grunt tasks
├── bower.json        # app js dependencies
└── package.json      # app npm dependencies

Important files and folders

app/

• This folder contains the core of the Cleverstack Angular Seed.
• modules/ This is where all of the Cleverstack modules will be installed into your application.

app/modules/

• This is where all of the Cleverstack modules will be installed into your application.
• You can also add custom modules inside this folder, or even NPM modules.

scripts/

• This is where you can store your front-end scripts and binaries such as executables, JAR files or such. Examples of these might be browserstack-tunnel.sh, selenum-server.jar, chromedriver.exe, phantomjs.exe etc...
• Scripts can be defined in package.json and then run with npm run-script [name].

Gruntfile.js

• Defines the Applications global (main) gruntConfig.
• Registers the Applications included Grunt tasks.

bower.json

• Stores the apps main bower dependencies install during setup with the CLI.

package.json

• Defines the Application and it's NPM dependencies.
• Defines the modules that are enabled, using the bundledDependencies[] array. (This also let's NPM know that these dependencies are local and not on the NPM Registry)

Prev: Installing a new project | Next: Backend (NodeJS)