{"id":21458,"date":"2017-01-18T14:04:05","date_gmt":"2017-01-18T14:04:05","guid":{"rendered":"http:\/\/new_angular_sdk_for_image_management_more_than_meets_the_eye"},"modified":"2024-06-05T16:19:18","modified_gmt":"2024-06-05T23:19:18","slug":"new_angular_sdk_for_image_management_more_than_meets_the_eye","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/new_angular_sdk_for_image_management_more_than_meets_the_eye","title":{"rendered":"New Angular SDK for image management – More than meets the eye"},"content":{"rendered":"

The night was moist<\/a>. Angular2 had just been released and developers all over the world were asking for an integrated image management solution.<\/p>\n

Cloudinary heeded the call and is proud to present the new Angular2 SDK, providing directives for displaying and transforming images and video with an API.<\/p>\n

Wait, what\u2019s Cloudinary?<\/h2>\n

Cloudinary is an end-to-end image and video management solution for your website and mobile apps. Cloudinary covers everything from media uploads and storage to transformations, optimizations, and delivery.<\/p>\n

You can easily upload images and video to the cloud and automatically perform smart transformations without installing any complex software. You can also integrate a Facebook or Twitter profile image in a snap, in any dimension and style to match your website\u2019s graphics requirements. All your media files are seamlessly delivered through a fast CDN, optimized and using industry best practices.<\/p>\n

For more information visit our Features Page<\/a>.<\/p>\n

Why do I need an SDK?<\/h2>\n

Cloudinary provides RESTful APIs that can be easily integrated with any Web development framework, but the new Angular SDK makes it easier to consume Cloudinary\u2019s service in your Angular2 app.<\/p>\n

Let\u2019s see how this is done by transforming Angular\u2019s logo:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\"Angular<\/a><\/p>\n

(Angular logo<\/a> is released under CC BY 4.0<\/a>)<\/em><\/p>\n

The above image was generated by overlaying the Angular logo onto itself, cropping the overlay and pixelating its top, then cropping the result to be 180px wide.<\/p>\n

The same transformation can be achieved in your Angular2 app using the following directives:<\/p>\n

\t<cl-image<\/span> secure<\/span>=\"true\"<\/span> public-id<\/span>=\"angular_logo\"<\/span> width<\/span>=\"180\"<\/span> crop<\/span>=\"fit\"<\/span>><\/span>\n\t\t<cl-transformation<\/span> overlay<\/span>=\"angular_logo\"<\/span> width<\/span>=\"1.0\"<\/span> height<\/span>=\"0.5\"<\/span> crop<\/span>=\"crop\"<\/span> effect<\/span>=\"pixelate:8\"<\/span> gravity<\/span>=\"north\"<\/span>><\/span><\/cl-transformation<\/span>><\/span>\n\t\t<cl-transformation<\/span> flags<\/span>=\"layer_apply\"<\/span> gravity<\/span>=\"north\"<\/span>><\/span><\/cl-transformation<\/span>><\/span>\n\t<\/cl-image<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The same applies to videos:<\/p>\n
\n      \n\n\n\n    <\/video><\/p>\n
The link to this video is<\/p>\n
https:\/\/res.cloudinary.com\/cloudinary\/video\/upload\/g_north,l_text:arial_30:Cloudinary%20features,y_8,co_red\/w_1000\/manipulation_video.mp4<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This can be achieved using the Angular SDK with the following directives:<\/p>\n
<cl-video<\/span> public-id<\/span>=\"manipulation_video\"<\/span>\ncloud-name<\/span>=\"cloudinary\"<\/span> controls<\/span>=\"true\"<\/span> \npreload<\/span>=\"none\"<\/span> autoplay<\/span>=\"true\"<\/span>\nwidth<\/span>=\"1000\"<\/span> secure<\/span>=\"true\"<\/span>\nclass<\/span>=\"manipulation-video\"<\/span>><\/span>\n   <cl-transformation<\/span> overlay<\/span>=\"text:arial_30:Cloudinary%20features\"<\/span> \n        color<\/span>=\"red\"<\/span> gravity<\/span>=\"north\"<\/span> y<\/span>=\"8\"<\/span>><\/span>\n   <\/cl-transformation<\/span>><\/span>\n<\/cl-video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
How do I start using the SDK?<\/h2>\n
Cloudinary module configuration<\/h3>\n
The SDK is based on Cloudinary\u2019s Javascript module<\/a>, however the two are decoupled.\nThe Cloudinary<\/code> module is a configurable service to which you provide your choice of our JS module.<\/p>\n
See below for an example Cloudinary configuration in the application module definition:<\/p>\n
import<\/span> { NgModule } from<\/span> '@angular\/core'<\/span>;\n...\nimport { CloudinaryModule, CloudinaryConfiguration, provideCloudinary } from<\/span> '@cloudinary\/angular'<\/span>;\n\n@NgModule({\n    imports<\/span>: [\n        CloudinaryModule\n    ],\n    providers<\/span>: [\n        provideCloudinary(require<\/span>('cloudinary-core'<\/span>), { cloud_name<\/span>: 'your_cloud_name'<\/span> } as<\/span> CloudinaryConfiguration)\n    ],\n    bootstrap<\/span>: [...]\n})\nexport<\/span> class<\/span> AppModule<\/span> <\/span>{ }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
import<\/span> { NgModule } from<\/span> '@angular\/core'<\/span>;\n...\nimport { CloudinaryModule } from<\/span> '@cloudinary\/angular'<\/span>;\nimport<\/span> { Cloudinary } from<\/span> 'cloudinary-core\/cloudinary-core-shrinkwrap'<\/span>;\n\nconst<\/span> cloudinaryLib = {\n  Cloudinary<\/span>: Cloudinary\n}\n\n@NgModule({\n    imports<\/span>: [\n    CloudinaryModule.forRoot(cloudinaryLib, {\n      cloud_name<\/span>: 'your_cloud_name'<\/span>\n    })\n    ],\n    bootstrap<\/span>: [...]\n})\nexport<\/span> class<\/span> AppModule<\/span> <\/span>{ }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Cloudinary directives<\/h3>\n
The Cloudinary<\/code> module provides a component and several directives for:<\/p>\n
If you are using Angular AOT<\/a> you need to configure Cloudinary a bit differently:<\/p>\n
Installation<\/h3>\n
The SDK can be installed via Node Package Manager by executing the following command in your application\u2019s root folder<\/p>\n
npm install @cloudinary\/angular --save<\/code><\/p>\n
Or if you\u2019re using yarn<\/a>:<\/p>\n
yarn add @cloudinary\/angular<\/code><\/p>\n
Additional transformation examples can be found in the jQuery image manipulation guide<\/a> and the complete image transformation reference<\/a><\/p>\n