Documentation

jAngular 2 Toolkit complete documentation & technical guide.

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.