Simple Dashboard Admin App built using Angular 2 and Bootstrap 4
This project is a port of the famous Free Admin Bootstrap Theme SB Admin v2.0 to Angular2 Theme.
Powered by StartAngular & StrapUI
##Demo
SB Admin BS 4 Angular2 provides the following features:
- Allows you to painlessly update the seed tasks of your already existing project.
- Ready to go, statically typed build system using gulp for working with TypeScript.
- Production and development builds.
- Ahead-of-Time compilation support.
- Sample unit tests with Jasmine and Karma including code coverage via istanbul.
- End-to-end tests with Protractor.
- Development server with Livereload.
- Following the best practices for your application’s structure.
- Manager of your type definitions using @types.
- Has autoprefixer and css-lint support.
Note that this seed project requires node v4.x.x or higher and npm 2.14.7.
In order to start the seed use:
git clone https://github.com/start-angular/SB-Admin-BS4-Angular-2.git
cd SB-Admin-BS4-Angular-2
# install the project's dependencies
npm install
# watches your files and uses livereload by default
npm start
# api document for the app
# npm run build.docs
# dev build
npm run build.dev
# prod build
npm run build.prod
# prod build with AoT compilation
npm run build.prod.exp
# dev build of multiple applications (by default the value of --app is "app")
npm start -- --app baz
npm start -- --app foo
npm start -- --app barDefault application server configuration
var PORT = 5555;
var LIVE_RELOAD_PORT = 4002;
var DOCS_PORT = 4003;
var APP_BASE = '/';Configure at runtime
npm start -- --port 8080 --reload-port 4000 --base /my-app/If you have different environments and you need to configure them to use different end points, settings, etc. you can use the files dev.ts or prod.ts in./tools/env/. The name of the file is environment you want to use.
The environment can be specified by using:
npm start -- --config-env ENV_NAMECurrently the ENV_NAMEs are dev, prod, staging, but you can simply add a different file "ENV_NAME.ts". file in order to alter extra such environments.
├── 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
│ └── client
│ ├── app
│ │ ├── login
│ │ │ ├── login.component.css
│ │ │ ├── login.component.e2e-spec.ts
│ │ │ ├── login.component.html
│ │ │ ├── login.component.spec.ts
│ │ │ ├── login.component.ts
│ │ │ ├── login.module.ts
│ │ │ ├── login.routes.ts
│ │ │ └── index.ts
│ │ ├── dashboard
│ │ │ ├── home
│ │ │ ├── bg-component
│ │ │ ├── blankpage
│ │ │ ├── dashboard.component.css
│ │ │ ├── dashboard.component.e2e-spec.ts
│ │ │ ├── dashboard.component.html
│ │ │ ├── dashboard.component.spec.ts
│ │ │ ├── dashboard.component.ts
│ │ │ ├── dashboard.module.ts
│ │ │ ├── dashboard.routes.ts
│ │ │ └── index.ts
│ │ ├── app.component.html
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app.routes.ts
│ │ ├── main.ts
│ │ └── shared
│ │ ├── config
│ │ │ └── env.config.ts
│ │ ├── index.ts
│ │ ├── shared.module.ts
│ │ ├── name-list
│ │ │ ├── index.ts
│ │ │ ├── name-list.service.spec.ts
│ │ │ └── name-list.service.ts
│ │ ├── sidebar
│ │ │ ├── index.ts
│ │ │ ├── sidebar.component.html
│ │ │ └── sidebar.component.ts
│ ├── assets
│ │ ├── bootstrao
│ │ └── images
│ │ └── sass
│ ├── testing
│ ├── index.html
│ ├── tsconfig.json
│ └── typings.d.ts
├── test-main.js <- testing configuration
├── tools
│ ├── README.md <- build documentation
│ ├── config
│ │ ├── project.config.ts <- configuration of the specific project
│ │ ├── seed.config.interfaces.ts
│ │ └── 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
│ ├── env <- environment configuration
│ │ ├── base.ts
│ │ ├── dev.ts
│ │ └── prod.ts
│ ├── manual_typings
│ │ ├── project <- manual ambient typings for the project
│ │ │ └── sample.package.d.ts
│ │ └── seed <- seed manual ambient typings
│ │ ├── angular2-hot-loader.d.ts
│ │ ├── autoprefixer.d.ts
│ │ ├── colorguard.d.ts
│ │ ├── connect-livereload.d.ts
│ │ ├── cssnano.d.ts
│ │ ├── doiuse.d.ts
│ │ ├── express-history-api-fallback.d.ts
│ │ ├── istream.d.ts
│ │ ├── karma.d.ts
│ │ ├── merge-stream.d.ts
│ │ ├── open.d.ts
│ │ ├── postcss-reporter.d.ts
│ │ ├── slash.d.ts
│ │ ├── stylelint.d.ts
│ │ ├── systemjs-builder.d.ts
│ │ ├── tildify.d.ts
│ │ ├── tiny-lr.d.ts
│ │ └── walk.d.ts
│ ├── tasks <- gulp tasks
│ │ ├── project <- project specific gulp tasks
│ │ │ └── sample.task.ts
│ │ └── seed <- seed generic gulp tasks. They can be overriden by the project specific gulp tasks
│ │ ├── build.assets.dev.ts
│ │ ├── build.assets.prod.ts
│ │ ├── build.bundles.app.ts
│ │ ├── build.bundles.ts
│ │ ├── build.docs.ts
│ │ ├── build.html_css.ts
│ │ ├── build.index.dev.ts
│ │ ├── build.index.prod.ts
│ │ ├── build.js.dev.ts
│ │ ├── build.js.e2e.ts
│ │ ├── build.js.prod.ts
│ │ ├── build.js.test.ts
│ │ ├── build.js.tools.ts
│ │ ├── check.versions.ts
│ │ ├── clean.all.ts
│ │ ├── clean.coverage.ts
│ │ ├── clean.dev.ts
│ │ ├── clean.prod.ts
│ │ ├── clean.tools.ts
│ │ ├── copy.js.prod.ts
│ │ ├── css-lint.ts
│ │ ├── e2e.ts
│ │ ├── generate.manifest.ts
│ │ ├── karma.start.ts
│ │ ├── serve.coverage.ts
│ │ ├── serve.docs.ts
│ │ ├── server.prod.ts
│ │ ├── server.start.ts
│ │ ├── tslint.ts
│ │ ├── watch.dev.ts
│ │ ├── watch.e2e.ts
│ │ ├── watch.test.ts
│ │ └── webdriver.ts
│ ├── utils <- build utils
│ │ ├── project <- project specific gulp utils
│ │ │ └── sample_util.ts
│ │ ├── project.utils.ts
│ │ ├── seed <- seed specific gulp utils
│ │ │ ├── clean.ts
│ │ │ ├── code_change_tools.ts
│ │ │ ├── server.ts
│ │ │ ├── tasks_tools.ts
│ │ │ ├── template_locals.ts
│ │ │ ├── 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