Angular2 Dashboard

Build a Mobile App for your business using Angular 2.

1. Development Environment

Node.js and npm installed. I recommend using nvm. I used nvm v0.31.0, node v4.4.2 & npm 2.14.7

  xcode-select --install
  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
  nvm install 4.2.2

Install ts-node for TypeScript:

  npm install -g ts-node

Git installed. I recommend using SourceTree

  git clone --depth 1 https://github.com/smartbiz/angular2-dashboard.git

Install the project's dependencies:

  cd angular2-dashboard
  
  # install the project's dependencies
  npm install
  # watches your files and uses livereload by default
  npm start
  
  # api document for the app
  npm run docs

  # dev build
  npm run build.dev
  # prod build
  npm run build.prod

2. Main Features

Version 1.0.1, 1.0.2, 1.0.3

• SASS & *.scss support
• Icon Fonts: icomoon_free, font_awesome
• ng2-bootstrap-1.0.11

.
├── gulpfile.ts
├── tools
│   ├── tasks                  <- gulp tasks
│   │   ├── project            <- project specific gulp tasks
│   │   │   ├── build.html_scss.ts
│   │   │   ├── build.index.dev.ts
│   │   │   └── scss-lint.ts
│   └── config
│       └── project.config.ts  <- configuration of the specific project
├── src
│   ├── assets
│   │   ├── _variables.scss
│   │   ├── _colors.scss
│   │   └── main.scss
│   ├── app
│   │   └── components
│   │       ├── navbar.component.scss
│   │       └── toolbar.component.scss
│   ├── about
│   │   └── components
│   │       └── about.component.scss
│   ├── home
│   │   └── components
│   │       └── home.component.scss
│   ├── search
│   │   └── components
│   │       └── search.component.scss

Version 1.0.0

• Ready to go, statically typed build system using gulp for working with TypeScript.
• Production and development builds.
• Sample unit tests with Jasmine and Karma.
• End-to-end tests with Protractor.
• Development server with Livereload.
• Experimental hot loading support.
• Following the best practices for your application’s structure.
• Manager of your type definitions using typings.
• Basic Service Worker, which implements "Cache then network strategy".

.
├── src
│   ├── main.ts 
│   ├── app
│   │   └── components
│   │       └── app.component.ts
│   ├── search
│   │   └── *.*
│   ├── shared
│   │   ├── services
│   │   │   └── search.service.ts
│   │   └── data
│   │       └── menu.json

3. Directory Structure

.
├── LICENSE
├── README.md
├── gulpfile.ts                <- configuration of the gulp tasks
├── karma.conf.js              <- configuration of the test runner
├── package.json               <- dependencies of the project
├── protractor.conf.js         <- e2e tests configuration
├── src                        <- source code of the application
│   ├── home
│   │   └── components
│   ├── index.html
│   ├── main.ts                <= 
│   ├── shared
│   │   └── services
│   │       ├── name-list...
│   │       └── name-list...
│   └── sw.js                  <- sample service worker
├── test-main.js               <- testing configuration
├── tools
│   ├── README.md              <- build documentation
│   ├── config
│   │   ├── project.config.ts  <= configuration of the specific project
│   │   ├── seed.config....
│   │   └── seed.config.ts     <- generic configuration of the seed project
│   ├── config.ts              <- exported configuration (merge both seed.config and project.config, project.config overrides seed.config)
│   ├── debug.ts
│   ├── manual_typings
│   │   ├── project            <- manual ambient typings for the project
│   │   │   └── sample.pac...
│   │   └── seed               <- seed manual ambient typings
│   │       ├── merge-stre..
│   │       └── slash.d.ts
│   ├── tasks                  <- gulp tasks
│   │   ├── project            <- project specific gulp tasks
│   │   │   └── sample.tas...
│   │   └── seed               <- seed generic gulp tasks. They can be overriden by the project specific gulp tasks
│   ├── utils                  <- build utils
│   │   ├── project            <- project specific gulp utils
│   │   │   └── sample_util...
│   │   ├── project.utils.ts
│   │   ├── seed               <- seed specific gulp utils
│   │   │   ├── clean.ts
│   │   │   ├── code_change...
│   │   │   ├── server.ts
│   │   │   ├── tasks_tools.ts
│   │   │   ├── template_loc...
│   │   │   ├── tsproject.ts
│   │   │   └── watch.ts
│   │   └── seed.utils.ts
│   └── utils.ts
├── tsconfig.json              <- configuration of the typescript project (ts-node, which runs the tasks defined in gulpfile.ts)
├── tslint.json                <- tslint configuration
├── typings                    <- typings directory. Contains all the external typing definitions defined with typings
├── typings.json
└── appveyor.yml