#878 doc and demo webscript component

ng2-components/ng2-alfresco-tag/README.md

@@ -1,4 +1,5 @@
 # Alfresco Tag 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

ng2-components/ng2-alfresco-webscript/README.md

@@ -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
+## Prerequisites
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
+
+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
+Follow the 3 steps below:
-npm install --save ng2-alfresco-webscript
-```
 
-Components included:
+1. Npm
-
-* Alfresco Webscript Component
-
-#### Dependencies
-
-Add the following dependency to your index.html:
-
-```html
-<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
-```
-
-The following component needs to be added to your systemjs.config: 
-
-- ng2-translate
-- ng2-alfresco-core
-- ng2-alfresco-datatable
-
-Please refer to the following example to have an idea of how your systemjs.config should look like :
-
-https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-webscript/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:
 
     ```sh
-npm install --save material-design-icons material-design-lite
+    npm install ng2-alfresco-webscript --save
     ```
 
-Also make sure you include these dependencies in your .html page:
+2. Html
+
+    Include these dependencies in your index.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">
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
+      <!-- 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>
+
     ```
 
+3. SystemJs
+
+    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,30 +109,24 @@ Example of an App that use Alfresco webscript component :
 main.ts
 ```ts
 
-import { Component } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
-import { HTTP_PROVIDERS } from '@angular/http';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService  } from 'ng2-alfresco-core';
-import {
+import { DataTableModule }  from 'ng2-alfresco-datatable';
-    ALFRESCO_CORE_PROVIDERS,
+import { WebScriptModule } from 'ng2-alfresco-webscript';
-    AlfrescoSettingsService,
-    AlfrescoAuthenticationService
-} from 'ng2-alfresco-core';
-
-import { WEBSCRIPTCOMPONENT } from 'ng2-alfresco-webscript';
 
 @Component({
-    selector: 'my-app',
+    selector: 'alfresco-app-demo',
-    template: `
+    template: `<alfresco-webscript-get [scriptPath]="scriptPath"
-    <alfresco-webscript-get [scriptPath]="scriptPath"
                                [scriptArgs]="scriptArgs"
                                [contextRoot]="contextRoot"
                                [servicePath]="servicePath" 
                                [contentType]="'HTML'">
-    </alfresco-webscript-get>`,
+    </alfresco-webscript-get>
-    directives: [WEBSCRIPTCOMPONENT]
+    `
 })
-export class AppComponent {
+class WebscriptDemo {
 
     scriptPath: string = 'sample/folder/Company%20Home';
 
@@ -114,16 +134,32 @@ export class AppComponent {
 
     servicePath: string = 'service';
 
-    constructor(public auth: AlfrescoAuthenticationService,
+    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
-                alfrescoSettingsService: AlfrescoSettingsService) {
+        settingsService.ecmHost = 'http://localhost:8080';
-        alfrescoSettingsService.host = 'http://myalfrescoip';
+
+        this.authService.login('admin', 'admin').subscribe(
+            ticket => {
+                console.log(ticket);
+            },
+            error => {
+                console.log(error);
+            });
     }
 }
 
-bootstrap(AppComponent, [
+@NgModule({
-    HTTP_PROVIDERS,
+    imports: [
-    ALFRESCO_CORE_PROVIDERS
+        BrowserModule,
-]);
+        CoreModule.forRoot(),
+        DataTableModule,
+        WebScriptModule
+    ],
+    declarations: [ WebscriptDemo ],
+    bootstrap:    [ WebscriptDemo ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
 
 ```
 
@@ -246,6 +282,7 @@ 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:
 
 
@@ -254,10 +291,10 @@ 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
@@ -266,7 +303,7 @@ npm run build:w
 npm test
 ```
 
-## Running unit tests in browser
+### Running unit tests in browser
 
 ```sh
 npm test-browser
@@ -275,7 +312,7 @@ npm test-browser
 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)

ng2-components/ng2-alfresco-webscript/demo/package.json

@@ -17,28 +17,6 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "material-design-icons": "2.2.3",
-    "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-alfresco-core": "^0.3.0",
-    "ng2-alfresco-datatable": "^0.3.0",
     "ng2-alfresco-webscript": "^0.3.0"
   },
   "devDependencies": {

ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js

@@ -26,17 +26,8 @@
             'ng2-translate': 'npm:ng2-translate',
             'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
             'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
-            'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
-            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
-            'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
-            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
             'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
-            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
+            'alfresco-js-api': 'npm:alfresco-js-api/dist'
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist'
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
@@ -48,19 +39,9 @@
                 defaultExtension: 'js'
             },
             'ng2-translate': { defaultExtension: 'js' },
-
             'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
             'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
             'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
         }
     });

ng2-components/ng2-alfresco-webscript/package.json

@@ -31,24 +31,6 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-translate": "2.5.0",
     "ng2-alfresco-core": "0.3.2",
     "ng2-alfresco-datatable": "0.3.2"
   },