> ## Documentation Index > Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt > Use this file to discover all available pages before exploring further. # Angular SDK (Legacy) > **INFO**: > > This is the **legacy** version of the Angular SDK (`cloudinary_angular` v1.x). > For details on migrating to the [current version](angular_integration) of the SDK (`frontend-frameworks` v1.x + `js-url-gen` v1.x), see the [Angular SDK migration guide](angular1_migration_guide). ## Overview Cloudinary's Angular SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Angular application. You might also want to know... * If you're brand new to Cloudinary, you may want to start with the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to Cloudinary features. * You may also find our [Glossary](cloudinary_glossary) helpful to understand Cloudinary-specific terminology. * Keep in mind that this guide focuses on how to set up and implement popular Cloudinary capabilities using the Angular SDK, but it doesn't cover every feature or option. The complete documentation for all Cloudinary features including sample code for each SDK can be found in our [Guides](programmable_media_guides) and [References](cloudinary_references). > **READING**: :no-title **This guide relates to the latest released version of the [cloudinary_angular v1.x](https://github.com/cloudinary/cloudinary_angular) library.** For details on all new features and fixes from previous versions, see the [CHANGELOG](https://github.com/cloudinary/cloudinary_angular/blob/master/CHANGELOG.md). If you haven't already started integrating this SDK, you may want to try the [JavaScript js-url-gen](javascript_integration) library together with the new [Angular frontend-frameworks library](angular_integration). ## Supported versions Cloudinary's Angular support includes separate libraries for integration with **AngularJS** (also known as Angular 1.x) and with **Angular** versions 2.x and later (supported versions: 2.x-13.x). ## Quick example Take a look at the following transformation code and the image it delivers: ![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_url: false, frameworks:angular") ```angular ``` This relatively simple code performs all of the following on the original front_face.jpg image before delivering it: * **Crop** to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop * **Round the corners** with a 20 pixel radius * Apply a **sepia effect** * **Overlay the Cloudinary logo** on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%) * **Rotate** the resulting image (including the overlay) by 10 degrees * **Convert** and deliver the image in PNG format (the originally uploaded image was a JPG) And here's the URL that would be included in the image tag that's automatically generated from the above code: ![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_code:false, with_image:false") In a similar way, you can [transform a video](angular1_video_manipulation#video_transformation_examples). > **Learn more about transformations**: > > * See all possible transformations in the [Transformation URL API reference](transformation_reference). > * See more examples of [image](angular1_image_manipulation) and [video](angular1_video_manipulation) transformations using the `cloudinary_angular v1.x` library. ## Angular SDK features * [Image transformations](angular1_image_manipulation#deliver_and_transform_images) * [Video transformations](angular1_video_manipulation) (not supported for Angular JS) * [Transforming resources](angular1_image_manipulation#update_assets_dynamically) dynamically (transformations on events) * Direct image and video [upload](angular1_image_and_video_upload) (using the Upload widget or tools such as ng2-file-upload or JQuery-file-upload with Blueimp) ## SDK installation and setup This section includes installation and setup instructions for: * [AngularJS (version 1)](#angularjs_version_1) * [Angular (version 2 and later)](#angular_2_x_and_later) ### AngularJS (version 1.x) The Cloudinary Angular SDK serves as a layer on top of Cloudinary's JavaScript (`cloudinary-core`) library. Angular 1.x support is provided through the bower package manager: #### 1. Install the AngularJS SDK ``` bower install cloudinary_ng#1.x --save ``` This command installs AngularJS (if not already installed), the Cloudinary [JavaScript SDK](javascript1_integration#overview) - `cloudinary-core` (legacy SDK), and the Cloudinary AngularJS 1.x SDK. The optional `--save` parameter saves the dependency in your `bower.json` file. #### 2. Set Cloudinary configuration parameters To use the Cloudinary AngularJS library, you have to configure at least your `cloud_name`. You can additionally define a number of optional [configuration parameters](cloudinary_sdks#configuration_parameters) if relevant. Most functionality implemented on the client side doesn't require authentication, so only your `cloud_name` is _required_ to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use [signed uploads](upload_images#authenticated_requests) or [generate delivery signatures](delivery_url_signatures), you'll also need server-side code, for which you can use one of our [backend SDKs](cloudinary_sdks#cloudinary_sdks). For example: ```angular yourApp.config(['cloudinaryProvider', function (cloudinaryProvider) { cloudinaryProvider .set("cloud_name", "mycompany") .set("secure", true) .set("upload_preset", "my_preset"); }]); ``` ### Angular 2.x and later #### 1. Install the JavaScript SDK and the Angular SDK for the relevant Angular version The Cloudinary Angular SDKs serve as a layer on top of Cloudinary's JavaScript `cloudinary-core` (legacy) library. Install the Cloudinary [JavaScript library](javascript1_integration#overview) and the relevant version of the Angular SDK in the format: ``` npm install cloudinary-core @cloudinary/angular- ``` **_\_**: Install the Cloudinary Angular SDK package that supports the Angular version you are using: * For Angular 2, use `2.x` * For Angular 4, use `4.x` * For Angular 5-13, use `5.x`. For example: ``` npm install cloudinary-core @cloudinary/angular-5.x ``` > **NOTES**: > > * If you install `@cloudinary/angular` with no version specified, the support for Angular 2.x is installed. > * In most cases, it is recommended to use the [Cloudinary Upload Widget](upload_widget) or an upload tool such as `ng2-file-upload` or `ng-file-upload` to upload your assets and to install only the `cloudinary-core` JavaScript library. > * If you decide to use the jQuery-file-upload with blueimp for uploading your assets, you can install the `cloudinary-jquery-file-upload` package instead. For details, see [Angular image and video upload](angular1_image_and_video_upload) #### 2. Configure your bundler to work with the Cloudinary Angular SDK For some bundlers, you need to edit certain files to integrate with the Cloudinary Angular (2.x or later) library. ##### For SystemJS: In your `systemjs.config.js` file, add the cloudinary configuration to the `map` and `packages` sections. In the `map` section, make sure to specify the correct version for the Angular version you are using. In the example below, angular-5.x is specified. ```angular System.config({ ... map: { // Cloudinary lib '@cloudinary/angular': 'npm:@cloudinary/angular-5.x', 'cloudinary-core': 'npm:cloudinary-core', }, packages: { ... "@cloudinary/angular": { main: 'index.js', defaultExtension: 'js' }, "cloudinary-core": { main: 'cloudinary-jquery-file-upload.js', defaultExtension: 'js' } } }); ``` ##### For Rollup: In `rollup-config.js`, under the `plugins` field, add: ```angular export default { ... plugins: [ nodeResolve({jsnext: true, module: true}), commonjs({ include: [ ... 'node_modules/@cloudinary/angular/**', 'node_modules/cloudinary-core/**', ], namedExports: { 'cloudinary-core/cloudinary-core-shrinkwrap': [ 'Cloudinary' ], '@cloudinary/angular': [ 'CloudinaryModule', 'Cloudinary' ], } }), ] } ``` #### 3. In app.module.ts, import Cloudinary Add the relevant Cloudinary imports and specify your `cloud_name` and any other required [configuration parameters](#config_params). Make sure to specify the correct version for the Angular version you are using. In the example below, angular-5.x is specified. ```angular import { CloudinaryModule } from '@cloudinary/angular-5.x'; import * as Cloudinary from 'cloudinary-core'; ``` And ```angular imports: [ .... .... CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'mycloudname'}), ], ``` ##### Set Cloudinary configuration parameters In the imports or providers section of your `app.module.ts` (as relevant for your bundler), you must configure at least your `cloud_name`. You can additionally define a number of optional [configuration parameters](cloudinary_sdks#configuration_parameters) if relevant. You can find your **Cloud name** in the [Dashboard](https://console.cloudinary.com/app/home/dashboard) of the Cloudinary Console, and you can find all of your credentials, including **API Key** and **API Secret**, on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings. > **NOTES**: > > * Most functionality implemented on the client side doesn't require authentication, so only your `cloud_name` is _required_ to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use [signed uploads](upload_images#authenticated_requests) or [generate delivery signatures](delivery_url_signatures), you'll also need server-side code, for which you can use one of our [backend SDKs](cloudinary_sdks#cloudinary_sdks).* For backward compatibility reasons, the default value of the optional `secure` configuration parameter is `false`. However, for most modern applications, it's recommended to configure the `secure` parameter to `true` to ensure that your transformation URLs are always generated as HTTPS. For example: ```angular CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'mycompany', secure: true, upload_preset: 'mypreset', private_cdn: true, cname: 'mycompany.images.com' }), ``` ## Using core Cloudinary JavaScript features The [JavaScript cloudinary-core](javascript1_integration) (legacy) library is the foundation library underlying this version of Cloudinary's Angular SDK. You can access any of the core JavaScript functionality within your Angular code after importing the core library. For example: ```angular import { Component } from '@angular/core'; import { Cloudinary } from '@cloudinary/angular-5.x'; export class AppComponent { constructor(private cloudinary: Cloudinary) { // console.log(cloudinary.cloudinaryInstance.image('dog')); } } ``` ## Sample projects The Angular SDKs provide a set of sample projects that can help you get started with your own. ### Samples for AngularJS (version 1) |Project| Notes | |---|---| [Photo Album](https://github.com/cloudinary/cloudinary_angular/tree/angular-1.x/samples/photo_album) |Uses `ng-file-upload` to upload files [Photo Album with jQuery](https://github.com/cloudinary/cloudinary_angular/tree/angular-1.x/samples/photo_album_with_jquery)|Uses the Cloudinary `jquery-file-upload` to upload files ### Samples for Angular (version 2 or later) The following samples link to the master branch of the sample apps. Parallel examples are available for all earlier supported versions of Angular as well. |Project | Bundler used | Notes | |---|---|---| |[Angular CLI sample](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/angular-cli-sample)|CLI| | |[Angular Universal sample](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/angular-universal-sample)|Webpack| A minimal Angular starter for Universal JavaScript using TypeScript and Webpack. Utilizes packages from the Angular Universal repository to enable lazy loading. |[Photo album sample app](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/photo_album)| Webpack | Uses **ng2-file-upload** for uploading files | |[Photo album sample app with jQuery](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/photo_album_with_jquery)| SystemJS | Uses Cloudinary's **jQuery plugin** for uploading files using jQuery and blueimp. | > **READING**: > > * [Angular image and video upload](angular1_image_and_video_upload) > * [Angular image transformation](angular1_image_manipulation) > * [Angular video transformation](angular1_video_manipulation)