Bulona - Angular 13+ Bootstrap 5+ Admin Template

Getting Started

Make sure you have Nodejs, NPM and @angular/cli installed on your computer.

Download node https://nodejs.org/en/download

Open terminal and run npm install -g @angular/cli

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.

Then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component componentName to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

App Entry Point

main.ts (Location: src) is the entry file. And app.scss (Location: "src/assets/styles/app.scss") is the entry file for Styles which is included in angular.json file.

Route Configuration

There are two main router-outlets in Content-Layout.Component and full-Layout.Component (Location: src/app//layouts). Content-Layout.Component renders sessions view (Location: src/app/layouts) and full-Layout.Component renders all views except sessions view.

Each directory in src/app/ is a module. And those modules are lazy loaded which is configured in routes (Location: src/app/shared). And also each modules has it's own routing file defines it's child routes.

Folder Structure

                    
                Bulona
                ├── CHANGELOG.md
                ├── LICENSE.md
                ├── README.md
                ├── angular-cli.json
                ├── documentation
                ├── karma.conf.js
                ├── package.json
                ├── protractor.conf.js
                ├── src
                │   ├── app
                │   │   ├── app.component.scss
                │   │   ├── app.component.html
                │   │   ├── app.component.ts
                │   │   ├── app.module.ts
                │   │   ├── app.routing.ts
                │   │   ├── components
                │   │   │   ├── .....
                │   │   ├── shared
                │   │   │   ├── sidebar
                │   │   │   ├── ......
                │   │   ├── dashboard
                │   │   │   ├── .....
                │   │   ├── icons
                │   │   │   ├── .....
                │   │   ├── .....
                │   ├── assets
                            └── .....
                │   ├── environments
                │   ├── favicon.ico
                │   ├── index.html
                │   ├── main.ts
                │   ├── polyfills.ts
                │   ├── styles.scss
                │   ├── test.ts
                │   ├── tsconfig.app.json
                │   ├── tsconfig.spec.json
                │   └── typings.d.ts
                ├── tsconfig.json
                ├── tslint.json
                └── typings

Navigation

Menu items are served by sidebar.metadata.ts (Location: shared/sidebar/sidebar.metadata.ts). You have to define your menu items there.

This metadata serves array of IMenuItem.


                        
                        export interface RouteInfo {
                            path: string;
                            title: string;              // Used as display text for item and title for separator type
                            icon: string;               // Item icon name
                            class: string;              // sub (submenu)
                            badge: string;              // Used as display text for bedge
                            badgeClass: string;         // bedge classes /info/danger..
                            isExternalLink: boolean;    // true/false
                            submenu : RouteInfo[];      //submenu
                        }

Common CSS Classes

Background color

.bg-primary
.bg-success
.bg-warning
.bg-danger
.bg-light
.bg-dark

Color

.text-primary
.text-success
.text-warning
.text-danger
.text-light
.text-dark

View all Classes

Dependencies

appify is packed with building blocks. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

                    
                        "dependencies": {
                                "@agm/core": "^1.1.0",
                                "@angular/animations": "~13.3.1",
                                "@angular/common": "~13.3.1",
                                "@angular/compiler": "~13.3.1",
                                "@angular/core": "~13.3.1",
                                "@angular/forms": "~13.3.1",
                                "@angular/platform-browser": "~13.3.1",
                                "@angular/platform-browser-dynamic": "~13.3.1",
                                "@angular/router": "~13.3.1",
                                "@ng-bootstrap/ng-bootstrap": "^11.0.0-beta.1",
                                "@popperjs/core": "^2.9.2",
                                "@tinymce/tinymce-angular": "^4.2.3",
                                "angular-calendar": "^0.28.24",
                                "angular2-text-mask": "^9.0.0",
                                "angularx-flatpickr": "^6.2.0",
                                "apexcharts": "^3.26.3",
                                "bootstrap": "^5.0.1",
                                "chart.js": "^2.9.4",
                                "date-fns": "2.16.1",
                                "flatpickr": "^4.6.6",
                                "highcharts": "^9.1.0",
                                "highcharts-angular": "^2.10.0",
                                "jquery": "^3.6.0",
                                "ng2-charts": "^2.4.2",
                                "ngx-perfect-scrollbar": "^10.1.1",
                                "rxjs": "~7.5.0",
                                "smartwizard": "^5.1.1",
                                "text-mask-addons": "^3.8.0",
                                "tslib": "^2.3.0",
                                "zone.js": "~0.11.4"
                          }

Third Party

appify is packed with building blocks. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

The following is a list of resources, plugins and other assets used in creating this template. Follow the links for more information on how you can use them.