angular-starter
directory structure
The starter project by default includes all third-party components.
Optionally you can remove unwanted components to reduce bundle size and compile time:
dependencies
section in the package.json
file.src/vendor/libs
directory.@import
s and @include
s in the src/vendor/styles/_theme/_libs.scss
file.For example, if you want to exclude ng-select
component, you will need to:
ng-select
dependency in the package.json
file.src/vendor/libs/ng-select
directory.@import "~vendor/libs/ng-select/mixins";
, @include ng-select-theme($background, $color);
and @include material-ng-select-theme($background, $color);
lines in the src/vendor/styles/_theme/_libs.scss
file.
cmd.exe
as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools
.cmd.exe
, go to the angular-starter
directory and run command yarn install
.sudo apt-get update && sudo apt-get upgrade
.sudo apt-get install curl
.angular-starter
directory and run command yarn install
.angular-starter
directory and run command yarn install
.index.html
src/index.html
<!DOCTYPE html>
<html lang="en" class="default-style">
<head>
<base href="/">
<title>Angular Starter</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Main font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<!-- Icons. Uncomment required icon fonts -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css"> -->
<link rel="stylesheet" href="assets/vendor/fonts/ionicons.css">
<!-- <link rel="stylesheet" href="assets/vendor/fonts/linearicons.css"> -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/open-iconic.css"> -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/pe-icon-7-stroke.css"> -->
<!-- Layout helpers -->
<script src="assets/vendor/js/layout-helpers.js"></script>
</head>
<body>
<!-- App root -->
<app-root></app-root>
<!-- / App root -->
<!-- IE11 fix -->
<script>
if (!!window.MSInputMethodContext && !!document.documentMode || document.documentMode <= 11) {
window.MouseEvent.prototype = Event.prototype;
window.MouseEvent = function (eventType, params) {
params = params || { bubbles: false, cancelable: false };
var mouseEvent = document.createEvent('MouseEvent');
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return mouseEvent;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="default-style">
<head>
<base href="/">
<title>Angular Starter</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Main font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
<!-- Icons. Uncomment required icon fonts -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css"> -->
<link rel="stylesheet" href="assets/vendor/fonts/ionicons.css">
<!-- <link rel="stylesheet" href="assets/vendor/fonts/linearicons.css"> -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/open-iconic.css"> -->
<!-- <link rel="stylesheet" href="assets/vendor/fonts/pe-icon-7-stroke.css"> -->
<!-- Core stylesheets -->
<link rel="stylesheet" href="vendor/styles/bootstrap.css" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="vendor/styles/appwork.css" class="theme-settings-appwork-css">
<link rel="stylesheet" href="vendor/styles/theme-corporate.css" class="theme-settings-theme-css">
<link rel="stylesheet" href="vendor/styles/colors.css" class="theme-settings-colors-css">
<link rel="stylesheet" href="vendor/styles/uikit.css">
<!-- Layout helpers -->
<script src="assets/vendor/js/layout-helpers.js"></script>
<!-- Theme settings -->
<script src="assets/vendor/js/theme-settings.js"></script>
<script>
window.themeSettings = new ThemeSettings({
cssPath: 'vendor/styles/',
themesPath: 'vendor/styles/'
});
</script>
</head>
<body>
<!-- App root -->
<app-root></app-root>
<!-- / App root -->
<!-- IE11 fix -->
<script>
if (!!window.MSInputMethodContext && !!document.documentMode || document.documentMode <= 11) {
window.MouseEvent.prototype = Event.prototype;
window.MouseEvent = function (eventType, params) {
params = params || { bubbles: false, cancelable: false };
var mouseEvent = document.createEvent('MouseEvent');
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return mouseEvent;
}
}
</script>
</body>
</html>
To display a page with the selected layout just define the page component as a child of the layout component.
You can find navbar, sidenav and footer
components in the src/app/layout/layout-navbar
,
src/app/layout/layout-sidenav
and src/app/layout/layout-footer
directories.
src/app/app-routing.module.ts
...
import { Layout1Component } from './layout/layout-1/layout-1.component';
...
const routes: Routes = [
...
{ path: '/page', component: Layout1Component, children: [
{ path: '', component: PageComponent },
]},
...
];
src/app/app-routing.module.ts
...
import { Layout1FlexComponent } from './layout/layout-1-flex/layout-1-flex.component';
...
const routes: Routes = [
...
{ path: '/page', component: Layout1FlexComponent, children: [
{ path: '', component: PageComponent },
]},
...
];
src/app/app-routing.module.ts
...
import { Layout2Component } from './layout/layout-2/layout-2.component';
...
const routes: Routes = [
...
{ path: '/page', component: Layout2Component, children: [
{ path: '', component: PageComponent },
]},
...
];
src/app/app-routing.module.ts
...
import { Layout2FlexComponent } from './layout/layout-2-flex/layout-2-flex.component';
...
const routes: Routes = [
...
{ path: '/page', component: Layout2FlexComponent, children: [
{ path: '', component: PageComponent },
]},
...
];
src/app/app-routing.module.ts
...
import { LayoutBlankComponent } from './layout/layout-blank/layout-blank.component';
...
const routes: Routes = [
...
{ path: '/page', component: LayoutBlankComponent, children: [
{ path: '', component: PageComponent },
]},
...
];
To use settings panel, you need to make Appwork's stylesheets separated from application stylesheets (use the generator to see the example):
angular.json
file and remove all Appwork's SCSS paths within projects.angular-starter.architect.build.options.styles
section.Add imports using lazy notation:
angular.json
...
"styles": [
...
{ "input": "src/vendor/styles/appwork.scss", "bundleName": "vendor/styles/appwork", "lazy": true },
{ "input": "src/vendor/styles/appwork-material.scss", "bundleName": "vendor/styles/appwork-material", "lazy": true },
{ "input": "src/vendor/styles/bootstrap.scss", "bundleName": "vendor/styles/bootstrap", "lazy": true },
{ "input": "src/vendor/styles/bootstrap-material.scss", "bundleName": "vendor/styles/bootstrap-material", "lazy": true },
...
],
...
To enable a theme, insert path to a theme SCSS file into the
projects.angular-starter.architect.build.options.styles
section
of angular.json
file.
Do not forget to remove the old theme path. All files within this section
will be included into the <head>
section automatically.
angular.json
...
"styles": [
...
"src/vendor/styles/theme-air.scss",
...
],
...
To enable a theme, include the required theme stylesheet from the vendor/styles/
path.
src/index.html
<link rel="stylesheet" href="vendor/styles/theme-air.css" class="theme-settings-theme-css">
To enable material styling you need to:
Set material-style
class on the <html>
element instead of default-style
.
src/index.html
<html class="material-style">
Add -material
suffix to bootstrap.scss
,
appwork.scss
, theme-*.scss
and colors.scss
paths within projects.angular-starter.architect.build.options.styles
section of angular.json
file.
angular.json
...
"styles": [
...
"src/vendor/styles/bootstrap-material.scss",
"src/vendor/styles/appwork-material.scss",
"src/vendor/styles/theme-corporate-material.scss",
"src/vendor/styles/colors-material.scss",
...
],
...
Add -material
suffix to bootstrap
, appwork
, theme-*
and colors
stylesheets.
src/index.html
<link rel="stylesheet" href="vendor/styles/bootstrap-material.css" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="vendor/styles/appwork-material.css" class="theme-settings-appwork-css">
<link rel="stylesheet" href="vendor/styles/theme-corporate-material.css" class="theme-settings-theme-css">
<link rel="stylesheet" href="vendor/styles/colors-material.css" class="theme-settings-colors-css">
Optionally you can enable material ripple. Just append material-ripple.js
script to the <head>
section and call attachMaterialRippleOnLoad()
function.
src/index.html
<script src="assets/vendor/js/material-ripple.js"></script>
<script>
window.attachMaterialRippleOnLoad();
</script>
Optionally you can enable material ripple. Just append material-ripple.js
script to the <head>
section.
src/index.html
<script src="assets/vendor/js/material-ripple.js"></script>
To enable RTL direction support, include SCSS files
from the src/vendor/styles/rtl/
directory instead of src/vendor/styles/
within projects.angular-starter.architect.build.options.styles
section of angular.json
file.
angular.json
...
"styles": [
...
"src/vendor/styles/rtl/bootstrap.scss",
"src/vendor/styles/rtl/appwork.scss",
"src/vendor/styles/rtl/theme-corporate.scss",
"src/vendor/styles/rtl/colors.scss",
"src/vendor/styles/rtl/uikit.scss"
...
],
...
To enable RTL direction support, include SCSS files
from the src/vendor/styles/rtl/
directory instead of src/vendor/styles/
within projects.angular-starter.architect.build.options.styles
section of angular.json
file.
angular.json
...
"styles": [
...
{ "input": "src/vendor/styles/rtl/appwork.scss", "bundleName": "vendor/styles/appwork", "lazy": true },
{ "input": "src/vendor/styles/rtl/appwork-material.scss", "bundleName": "vendor/styles/appwork-material", "lazy": true },
{ "input": "src/vendor/styles/rtl/bootstrap.scss", "bundleName": "vendor/styles/bootstrap", "lazy": true },
{ "input": "src/vendor/styles/rtl/bootstrap-material.scss", "bundleName": "vendor/styles/bootstrap-material", "lazy": true },
...
],
...
To enable RTL direction, add dir="rtl"
attribute to the <html>
element.
src/index.html
<html dir="rtl">
You can configure the initial layout by setting control classes to the <html>
element.
src/index.html
<html class="layout-fixed layout-collapsed">
Control class | Description |
---|---|
.layout-reversed |
Reverse layout direction without markup change. |
.layout-expanded |
Expand layout sidenav on small screens (< 992px). |
.layout-collapsed |
Collapse layout sidenav on large screens (>= 992px). |
.layout-offcanvas |
Make layout sidenav offcanvas. |
.layout-fixed |
Set layout position to fixed. |
.layout-fixed-offcanvas |
Set layout position to fixed with offcanvas sidenav. |
.layout-navbar-fixed |
Set layout navbar position to fixed. |
.layout-footer-fixed |
Set layout footer position to fixed. |
Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the angular-starter
directory.
Open console/terminal, go to the angular-starter
directory and run npm run task_name
.
Task | Description |
---|---|
ng |
Run angular-cli's ng command. |
start |
Run dev server. |
build |
Build. |
prod |
Build for production. Output files won't contain hash in their filenames. |
prod:hashed |
Build for production. Output files will contain hash in their filenames. |
test |
Run unit tests. |
lint |
Run linting. |
e2e |
Run end-to-end tests. |
prod:hashed
command.
There are two ways to build the project for production:
prod
command. This command generates output files without
hash in their names. You will need to define a caching strategy for these files by yourself.
prod:hashed
command. This command generates output files with
hash in their names. But currently angular-cli does not provide the ability to get a hash map
for lazy loaded stylesheets. So you will need to write your own post build
script that will scan vendor/styles
directory, find all
hashed stylesheets and fix urls for theese stylesheets in the index.html
file.