inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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
import { Component } from 'angular2/core';
import { Component } from '@angular/core';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
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>
```
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
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:
@@ -32,7 +42,7 @@ design dependency to your project:
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
<!-- 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">
```
## Basic usage
```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:
```ts
import { Component, OnInit } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoPipeTranslate,
AlfrescoTranslationService
AlfrescoTranslationService,
CONTEXT_MENU_DIRECTIVES
} from 'ng2-alfresco-core';
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>
```
Also make sure you include these dependencies in your .html page:
The following component needs to be added to your systemjs.config:
```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">
```
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-login
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
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'
}
}
});
```
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
#### 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
@@ -80,6 +47,15 @@ design dependency to your project:
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

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
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'
}
}
});
```html
<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
The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add
the material-design-lite dependency to your project:
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:
```sh
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.
```ts
import { Component, OnInit } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search/dist/ng2-alfresco-search';
} from 'ng2-alfresco-search';
@Component({
selector: 'alfresco-search-demo',
@@ -174,48 +155,25 @@ This component displays the results of a search to the user.
#### Dependencies
Make sure your `systemjs.config` has the following configuration:
```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:
Add the following dependency to your index.html:
```html
<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
The style of this component is based on Google Material Design, so if you want to visualize it correctly you have to add
the material-design-lite dependency to your project:
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:
```sh
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.
```ts
import { Component, OnInit } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoTranslationService
} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search/dist/ng2-alfresco-search';
} from 'ng2-alfresco-search';
@Component({
selector: 'alfresco-search-demo',
@@ -305,7 +262,6 @@ bootstrap(SearchDemo, [
HTTP_PROVIDERS,
ALFRESCO_CORE_PROVIDERS
]);
```
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.
```ts
import { Component, Input } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search/dist/ng2-alfresco-search';
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_DIRECTIVES
} from 'ng2-alfresco-search';
@Component({
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 { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService,
@@ -26,7 +25,6 @@ import {
AlfrescoPipeTranslate,
AlfrescoTranslationService
} from 'ng2-alfresco-core';
import {
ALFRESCO_SEARCH_PROVIDERS,
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>
```
Also make sure you include these dependencies in your .html page:
The following component needs to be added to your systemjs.config:
```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">
```
- ng2-translate
- ng2-alfresco-core
- ng2-alfresco-upload
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
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'
}
}
});
```
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
#### 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
@@ -82,6 +50,15 @@ design dependency to your project:
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
@@ -98,12 +75,14 @@ npm install --save material-design-icons material-design-lite
Example of an App that declares upload button component :
```ts
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { AlfrescoSettingsService , ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({
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 :
```ts
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import { AlfrescoSettingsService, ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
import { Component, OnInit } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {
ALFRESCO_CORE_PROVIDERS,
AlfrescoSettingsService
} from 'ng2-alfresco-core';
import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
@Component({
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>
```
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:
```javascript
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'
}
}
});
```
https://github.com/Alfresco/dev-platform-webcomponents/blob/master/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
#### 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
@@ -70,6 +37,15 @@ design dependency to your project:
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
```html
@@ -79,13 +55,13 @@ npm install --save material-design-icons material-design-lite
Example of an App that declares the file viewer component :
```ts
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer/dist/ng2-alfresco-viewer';
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
@Component({
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>
</alfresco-viewer>`,
directives: [VIEWERCOMPONENT]