Required tools

For properly using this project you will need some tools installed on your computer.

• As first make sure you have installed Node.js with package manager npm. You can check it in your terminal window using these commands node --version and npm --version. You can download Node.js here
• As next step you need to install bower and grunt. Installing of Yeoman tool is optional.
• I'm using SASS in this project so as next step you will need install SASS gem. You can check if you have installed this gem with this command sass -v
• After you have all tools installed, open your terminal window an go to root folder of your project. There you need run this commands to install all dependencies npm install and bower install
• Now you will be able to run your local server with this command grunt serve

Node.js

You can download Node.js here. Install it and check it in your terminal window with node --version and npm --version. If you get in some troubles try google it.

Now when you have node installed get to the root directory in terminal window and run command npm install. Node will download and install all dependencies for you.

Yeoman

Yeoman is a scaffolding tool which is making your workflow clear, but if you don't want to use it so you do not.

You can easily install Yeoman with npm running this command in terminal npm install -g yo

As this project is builded with Angular you will need to use angular-generator with yeoman so install it with this command npm install -g generator-angular

You can find Yeoman documentation here

Bower

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

{
  "name": "minovate",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.18",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.2.0",
    "angular-resource": "1.2.18",
    "angular-cookies": "1.2.18",
    "angular-sanitize": "1.2.18",
    "angular-animate": "1.2.18",
    "angular-touch": "1.2.18",
    "bourbon": "~4.0.2",
    "angular-fontawesome": "~0.1.2",
    "font-awesome": "~4.2.0",
    "weather-icons": "~0.0.1",
    "angular-bootstrap": "~0.11.2",
    "jquery.slimscroll": "~1.3.1",
    "animate.css": "~3.2.0",
    "jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js",
    "angular-loading-bar": "~0.5.1",
    "angular-ui-router": "~0.2.11",
    "angular-ui-utils": "~0.1.1",
    "bootstrap-daterangepicker": "~1.3.12",
    "ng-bs-daterangepicker": "~0.0.3",
    "angular-momentjs": "~0.1.8",
    "angular-fullscreen": "~1.0.0",
    "angular-ui-tree": "~2.1.5",
    "simple-line-icons": "~0.0.1",
    "html.sortable": "~0.1.5",
    "angular-toastr": "~0.4.0",
    "angular-bootstrap-nav-tree": "*",
    "oclazyload": "~0.3.8",
    "chosen": "https://github.com/harvesthq/chosen/releases/download/v1.2.0/chosen_v1.2.0.zip",
    "angular-ui-select": "~0.8.3",
    "textAngular": "~1.2.2",
    "angular-bootstrap-colorpicker": "~3.0.8",
    "angular-file-upload": "~1.1.5",
    "ngImgCrop": "~0.2.0",
    "angular-datatables": "~0.2.1",
    "angular-ui-grid": "~3.0.0-rc.12",
    "ng-table": "~0.3.3",
    "angular-smart-table": "~1.4.2",
    "morrisjs": "~0.5.1",
    "flot": "~0.8.3",
    "flot.tooltip": "~0.8.4",
    "angular-flot": "~0.0.6",
    "flot-spline": "*",
    "d3": "~3.4.13",
    "rickshaw": "~1.5.0",
    "angular-rickshaw": "~0.5.0",
    "owl-carousel": "~1.3.2",
    "angular-google-maps": "~2.0.9",
    "angular-ui-calendar": "~0.8.1"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16"
  },
  "appPath": "app"
}

You can easily install Yeoman with npm running this command in terminal npm install -g bower

Now when you have bower installed get to the root directory in terminal window and run command bower install. Bower will download and install all dependencies from bower.json file for you.

If you want add and install any additional dependency you can do it by running this command in root folder bower install 'package name'

Sass

Grunt will need Sass to be installed to compile Sass files into css and run project properly so we need to install it.

As first you need ruby installed on your computer. On windows download and install rubyinstaller from here. If you have ruby installed you can download sass gem with this command gem install sass. You can check if sass is installed properly by sass -v

If we have Sass installed run this command npm install grunt-contrib-sass --save-dev, after that we can use grunt to compile Sass files into css.

You can check documentation for Sass here or check this tutorial

Grunt

Grunt is a JavaScript task runner (Automation), save yourself from repetitive tasks.

There are two important files for grunt Grunfile.js and package.json. Gruntfile.js contains configurations for all plugins that grunt use. In package.json you can find all plugins that grunt use.

As we have all configured in this project we can run localhost server with this command from root folder grunt serve

To build your project use this command from root folder grunt build:dev

Grunt without minify/uglify

If you want build project with Grunt and don't want to minify/uglify files, you have to use Gruntfile-nominify.js for building. Just rename this file to Gruntfile.js and run build.

Colors

There are few default color palletes that you can use by assigning it's classes to elements. You can find all of them in file app/sass/shared/_global.scss from line 25.

For background you can use class .bg-'color-variant' and for text .text-'color-variant'

Core Modules

ui-router, for Nested Routing and Nested View, check the official documents

ui-utils, many useful utilities for Angular including jQuery Passthrough for calling jQuery functions, official documents

oclazyload, for lazy loading of js and css files, official documents

resolve: {
  plugins: ['$ocLazyLoad', function($ocLazyLoad) {
    return $ocLazyLoad.load([
      'scripts/vendor/datatables/datatables.bootstrap.min.css'
    ]);
  }]
}

Directives

Plugins