Development - Slenderware/slenderpm GitHub Wiki

Development

Installation

In order to get this application up and running you will need the following installed on your local machine:

  • Node
  • Bower - run npm install bower once Node is installed
  • Grunt
  • Git

Next, fork and clone this repository to you local machine using your local git. Once this is done, do the following to ensure that the program is building and passing all the tests:

  1. Open Git Bash/ Windows Power Shell/ Command Prompt
  2. Navigate to the website directory
  3. Run grunt (builds site and run test cases)
  4. Run grunt serve (runs the site)

Directory Structure

The main application resides in the app directory. The production/distribution version of the site gets published into the dist directory. The app directory structure looks like the following:

images

modules

----module_name

-------controllers

-------factories

-------services

-------styles

-------submodules

-------views

scripts

styles

Directives

This application is built following a modern modular angular architecture as documented at Modular Angular.

The master page contains 3 menus namely:

  • slenderTopMenu
  • slenderBreadCrumb
  • slenderMenu

When looking at the code you might notice that each one of these menus are declares as their very own directives. ie:

<slender-top-menu></slender-top-menu> <slender-menu></slender-menu> <slender-bread-crumb></slender-bread-crumb>

This is done for encapsulation and re-usability purposes at a sub-module level. Each sub-module has their own directives throughout the entirety of the application and can be reused. The service components are not added at a sub-module level as these services are operation oriented and cannot be reused like the UI elements.

Modules

Pages or Views are split up into modules and are not made into their own directives due to the enormity of some of these views. These views are composed of sub-modules and glue code that houses the sub-modules.

Views are displayed according to http requests and is controlled in the app.js file located in the root scripts folder. The code looks something like the following:

Routes

$routeProvider .when('/Tasks', { templateUrl: 'modules/task/views/tasks.html', controller: 'TasksCtrl' })

The above code gets triggered when URL tasks is requested and consequently loads the task.html view from the modules directory and initializes the appropriate controller which already got loaded at page load.When adding new modules/views, this would be the place where you would add the path that triggers the display of your view.

Dependencies

angular: 1.2.16

json3: ~3.3.1

es5-shim: ~3.1.0

bootstrap: ~3.2.0

angular-resource: 1.2.16

angular-cookies: 1.2.16

angular-sanitize: 1.2.16

angular-animate: 1.2.16

angular-touch: 1.2.16

angular-route: 1.2.16

slendermenu: *

slender-ui: *

font-awesome: *

pace: ~1.0.1

underscore: ~1.7.0

angular-gantt: ~0.6.4

moment: ~2.8.3

angular-moment: ~0.8.2

gantt: ~3.0.0