mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
#878 doc and demo webscript component
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
# Alfresco Webscript Component for Angular 2
|
||||
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
@@ -14,56 +15,81 @@
|
||||
<a href='https://www.npmjs.com/package/ng2-alfresco-webscript'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-alfresco-webscript.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### Node
|
||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-alfresco-webscript
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
Components included:
|
||||
1. Npm
|
||||
|
||||
* Alfresco Webscript Component
|
||||
```sh
|
||||
npm install ng2-alfresco-webscript --save
|
||||
```
|
||||
|
||||
#### Dependencies
|
||||
2. Html
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
```html
|
||||
|
||||
The following component needs to be added to your systemjs.config:
|
||||
<!-- Google Material Design Lite -->
|
||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-datatable
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
Please refer to the following example to have an idea of how your systemjs.config should look like :
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
#### Style
|
||||
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your .html page:
|
||||
3. SystemJs
|
||||
|
||||
```html
|
||||
<!-- Google Material Design Lite -->
|
||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
```
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-datatable
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
#### Basic usage
|
||||
|
||||
|
||||
@@ -83,47 +109,57 @@ Example of an App that use Alfresco webscript component :
|
||||
main.ts
|
||||
```ts
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoAuthenticationService
|
||||
} from 'ng2-alfresco-core';
|
||||
|
||||
import { WEBSCRIPTCOMPONENT } from 'ng2-alfresco-webscript';
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { WebScriptModule } from 'ng2-alfresco-webscript';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<alfresco-webscript-get [scriptPath]="scriptPath"
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-webscript-get [scriptPath]="scriptPath"
|
||||
[scriptArgs]="scriptArgs"
|
||||
[contextRoot]="contextRoot"
|
||||
[servicePath]="servicePath"
|
||||
[contentType]="'HTML'">
|
||||
</alfresco-webscript-get>`,
|
||||
directives: [WEBSCRIPTCOMPONENT]
|
||||
</alfresco-webscript-get>
|
||||
`
|
||||
})
|
||||
export class AppComponent {
|
||||
class WebscriptDemo {
|
||||
|
||||
scriptPath: string = 'sample/folder/Company%20Home';
|
||||
|
||||
contextRoot: string = 'alfresco';
|
||||
|
||||
servicePath: string = 'service';
|
||||
|
||||
constructor(public auth: AlfrescoAuthenticationService,
|
||||
alfrescoSettingsService: AlfrescoSettingsService) {
|
||||
alfrescoSettingsService.host = 'http://myalfrescoip';
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = 'http://localhost:8080';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule,
|
||||
WebScriptModule
|
||||
],
|
||||
declarations: [ WebscriptDemo ],
|
||||
bootstrap: [ WebscriptDemo ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
```
|
||||
|
||||
@@ -246,36 +282,37 @@ You can get the plain data from the webscript through the **onSuccess** event pa
|
||||
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
##Build the files and keep watching for changes
|
||||
### Build the files and keep watching for changes
|
||||
|
||||
```sh
|
||||
npm run build:w
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
## Running unit tests in browser
|
||||
### Running unit tests in browser
|
||||
|
||||
```sh
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
|
||||
## Code coverage
|
||||
### Code coverage
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
@@ -291,3 +328,6 @@ npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
Reference in New Issue
Block a user