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'
}
// ...
}
});