inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix readme

Browse Source
This commit is contained in:
Mario Romano
2016-06-22 23:44:56 +01:00
parent 297c6eb572
commit 2d1da9d0ce
7 changed files with 127 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -25,7 +25,7 @@ npm install --save ng2-alfresco-datatable material-design-lite material-design-i
``` ```
```ts ```ts
import { Component } from 'angular2/core'; import { Component } from '@angular/core';
import { import {
ALFRESCO_DATATABLE_DIRECTIVES, ALFRESCO_DATATABLE_DIRECTIVES,
ObjectDataTableAdapter ObjectDataTableAdapter

22
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -24,6 +24,16 @@ Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/bundle.js"></script> <script src="node_modules/alfresco-js-api/bundle.js"></script>
``` ```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-documentlist
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
#### 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 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: design dependency to your project:
@@ -32,7 +42,7 @@ design dependency to your project:
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
``` ```
Also make sure you include the following in your .html page: Also make sure you include these dependencies in your .html page:
```html ```html
<!-- Google Material Design Lite --> <!-- Google Material Design Lite -->
@@ -41,6 +51,7 @@ Also make sure you include the following in your .html page:
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
``` ```
## Basic usage ## Basic usage
```html ```html
@@ -54,16 +65,17 @@ Also make sure you include the following in your .html page:
Example of the component that declares document list and provides values for bindings: Example of the component that declares document list and provides values for bindings:
```ts ```ts
import { Component, OnInit } from 'angular2/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { import {
ALFRESCO_CORE_PROVIDERS, ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService, AlfrescoSettingsService,
AlfrescoAuthenticationService, AlfrescoAuthenticationService,
AlfrescoPipeTranslate, AlfrescoPipeTranslate,
AlfrescoTranslationService AlfrescoTranslationService,
CONTEXT_MENU_DIRECTIVES
} from 'ng2-alfresco-core'; } from 'ng2-alfresco-core';
import { import {

54
ng2-components/ng2-alfresco-login/README.md
View File

@@ -29,48 +29,15 @@ Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/bundle.js"></script> <script src="node_modules/alfresco-js-api/bundle.js"></script>
``` ```
Also make sure you include these dependencies in your .html page: The following component needs to be added to your systemjs.config:
```html - ng2-translate
<!-- Google Material Design Lite --> - ng2-alfresco-core
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> - ng2-alfresco-login
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
Make sure your systemjs.config has the following configuration: Please refer to the following example to have an idea of how your systemjs.config should look like :
```javascript https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'src': 'src'
},
packages: {
'src': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-login': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
```
#### 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 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -80,6 +47,15 @@ design dependency to your project:
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
``` ```
Also make sure you include these dependencies in your .html page:
```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">
```
#### Basic usage #### Basic usage

135
ng2-components/ng2-alfresco-search/README.md
View File

@@ -28,42 +28,25 @@ the related [search results](#search-results) component which performs a query a
#### Dependencies #### Dependencies
Make sure your `systemjs.config` has the following configuration: Add the following dependency to your index.html:
```javascript ```html
System.config({ <script src="node_modules/alfresco-js-api/bundle.js"></script>
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-search',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'app': 'dist/src'
},
packages: {
'app': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-search': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
``` ```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-search
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
#### Style #### Style
The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
the material-design-lite dependency to your project: design dependency to your project:
```sh ```sh
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
@@ -92,20 +75,18 @@ but instead the component could emit an event to be consumed upstream, or it cou
results component embedded inside the same component. results component embedded inside the same component.
```ts ```ts
import { Component, OnInit } from 'angular2/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { import {
ALFRESCO_CORE_PROVIDERS, ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService, AlfrescoSettingsService,
AlfrescoAuthenticationService, AlfrescoAuthenticationService,
AlfrescoTranslationService AlfrescoTranslationService
} from 'ng2-alfresco-core/dist/ng2-alfresco-core'; } from 'ng2-alfresco-core';
import { import {
ALFRESCO_SEARCH_DIRECTIVES ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search/dist/ng2-alfresco-search'; } from 'ng2-alfresco-search';
@Component({ @Component({
selector: 'alfresco-search-demo', selector: 'alfresco-search-demo',
@@ -174,48 +155,25 @@ This component displays the results of a search to the user.
#### Dependencies #### Dependencies
Make sure your `systemjs.config` has the following configuration: Add the following dependency to your index.html:
```javascript
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-search',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'app': 'dist/src'
},
packages: {
'app': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-search': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
```
You must also add the following dependency to your index.html:
```html ```html
<script src="node_modules/alfresco-js-api/bundle.js"></script> <script src="node_modules/alfresco-js-api/bundle.js"></script>
``` ```
The following component needs to be added to your systemjs.config:
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-search
Please refer to the following example to have an idea of how your systemjs.config should look like :
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
#### Style #### Style
The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
the material-design-lite dependency to your project: design dependency to your project:
```sh ```sh
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
@@ -241,21 +199,20 @@ search term. If no ruter is present pon the page of if the router does not provi
results page will be shown. results page will be shown.
```ts ```ts
import { Component, OnInit } from 'angular2/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { import {
ALFRESCO_CORE_PROVIDERS, ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService, AlfrescoSettingsService,
AlfrescoAuthenticationService, AlfrescoAuthenticationService,
AlfrescoTranslationService AlfrescoTranslationService
} from 'ng2-alfresco-core/dist/ng2-alfresco-core'; } from 'ng2-alfresco-core';
import { import {
ALFRESCO_SEARCH_DIRECTIVES ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search/dist/ng2-alfresco-search'; } from 'ng2-alfresco-search';
@Component({ @Component({
selector: 'alfresco-search-demo', selector: 'alfresco-search-demo',
@@ -305,7 +262,6 @@ bootstrap(SearchDemo, [
HTTP_PROVIDERS, HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS ALFRESCO_CORE_PROVIDERS
]); ]);
``` ```
Example of an component that displays search results, taking the search term from a `@Input` property provided by the container. Example of an component that displays search results, taking the search term from a `@Input` property provided by the container.
@@ -313,12 +269,15 @@ Example of an component that displays search results, taking the search term fro
When the input is updated by the application, the search control will run a new search and display the results. When the input is updated by the application, the search control will run a new search and display the results.
```ts ```ts
import { Component, Input } from 'angular2/core'; import { Component } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import {
import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core'; ALFRESCO_CORE_PROVIDERS
import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search'; } from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
@Component({ @Component({
selector: 'alfresco-search-demo', selector: 'alfresco-search-demo',

2
ng2-components/ng2-alfresco-search/demo/src/main.ts
View File

@@ -18,7 +18,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { import {
ALFRESCO_CORE_PROVIDERS, ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService, AlfrescoSettingsService,
@@ -26,7 +25,6 @@ import {
AlfrescoPipeTranslate, AlfrescoPipeTranslate,
AlfrescoTranslationService AlfrescoTranslationService
} from 'ng2-alfresco-core'; } from 'ng2-alfresco-core';
import { import {
ALFRESCO_SEARCH_PROVIDERS, ALFRESCO_SEARCH_PROVIDERS,
ALFRESCO_SEARCH_DIRECTIVES ALFRESCO_SEARCH_DIRECTIVES

81
ng2-components/ng2-alfresco-upload/README.md
View File

@@ -32,47 +32,15 @@ Add the following dependency to your index.html:
<script src="node_modules/alfresco-js-api/bundle.js"></script> <script src="node_modules/alfresco-js-api/bundle.js"></script>
``` ```
Also make sure you include these dependencies in your .html page: The following component needs to be added to your systemjs.config:
```html - ng2-translate
<!-- Google Material Design Lite --> - ng2-alfresco-core
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> - ng2-alfresco-upload
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
```
Make sure your systemjs.config has the following configuration: Please refer to the following example to have an idea of how your systemjs.config should look like :
```javascript https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
'rxjs': 'node_modules/rxjs',
'angular2' : 'node_modules/angular2',
'ng2-translate': 'node_modules/ng2-translate',
'app': 'dist/src'
},
packages: {
'app': {
defaultExtension: 'js'
},
'ng2-alfresco-core': {
defaultExtension: 'js'
},
'ng2-alfresco-upload': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
```
#### 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 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -82,6 +50,15 @@ design dependency to your project:
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
``` ```
Also make sure you include these dependencies in your .html page:
```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">
```
#### Basic usage #### Basic usage
@@ -98,12 +75,14 @@ npm install --save material-design-icons material-design-lite
Example of an App that declares upload button component : Example of an App that declares upload button component :
```ts ```ts
import { Component } from 'angular2/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core'; import {
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload'; ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
@@ -156,12 +135,14 @@ This component, provide a drag and drop are to upload files to alfresco.
Example of an App that declares upload drag and drop component : Example of an App that declares upload drag and drop component :
```ts ```ts
import { Component } from 'angular2/core'; import { Component, OnInit } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from 'angular2/http'; import { HTTP_PROVIDERS } from '@angular/http';
import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core'; import {
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload'; ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',

52
ng2-components/ng2-alfresco-viewer/README.md
View File

@@ -25,42 +25,9 @@ Add the following dependency to your index.html:
<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script> <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
``` ```
Also make sure you include these dependencies in your .html page:
```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">
```
Make sure your systemjs.config has the following configuration: Make sure your systemjs.config has the following configuration:
```javascript https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
System.config({
defaultJSExtensions: true,
map: {
'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
'rxjs': 'node_modules/rxjs',
'angular2': 'node_modules/angular2',
'app': 'dist/main'
},
packages: {
'src': {
defaultExtension: 'js'
},
'ng2-alfresco-viewer': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2': {
defaultExtension: 'js'
}
}
});
```
#### 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 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
@@ -70,6 +37,15 @@ design dependency to your project:
npm install --save material-design-icons material-design-lite npm install --save material-design-icons material-design-lite
``` ```
Also make sure you include these dependencies in your .html page:
```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">
```
#### Basic usage #### Basic usage
```html ```html
@@ -79,13 +55,13 @@ npm install --save material-design-icons material-design-lite
Example of an App that declares the file viewer component : Example of an App that declares the file viewer component :
```ts ```ts
import { Component } from 'angular2/core'; import { Component } from '@angular/core';
import { bootstrap } from 'angular2/platform/browser'; import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer'; import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: ` <alfresco-viewer [overlayMode]="true" [urlFile]="'local_filename.pdf'"> template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'local_filename.pdf'">
<div class="mdl-spinner mdl-js-spinner is-active"></div> <div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-viewer>`, </alfresco-viewer>`,
directives: [VIEWERCOMPONENT] directives: [VIEWERCOMPONENT]