cleanup angular versions (#2745)

This commit is contained in:
Denys Vuika 2017-11-28 16:25:32 +00:00 committed by Eugenio Romano
parent 634e65af96
commit 9c734e472d
9 changed files with 28 additions and 30 deletions

View File

@ -1,35 +1,33 @@
# Browser Support
Browser support and polyfills guide.
Browser compatibility and support depends on targeted browsers and 3rd party libraries. ADF is based on the following libraries and components:
- Angular 2 (all ADF components)
- Material Design Lite (all ADF components)
- Angular (all ADF components)
- Moment.js (many ADF components)
- PDF.js (`ng2-alfresco-viewer` component)
- Raphael.js (`ng2-alfresco-diagrams`, `ng2-alfresco-analytics`)
- Chart.js (`ng2-alfresco-analytics`)
- Material Design - Date and Time Picker (`ng2-activiti-form`, `ng2-alfresco-analytics`)
## Browser polyfills
### Angular 2
Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular 2 browser support.
### Angular
Please refer to the [official guide](https://angular.io/docs/ts/latest/guide/browser-support.html) for Angular browser support.
ADF (demo shell) imports by default the following set of recommended polyfills:
- [core-js](https://www.npmjs.com/package/core-js) (ES6 standard support)
### 3rd party libraries
Please refer to the following list of [popular polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) for HTML5 cross-browser compatibility.
ADF (demo shell) imports by default the following set of recommended polyfills:
- [intl](https://www.npmjs.com/package/intl), Polyfill the ECMA-402 Intl API (except collation), **IE**/**Safari**
- [dom4](https://github.com/WebReflection/dom4), A fully tested and covered polyfill for new DOM Level 4 entries, **IE**
- [element.scrollintoviewifneeded-polyfill](https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill), simple JavaScript implementation of the non-standard WebKit method scrollIntoViewIfNeeded that can be called on DOM elements, **IE**/**Firefox**/**Safari**, required only to support **Material Design - Date and Time Picker** component
- [pdfjs compatibility](https://www.npmjs.com/package/pdfjs-dist), Portable Document Format (PDF) library that is built with HTML5, **IE**
- (dialog-polyfill)[https://www.npmjs.com/package/dialog-polyfill], Polyfill for the dialog element, **IE**/**Safari**/**Firefox**
## Example

View File

@ -1,6 +1,6 @@
# Introduction to the Alfresco Application Development Framework
The Alfresco application development framework is based on the [Angular 2 JavaScript library](https://angular.io/).
The Alfresco application development framework is based on the [Angular framework](https://angular.io/).
The framework is provided by Alfresco to make it easy to build custom web applications that
should manage and view content in the [Alfresco Platform Repository](http://docs.alfresco.com/5.1/concepts/content-repo-about.html) in a custom way.

View File

@ -1,6 +1,6 @@
# Prerequisites for building and running apps with the Alfresco Application Development Framework
The [Angular 2](https://angular.io/) based application development framework requires the following:
The [Angular](https://angular.io/) based application development framework requires the following:
- An Alfresco Platform Repository (version [201609 Early Access](https://community.alfresco.com/docs/DOC-6372-alfresco-community-edition-file-list-201609-ea) or newer)
- [Download and install the process service](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)

View File

@ -43,7 +43,7 @@ You will find examples of basic interaction for both BPM and ECM sets of widgets
## Yeoman generators
To speed up the development of your Alfresco Angular 2 application, or Alfresco Angular 2 component, use one of the Yeoman generators.
To speed up the development of your Alfresco Angular application, or Alfresco Angular component, use one of the Yeoman generators.
These generators will create a full working project with all the right libraries and tools.
@ -53,16 +53,16 @@ These generators will create a full working project with all the right libraries
### Generate an Alfresco web component starter project
To generate your Alfresco Angular 2 component you can use the following Yeoman generator:
To generate your Alfresco Angular component you can use the following Yeoman generator:
- [Yeoman Generator Angular 2 Alfresco component](https://github.com/Alfresco/generator-ng2-alfresco-component)
- [Yeoman Generator Angular Alfresco component](https://github.com/Alfresco/generator-ng2-alfresco-component)
### Generate an Alfresco web application starter project
To generate your Alfresco Angular 2 application you can use the following Yeoman generator:
To generate your Alfresco Angular application you can use the following Yeoman generator:
- [Yeoman Generator Angular 2 Alfresco application](https://github.com/Alfresco/generator-ng2-alfresco-app)
- [Yeoman Generator Angular Alfresco application](https://github.com/Alfresco/generator-ng2-alfresco-app)
## Amazon AWS Elastic Beanstalk fast deploy

View File

@ -17,7 +17,7 @@ to the appropriate source file.
<!-- guide start -->
- [Form Extensibility and Customisation](extensibility.md)
- [Form Stencils with Angular 2](stencils.md)
- [Form Stencils](stencils.md)
- [Angular Material Design](angular-material-design.md)
- [Theming](theming.md)
- [Typography](typography.md)

View File

@ -162,7 +162,7 @@ At runtime it should look similar to the following:
## Replacing custom stencils with custom components
This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular 2 components.
This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular components.
### Creating custom stencil
@ -192,7 +192,7 @@ If you load previously created task into ADF `<activiti-form>` component you wil
![adf stencil](docassets/images/adf-stencil-01.png)
Let's create an Angular 2 component to render missing content:
Let's create an Angular component to render missing content:
```ts
import { Component } from '@angular/core';
@ -250,6 +250,6 @@ export class MyView {
}
```
At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
At runtime you should now see your custom Angular component rendered in place of the stencils:
![adf stencil runtime](docassets/images/adf-stencil-02.png)

View File

@ -14,7 +14,7 @@ Shows a notification message with optional feedback.
## Details
The Notification Service is implemented on top of the Angular 2 Material Design snackbar.
The Notification Service is implemented on top of the Angular Material Design snackbar.
Use this service to show a notification message, and optionally get feedback from it.
```ts

View File

@ -1,4 +1,4 @@
# Form Stencils with Angular 2
# Form Stencils
Form component provides basic support for custom stencils created with Activiti stencil editor.
@ -22,8 +22,8 @@ Where `<activiti-app-root>` should be replaced with a valid url pointing to your
provides all stencil controllers stored within Activiti
- `runtime.ng1.js`
provides a compatibility layer for controllers created with Angular 1
(this is to avoid runtime errors when loading Angular 1 code into `<activiti-form>` component)
provides a compatibility layer for controllers created with AngularJS (aka Angular 1x)
(this is to avoid runtime errors when loading AngularJS code into `<activiti-form>` component)
- `runtime.adf.js`
provides API for stencil management and registration,
@ -38,11 +38,11 @@ This value will be used as field type when form gets rendered.
## Form runtime template
This should be a valid Angular 2 component template that you want to render in `<activiti-form>` component:
This should be a valid Angular component template that you want to render in `<activiti-form>` component:
```html
<div>
<div>Angular2 Component</div>
<div>Angular Component</div>
<div>Created by: {{name}}</div>
</div>
```
@ -54,14 +54,14 @@ This can be any html layout to be rendered as a component placeholder in Activit
```html
<div>
<div style="color: blue">
Angular2 Component 01
Angular Component 01
</div>
</div>
```
## Custom component controller
This field should contain JavaScript code for Angular 2 component class.
This field should contain JavaScript code for Angular component class.
_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
@ -137,8 +137,8 @@ if (adf) {
When rendered on the form this stencil item should look like the following:
```html
Angular2 Component
Angular Component
Created by: Denys
```
ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.
ADF Form component will automatically assemble and compile a valid Angular component on the fly.

View File

@ -1,6 +1,6 @@
[
{ "title": "Form Extensibility and Customisation", "file": "extensibility.md" },
{ "title": "Form Stencils with Angular 2", "file": "stencils.md" },
{ "title": "Form Stencils", "file": "stencils.md" },
{ "title": "Angular Material Design", "file": "angular-material-design.md" },
{ "title": "Theming", "file": "theming.md" },
{ "title": "Typography", "file": "typography.md" },