Adding new components
You can add new components with the following command
ng g component name
where 'g' is an alias for 'generate' and name is the name of the new component. This command will create a folder with the same name provided and the necessary files in the location src/app/name
Now you can import your component into the application in the corresponding module with the syntax
import { ComponentName } from './path/to/component';
A similar command can be used to generate service, pipe, etc. See more here
Adding new routes
You can generate a component for the RoutesModule specifying the path in the component generation, like:
ng g component routes/name
Then, you can import the component using the file src/app/routes/routes.module.ts
Example
import { SomeComponent } from './name/name.component';
@NgModule({
imports: [ ... ],
declarations: [
SomeComponent
],
exports: [
SomeComponent
]
})
Note that you have to add it to 'declarations' and 'exports' entries in order to make it available for the application.
Once you have the component is created, you need to declare the path for the route using file src/app/routes/routes.ts
The following example shows the basic route structure:
import { SomeComponent } from './name/name.component';
const routes = [
// routes loaded using the application layout (with sidebar, header, etc)
{
path: '',
component: LayoutComponent,
children: [
{ path: 'path', component: SomeComponent },
...
]
}
// Pages displayed without sidebar, header, etc.
{ path: 'path', component: SomeComponent },
...
]
export default routes;
Lazy loaded routes
Routes that are declare to be loaded when they are accessed needs a different setup. First, you have to declare the routes that loads a specific module, then that module declare all routes that can handle.
const routes = [
// routes loaded using the application layout (with sidebar, header, etc)
{
path: '',
component: LayoutComponent,
children: [
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
...
]
}
]
export default routes;
Note that the lazyloaded module and its component are *not *imported anywhere in the application.
Then the module can declare specific routes managed by the component that belongs to the lazy loaded module:
import { NgModule } from '@angular/core';
import { LazyComponent } from './lazy/lazy.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', component: LazyComponent },
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
declarations: [LazyComponent],
exports: [
RouterModule
]
})
export class LazyModule { }
Note the use of "forChild()" in the routes declarations. This is necessary for this type of setup.
The MenuService provides access to the application menu from one place (src/app/core/menu/menu.service.ts)
Edit the file app/routes/menu.ts and add there a menu entry following the provided structure.
const Item = {
name: 'Item',
link: '/Item',
iconclass: 'ion-aperture',
order: 1,
label: {
value: '2',
classname: 'badge bg-success'
}
};
export const menu = [Item, ...];
As you can see, this file only declares objects for each menu entry and exports an Array with all menu entries declared. This file is imported into the RoutesModule to initialize the menu that is later accessed from the SidebarComponent
The order is used to change the position of an item without reordering the exported array.
Vendor assets
Vendor assets can be installed using the Node Package Manager (npm). The following command shows how to install a package so it becomes part of the project
npm install package-name --save
If you don't add the --save flag, the package won't be saved as a dependecy in package.json and it will be only available in your local project.
Once the command ends, files will be available in the node_modules folder and ready to be imported into your application code.
Global
If the package must be used globally (not component based), you have the following options
- You can add them in the following files
src/styles.scss: @import here any css or scss file
*src/vendor.ts: *import here the new package name
- Add the paths to the angular.json file, in the "apps" section like follows
"styles": [
"../node_modules/some-package/some-package.css",
"styles.scss"
],
"scripts": [
"../node_modules/some-package/some-package.js",
"vendor.ts"
],
Everyting included here is like if you put it in the head section of the page
Local
To use a package locally in your new component, you can import the files directly into the code as follows
For styles, use the file somename.component.scss and @import the styles from node_modules/path
For scripts, import them using the es6 import syntax
Import paths are always relative to the file where the import is declared.
Note about jQuery
If a component uses jQuery you must add the following before the use:
declare var $: any;
Translation
The translation system uses the Angular2 Translate module.
This feature is managed by the TranslatorService defined in file src/app/core/translator/traslator.service.ts
This modules simplifies the translation system by loading translate references from a JSON file and replacing the content where the reference has been used.
Examples
<div [innerHTML]="'reference.NAME' | translate">Text that will be replaced</div>
<div>{{ 'reference.NAME' | translate }}</div>
<a href="#" title="{{ 'reference.NAME' | translate }}">Link</a>
The JSON files with translation references are located in the folder app/i18n
Themes
All available theme styles can found under folder src/app/shared/styles/themes, here you will se the following files according to each color combination
theme-a.scss
theme-b.scss
theme-c.scss
theme-d.scss
theme-e.scss
theme-f.scss
theme-g.scss
theme-h.scss
Those themes are managed by the server ThemesService located in file src/app/core/themes/themes.service.ts
This service will create a new style tag in the head section of the page and will add the selected theme styles obtained from the corresponding file as mentione before.
Preloader
The preloader files can be found in folder** src/app/core/preloader/**
It enabled by adding the following markup to the index file like follows
<div class="preloader">
<div class="preloader-progress">
<div class="preloader-progress-bar"></div>
</div>
</div>
*Background color *
Background color can be changed be editing class .preloader in file src/app/core/preloader/preloader.scss
Image logo
To generate the loading effect with text we use two images that are the same but one fully colored and the other with a little opacity.
Both images can be found and replaced in the following paths
src/assets/img/preloader/preloader.empty.png
src/assets/img/preloader/preloader.full.png
If you change this images, try to respect the original size. Otherwise, you will need to change a bit of the css to make the expected size matches with the real one.
*Note: *While the preloader is included within the structure of the application, it works independently and is even required independently because it must be available from as soon as possible to show the loading screen while the angular2 application is starting.
Creating the preloader PSD
- Create a psd with a canvas size of 190x60
- Add your custom text, for example in color white, and leave the background layer transparent. Save it as png with transparency and name it preloader.full.png. The font used is "Open Sans" 45px.
- Duplicate the above PSD file, open and set 30% opacity to the Text layer. Save it as png with transparency and name it preloader.empty.png
You can enable the horizontal menu following the next instructions:
- Open the file *src/app/layout/header/header.component.ts *and change name of the templateUrl like follows:
templateUrl: './header.component.h.html',
- Opent the file src/app/layout/layout.component.ts and change name of the templateUrl like follows:
templateUrl: './layout.component.h.html',
- Open *index.html *and add to the body the class name 'layout-h", like follows
<body class="layout-h">
- Save all changes and start the application
In file *src/app/layout/header/header.component.ts *we have added a filter to the menu items array to reduce the number of items displayed on demo. To change that just remove the call the function "slice"
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.