Directory Structure
jAngular 2 Toolkit built using Angular 5+ with Angular CLI. As it uses angular cli, their core directory and configuration structure is same as Angular CLI directory structure.
Package.json file used
{
"name": "j-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-redux/form": "^6.5.2",
"@angular-redux/router": "^6.3.1",
"@angular-redux/store": "^6.5.6",
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@types/jquery": "^3.2.15",
"angular2-tinymce": "^2.1.2",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng2-img-cropper": "^0.9.0",
"ng2-select": "^1.2.0",
"ng2-translate": "^5.0.0",
"ngx-cookie-service": "^1.0.9",
"ngx-toastr": "^8.3.0",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-observable": "^0.14.1",
"rxjs": "^5.5.6",
"tassign": "^1.0.0",
"ui-select": "^0.19.8",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/croppie": "^2.5.2",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Default Template
jAngular 2 Toolkit uses bootstrap 4 compatible default template for demonstration purpose. You can replace it completely with your own template or export modules that are needed in your application.
Template files loaded directly in application index.html file.
Some template js files setup in .angular-cli.json file.
jAngular 2 Toolkit is not depended on any template or theme. You can use it with any template or UI.
Environment Configuration
jAngular 2 uses optional environment configuration to configure settings for development and production environment e.g api url.
Environment configuration written in json files located in /src/configs/ directory
config.development.json config.production.json env.json
You can set which environment you are building application with by making changes in env.json file.
{
"env": "production"
}
Application Directory
List of directories within app used by jAngular 2 Toolkit
/app/animations (optional animations) /app/configs (optional settings) /app/pages (toolkit demo & examples) /app/partials (core toolkit components) /app/store (redux store)
There are two important directories that jAngular 2 Toolkit rely on. pages and partials
Partial Modules
Partial directory include core reusable modules, components and directives for different purposes.
List of important components, modules and components available in partial directory.
- Dynamic Form
- Navigation
- Toolbar
- Loader
- Uploader
- Alerts
- Notify
- and more
Besides all components, the most important components are Dynamic Form and Uploader
Pages
List of pages categories in multiple sections including
- core
- Dashboard
- Forms
- AttachImages
- AttachResume
- Realestate
- Simple
- Elements
- Wizards
- Listings
- Tabular Listing
- Grid Listing
- Uploaders
- Cropper
- File Uploader
- Photo Uploader
- Update Cover
- Video Uploader
Dynamic Form Module
It is the core module of jAngular 2 Toolkit. It support rendering almost any type of forms with validations dynamically.
Sample example for rendering TextBox element within form.
controls.push(new Controls.Textbox({
key: 'title', // element key that binds value with. when submit data binds with this key e.g { title: 'value entered' }
label: 'Title', // display title
value: entity.title, // actual value to bind with element
required: true, // required field or not
order: 0, // make order in list of items.
maxLength: 300, // setup max length
helpblock: `Enter post title` // display help block below element
}));
List of supported attributes
value: T; // actual value bind with element key: string; // key representing element in form. label: string; // display label labelasheading?: boolean; // act this element as heading. if set to true this will not render any element but just section heading required: boolean; // require validator email: boolean; // email validator minLength?: number; // min length validator maxLength?: number; // max length validator pattern?: string; // regular expression validator order: number; // order sequence to render control in form controlType: string; // represent type of control checked?: boolean; // check attribute for checkboxes checklist?: any; // checklist control (display list of checkbox array) helpblock?: any; // help text render below element uploadoptions?: any; // integrate uploader with form (uploader options) colsize?: any; // setup colsize for specific element e.g col-md-2 (to display in smaller space) disabled?: any; // disable control placeholder?: string; // element placeholder attribute
These attributes apply on all available elements. Some attributes are for specific elements e.g checklist. You can customize it by adding more attributes to extend it functionality with your needs
List of elements supported listed below. All elementes extended from FormBase class
Textbox TextArea TinyMyceEditor Dropdown Select RadioButtonList RadioButton CheckBox CheckBoxList Uploader SectionHeader DropdownList TextBoxList
You can create more elements by extending any one element listed above. e.g You can add element to render date picker, time picker, any third party jquery plugin or make more complex elements.
You can import elements from the following location
import { FormBase } from './partials/components/dynamicform/model/base';
import * as Controls from './partials/components/dynamicform/model/elements';
Complete example for rendering a simple form.
// import dynamic form module
import { FormBase } from './partials/components/dynamicform/model/base';
import * as Controls from './partials/components/dynamicform/model/elements';
// write form model
export interface FormEntity {
id: number;
title: string;
description: string;
tags: string;
}
// write class to generate control list
returnControls(entity: FormEntity) {
const controls: FormBase[] = [];
controls.push(new Controls.Textbox({
key: 'title',
label: 'Title',
value: entity.title,
required: true,
order: 0,
maxLength: 100,
placeholder: 'Enter Title'
}));
controls.push(new Controls.TextArea({
key: 'description',
label: 'Description',
value: entity.description,
required: true,
order: 1,
maxLength: 3000,
placeholder: 'Enter Description'
}));
controls.push(new Controls.Textbox({
key: 'tags',
label: 'Tags',
value: entity.tags,
required: true,
order: 2,
maxLength: 1000,
helpblock: `Enter one or more tags separated by comma`
}));
return controls.sort((a, b) => a.order - b.order);
}
// on page where you want to render controls
this.controls = this.returnControls({
title: '',
description: '',
tags: ''
});
// on template page associated with this component
<dynamic-modal-form
*ngIf="!showLoader"
[controls]="controls"
[showLoader] = "showLoader"
[showCancel] = false
[showModal] = false
[submitText] = "submitText"
(OnSubmit)="SubmitForm($event)">
</dynamic-modal-form>
Customizing Form Layout
Dynamic form uses the following file for rendering each control and form. You can freely change / customize form html in these two files. Making changes in the following pages will result in changing the UI in whole application.
// handling the UI of each control render within form. /partials/components/dynamicform/dynamic-form-control.html // handler the whole form controls /partials/components/dynamicform/dynamic-modal-form.html
Customizing Control Validations
Some basic validations already implemented on dynamic form controls. You can add your own custom validator by customizing the code on file
./partials/components/dynamicform/services/control.service.ts
group[control.key] = control.required ? new FormControl(control.value || '',
[ Validators.required,
Validators.minLength(control.minLength),
Validators.maxLength(control.maxLength),
Validators.pattern(control.pattern)
])
: new FormControl(control.value || '');
Currently four validators attached including required, min, max and pattern validators.
Partial Module
All modules packaged with jAngular 2 Toolkit is part of PartialModule. Before using any module you have import that module within your application or specific part of application.
import { PartialModule } from './partials/shared.module';
Uploaders
jAngular 2 Toolkit include advance uploading modules that can be easily integrate to add support for real time, html 5 compatible uploading functionality within you angular application.
Sample uploader integration
<app-uploader
[Info]="Info"
[uploadedFiles]="uploadedFiles"
(OnUploaded) = "OnUploadedFiles($event)"
></app-uploader>
// [Info] passes optional user data
// [uploadedFiles] passes list of already uploaded files for display purpose
// (OnUploaded) triggers when all selected files uploaded. it will return list of uploaded files in javascript array.
OnUploadedFiles(files: any) {
// write code to update image information in database or in redux store
console.log(files);
this.Files = files;
}
Redux Implementation
jAngular 2 Toolkit uses Redux state architecture for data state control within application. Redux is configured within /app/store/ directory
You have to import redux store module withn your application in order to use redux state properly.
import { StoreModule } from './store/module';
Each and every page within jAngualr 2 Toolkit have directory reducer which include three files
actions.ts // handling all redux actions and business layer logics model.ts // handler redux state model reducer.ts // handler redux reducer specific for that page.
All application reducers combined with single reducer at store level.
export const rootReducer = composeReducers(
defaultFormReducer(),
combineReducers({
simpleform: createSimpleFormReducer(),
elements: createElementsFormReducer(),
contactresume: createContactFormReducer(),
album: createAlbumFormReducer(),
realestate: createRealEstateFormReducer(),
resume: createWizardFormReducer(),
mailtemplates: createMailTemplateReducer(),
photos: createPhotoReducer(),
core: createCoreReducer(),
router: routerReducer
}));
jAngular 2 Toolkit include complete practical demonstration of redux with various examples.