angular-core¶
Source | angular-core |
---|
General¶
The angular-core operates as an global and central library for the evan.network Angular 5 frontend development. Using this project you will be able to to the following things:
- easy import AngularCoreModule for including all services and components
- featured Angular DApp starting mechanisms
- IMPORTANT: use this functions for starting and stopping your nested Angular DApps to prevent memory leaks.
- dynamic routes builder for nested Angular DApps
- comfortable UI services
- Ionic alert service wrapper (smaller function calls + i18n)
- file handling and upload (HTML 5 + Ionic IOS + Ionic Android)
- modal ui handler
- picture capturing (HTML 5 + Ionic IOS + Ionic Android)
- qr-code scanning (HTML 5 + Ionic IOS + Ionic Android)
- Angular routing wrapper
- Ionic slides wrapper and helpers
- Ionic toast service wrapper (smaller function calls + i18n)
- translate (ngx-translate wrapper)
- comfortable BCC wrapper services - address-book - bcc - bc - bookmark - core - description - mailbox - onboarding
- queue handling - value pushing & dispatcher loading - queue-utilities (QueueId, …)
- generalized Angular components
- blockie
- display blockie for an account id
- bootstrap-component
- global available Ionic bootstrap component
- contract-members
- generalized contract member managment
- evan-verification
- Display a all verifications for a specific topic using the api-blockchain-core verifications service
- dapp-loader
- load DApps within DApps using Angular components
- dapp-wrapper top-bar for DApps that enables
- back navigation
- url routing has as title (dynamic)
- mailbox alerts
- queue status
- dashboard-top-buttons
- dynamic buttons that will be embedded to the dapp-wrapper on large screens or to the bottom right on small screen
- dynamic-component
- creates an dynamic component with a specific template during runtime
- empty-dapp-display
- shows an generalized “Theirs no data.” screen using DApp DBCP descriptions
- evan-loading
- evan-network loading icon
- file-select (under construction)
- file selector for HTML 5 &IOS & Anroid
- global-password
- global password component that is used within each Angular DApp
- will be registered in the root.ts in each evan.network featured DApp
- unlocks the current users profile
- big-picture
- shows an picture within a modal
- mail-dialog
- dialog that will be openend, before a mail is sent
- not-implemented
- not implemented notice
- qr-code-scanner
- scan qr-codes on HTML 5 & IOS & Anroid
- qr-code compnent
- display qr-codes within angular components
- evan-profile-verifications
- Display all for the user configured active verifications for a specific topic
- reload-route
- reloads the current route (only available using dapp-wrapper)
- split-pane
- create easy Dashboards
- generates an left panel using Ionic
- powerfull in combination with DApps that using dapp-wrapper
- take-snapshot
- takes an img using camera on HTML 5 & IOS & Android
- trust-dialog
- asks for permissions (used before inviting an agent)
- blockie
- Angular animation helpers
- ngIf height growing
- ngIf opacity showing
- router transition management (easy to use) (eg.: route1 => route2 : swipe to the left / right / top / bottom)
- tab swiping animation
- Angular 5 Onetime binding directive
- I18N handling using ngx-translate
Installation¶
npm i @evan.network/ui-angular-core
Example¶
Include the AngularCore module into your module and all of the services, components, directives (…) are defined within your project.
- tsconfig.json
{
"compilerOptions": {
"declaration": true,
"module": "es2015",
"target": "es5",
"baseUrl": "./src",
"stripInternal": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"outDir": "../build",
"rootDir": "./src",
"lib": [
"es2015",
"dom"
],
"skipLibCheck": true,
"types": [],
"paths": {
"angular-core": [
"../node_modules/@evan.network/ui-angular-core/dist/angularcore.js"
]
}
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"flatModuleOutFile": "dashboard.js",
"flatModuleId": "dashboard"
},
"files": [
"./index.ts"
]
}
- module.ts
import {
AngularCore,
} from 'angular-core';
@NgModule({
...
imports: [
CommonModule,
AngularCore,
],
...
})
class SampleModule {
constructor() { }
}
Next to the ususal angular stuff, additional functionallities are provided to handle nested ionic angular apps and a dynamic routing. For this have a look at additionals.
Additionals¶
Components¶
- AddressInputComponent
- BigPictureDialog
- BlockieComponent
- BootstrapComponent
- ContractListEntriesComponent
- ContractMembersComponent
- DAppLoaderComponent
- EvanDAppWrapperComponent
- DashboardTopButtons
- EmptyDAppDisplayComponent
- EvanLoadingComponent
- EvanFileSelectComponent
- GlobalPasswordComponent
- ListPagingComponent
- MailDialogComponent
- NotImplementedComponent
- EvanProfileVerificationsComponent
- QrCodeComponent
- QRCodeScannerDialogComponent
- EvanReloadComponent
- EvanSplitPaneComponent
- SnapshotDialogComponent
- EvanTermsOfUseComponent
- TrustDialogComponent
- EvanVerificationComponent