easy-core

Easy-Core for Angular

This is the home for Easy-Core. Built for Angular.

Boilerplate and core components abstraction to simplify application bootstrap.

Best used with npm:easy-suite

Installation

The latest release of Easy-Suite can be installed from npm

npm install --save easy-core

Project status

Easy Core is currently in beta and under active development. During beta, new features will be added regularly and APIs will evolve based on user feedback.

Feature status:

Feature	Status
loader	Available
http client	Available
configurations	Available

"Available" means that the components or feature is published and available for use, but may still be missing some behaviors or polish.

Getting started

Step 1: Install Easy Core

npm install --save easy-core

Step 2: Import the component modules

Import the NgModule:

import { HttpClient, httpServiceFactory, AppConfig, LoaderService, LoaderComponent } from 'easy-core';
import { LocalStorageModule, LocalStorageService } from 'angular-2-local-storage';
import { HttpModule, Http } from '@angular/http';
 
@NgModule({
  imports: [
   // ...
    HttpModule,
    LocalStorageModule.withConfig({
      prefix: '',
      storageType: 'localStorage'
    })
     // ...
  ],
  exports: [
   // ...
    LoaderComponent
   // ...
  ],
  declarations: [
   // ...
    LoaderComponent
   // ...
  ],
  providers: [
  // ...
    {
      provide: HttpClient,
      useFactory: httpServiceFactory,
      deps: [Http, LocalStorageService, LoaderService]
    },
    AppConfig,
    LoaderService,
    { provide: APP_INITIALIZER, useFactory: (config: AppConfig) => () => config.load(), deps: [AppConfig], multi: true }]
  // ...
})
export class AppModule { }
 

Step 3: Add/ Update Config File

Add a config folder app route.

Add env.json file.

{
    "env": "development"
}

Add config.development.json file.

[{
    "Name": "itemUrl",
    "Value": "http://google.com/"
  }
]
 

Step 4: Httpclient Usage

 
import { Injectable } from '@angular/core';
import { AppConfig, HttpClient } from 'easy-core';
 
@Component({
  selector: 'hello-world',
  template: '<easy-form [form]="form"></easy-form>'
})
 
@Injectable()
export class HelloWorldService {
 
  form: EasyForm;
  config: AppConfig;
 
    constructor(config: AppConfig, private httpClient: HttpClient) {
        this.config = config;
    }
 
   getItems() {
        let url = this.config.get('itemUrl') + 'TestRoute';
        return this.httpClient.get(url);
    }
 
}

Step 4: Loader Usage

In main app.html add loading component

<angular-loader></angular-loader>

Extension Methods

Array Extensions

In your root module import the ArrayExtensions module. In the root module of your secondary application do the same.

import { ArrayExtensions } from 'easy-core'; 

        single(func: (value: T) => void): T;
        singleOrDefault(func: (value: T) => void): T;
        first(func: (value: T) => void): T;
        first(): T;
        firstOrDefault(func: (value: T) => void): T;
        firstOrDefault(): T;
        where(func: (value: T) => void): T[];
        any(func: (value: T) => void): boolean;
        all(func: (value: T) => void): boolean;
        orderBy(propertyExpression: (item: T) => any): T[];
        orderByDescending(propertyExpression: (item: T) => any): T[];
        add(item: T): void;
        addRange(items: T[]): void;
        remove(item: T): boolean;

Example

 
let items = new Array<string>();
items.add("hello");
items.add("world");
 
alert(items.first()); //This will print "hello".
alert(items.firstOrDefault(x=>x == "world");); //This will print "world".
 

String Extensions

In your root module import the StringExtensions module. In the root module of your secondary application do the same.

import { StringExtensions } from 'easy-core'; 

  fromCamelCase(): string;

Example

 
let text = "HelloWorld";
alert(text.fromCamelCase()); //prints "Hello World";
 

Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add easy-suite to the SystemJS configuration:

System.config({
  // existing configuration options
  map: {
    // ...
    'easy-suite': 'npm:easy-suite/src/',
    'easy-core': 'npm:easy-core/src/'
    // ...
  },
 
  packages: {
    // ...
      'easy-core': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'easy-suite': {
        main: 'index.js',
        defaultExtension: 'js'
      }
    // ...
    }
 
});