AngularJS v2.x directives for AnyChart
AngularJS v2.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts
with Angular2 Framework.
Table of Contents
Download and install
Package managers
You can install Angular2-plugin using npm, bower or yarn:
npm install anychart-angular2
bower install anychart-angular2
yarn add anychart-angular2
Direct download
You can download compiled Angular2 components directly from the
dist folder.
Please, note: components.js and
components.d.ts files
export basic Anychart-Angular2 integration functionality.
Quick start
Here's a basic sample that shows how to quickly create an Angular2 application with AnyChart component:
<!DOCTYPE html>
<html>
<head>
<title>Angular Quick Start</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/anychart/dist/anychart-bundle.min.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
Run the demo
- Go to any of demos
directory
- Install all dependencies with
npm install
command. - Start the demo with
npm run start
command.
Build
- Despite the AnyChart-Angular2 integration is available with package managers, the license allows to modify and use it freely (though you need AnyChart license to use the library itself in commercial projects). This quick start guide clarifies the structure of integration project and explains how it works and how it can be used.
If the integration is cloned from GitHub and Node Package Manager (npm
command) is available in command line, the following command compiles source code to dist/ directory:
npm run build
-
If needed, package.json
of demo-application can be configured to declare custom run-commands
and to add required dependencies excepting already included.
-
Run npm install
command to load all required npm modules.
-
Configure systemjs.config.js
to declare the mapping of dependencies of
application (see any demo
to see the basic configuration). In 'map'-section AnyChart integration library is declared:
...
'anychart-angular2': 'node_modules/anychart-angular2'
- In 'packages'-section anychart-angular2 library is declared:
'anychart-angular2': {
main: 'index'
}
-
These actions allow to use anychart-angular2 integration in an application
like one described in Quick start.
-
Since 'app' folder is declared in systemjs.config.js
as application root
directory, the application's Angular2 modules and components can be created
right there.
Package directory
├── def
│ ├── anychart.d.ts
│ ...
├── dist
│ ├── anychart.directive.d.ts
│ ├── anychart.directive.js
│ ...
├── src
│ ├── anychart.directive.ts
│ ├── anychart.service.ts
│ ...
│ components.d.ts
│ components.js
│ package.json
│ LICENSE
│ README.md
│ ...
-
def/anychart.d.ts -
Anychart typescript definition file. Used to correctly compile source
code to dist/ directory.
-
dist/ -
Output directory that contains compiled js
and d.ts
files. The general component
declarations (components.js and components.d.ts) rely on this directory
content.
-
src/ -
Source code directory. Contains Angular2-compatible components to provide
AnyChart integration.
-
components.d.ts and components.js -
Components definition. Relies on dist/ directory content.
-
package.json -
Package manager configuration file. Also contains descriptions of
available run commands (including build command) and the list of dependencies.
Demos overview
See these samples to learn how things work:
Contacts
Links
License
AnyChart Angular2 plugin includes two parts:
- code of the plugin that allows to use Javascript library (in this case, AnyChart)
with Angular Framework. You can use, edit, modify it, use it with other Javascript libraries
without any restrictions. It is released under Apache 2.0 License.
- AnyChart JavaScript library. It is released under Commercial license.
You can test this plugin with the trial version of AnyChart. Our trial version is not
limited by time and doesn't contain any feature limitations.
Check details here
If you have any questions regarding licensing - please contact us. sales@anychart.com