Support Angular AOT, fixes #69

Add a static forRoot method to CloudinaryModule to be able to configure Cloudinary service in AOT.
Add sample project to demo usage.

Author: eitanp461

.gitignore

@@ -4,6 +4,10 @@ logs
 npm-debug.log*
 config.ts
 
+# Ignore AOT compiler output
+/compiled
+*.metadata.json
+
 # Ignore output of typescript compilation. They WILL be included in the package since .npmignore is empty
 index.js.map
 index.d.ts

.npmignore

@@ -5,10 +5,12 @@
 !src/**/*.js
 !src/**/*.js.map
 !src/**/*.d.ts
+!src/**/*.metadata.json
 
 !index.js
 !index.js.map
 !index.d.ts
+!index.metadata.json
 
 !package.json
 

README.md

@@ -59,14 +59,12 @@ Example Coudinary configuration in your application's module definition:
 ```javascript
 import { NgModule } from '@angular/core';
 // ...
-import { CloudinaryModule, CloudinaryConfiguration, provideCloudinary } from '@cloudinary/angular';
+import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular';
+import { Cloudinary } from 'cloudinary-core';
 
 @NgModule({
     imports: [
-        CloudinaryModule
-    ],
-    providers: [
-        provideCloudinary(require('cloudinary-core'), { cloud_name: 'your_cloud_name' } as CloudinaryConfiguration)
+        CloudinaryModule.forRoot({Cloudinary}, { cloud_name: 'your_cloud_name' } as CloudinaryConfiguration),
     ],
     bootstrap: [/* ... */]
 })
@@ -169,6 +167,9 @@ The samples differ by their bundling solution and upload implementation:
 * [Photo album sample app with jQuery](samples/photo_album_with_jquery) 
     * Uses [Cloudinary's jQuery plugin](http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud#direct_uploading_from_the_browser_using_jquery) for uploading files using jQuery and blueimp.
     * Uses [SystemJS](https://github.com/systemjs/systemjs) for bundling the application and [lite-server](https://github.com/johnpapa/lite-server) for serving the application. 
+* [Photo Album AOT compilation](samples/photo_album_aot) 
+    * Demonstrates usage of Cloudinary SDK in an [Angular AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) application
+    * Uses [Rollup](http://rollupjs.org/) for bundling the application and [lite-server](https://github.com/johnpapa/lite-server) for serving the application.
 
 Please consult with the respective README file of each sample for usage and additional information.
 

package.json

@@ -29,8 +29,8 @@
     "start-sample:jquery": "npm run install-sample-from-source:jquery && cd samples/photo_album_with_jquery && npm run start:e2e",
     "e2e": "npm run install-sample-from-source && concurrently \"npm run start-sample\" \"protractor protractor.config.js --baseUrl='http://localhost:4000/'\" --kill-others --success first",
     "e2e:jquery": "npm run start-sample:jquery && protractor protractor.config.js --baseUrl='http://localhost:3000/' --kill-others --success first",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w"
+    "ngc": "ngc",
+    "ngc:w": "ngc -w"
   },
   "repository": {
     "type": "git",
@@ -43,17 +43,19 @@
   },
   "homepage": "https://github.com/cloudinary/cloudinary_angular",
   "dependencies": {
-    "@angular/common": "^2.2.4",
-    "@angular/core": "^2.2.4",
+    "@angular/common": "^2.4.3",
+    "@angular/compiler-cli": "^2.2.4",
+    "@angular/core": "^2.4.3",
+    "@angular/platform-server": "^2.4.3",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "^5.0.1",
     "zone.js": "^0.7.2"
   },
   "devDependencies": {
-    "@angular/compiler": "^2.2.4",
-    "@angular/platform-browser": "^2.2.4",
-    "@angular/platform-browser-dynamic": "^2.2.4",
+    "@angular/compiler": "^2.4.3",
+    "@angular/platform-browser": "^2.4.3",
+    "@angular/platform-browser-dynamic": "^2.4.3",
     "@types/jasmine": "^2.5.36",
     "@types/node": "^6.0.46",
     "@types/selenium-webdriver": "^2.53.36",

samples/photo_album/package.json

@@ -5,13 +5,13 @@
   "description": "Sample application using Cloudinary's Angular2 SDK",
   "license": "MIT",
   "dependencies": {
-    "@angular/common": "^2.3.0",
-    "@angular/compiler": "^2.3.0",
-    "@angular/core": "^2.3.0",
+    "@angular/common": "^2.4.3",
+    "@angular/compiler": "^2.4.3",
+    "@angular/core": "^2.4.3",
     "@angular/forms": "^2.3.0",
     "@angular/http": "^2.3.0",
-    "@angular/platform-browser": "^2.3.0",
-    "@angular/platform-browser-dynamic": "^2.3.0",
+    "@angular/platform-browser": "^2.4.3",
+    "@angular/platform-browser-dynamic": "^2.4.3",
     "@angular/router": "^3.2.3",
     "@cloudinary/angular": "^2.0.0",
     "cloudinary-core": "^2.1.9",

samples/photo_album/yarn.lock

@@ -2,17 +2,17 @@
 # yarn lockfile v1
 
 
-"@angular/common@^2.3.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.%3Cspan%20class="x x-first x-last">1.tgz#a70167430574959c3423ac96ebdec98032d3500d"
+"@angular/common@^2.2.4", "@angular/common@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.%3Cspan%20class="x x-first x-last">3.tgz#78d96bd2f8a1a105f635cd25e362ba5704b47f56"
 
-"@angular/compiler@^2.3.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.%3Cspan%20class="x x-first x-last">1.tgz#62b4fbfc53c934bd5def78db594cbf245b3f446a"
+"@angular/compiler@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.%3Cspan%20class="x x-first x-last">3.tgz#76a41916f90eda66643107740c4a9ae45cb7a6c1"
 
-"@angular/core@^2.3.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.%3Cspan%20class="x x-first x-last">1.tgz#3a6d2dc7fd86fdebe4febae7eb28abad7d04c76a"
+"@angular/core@^2.2.4", "@angular/core@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.%3Cspan%20class="x x-first x-last">3.tgz#a72a13bb9f01659b8388558cd6e3a570a8434b1c"
 
 "@angular/forms@^2.3.0":
   version "2.4.1"
@@ -22,18 +22,29 @@
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@angular/http/-/http-2.4.1.tgz#f06067e370c44d025ed00a03ef704f6c46ea59ac"
 
-"@angular/platform-browser-dynamic@^2.3.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.%3Cspan%20class="x x-first x-last">1.tgz#5fb72038f76c1e3646cea95f5b4722d67a4419dd"
+"@angular/platform-browser-dynamic@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.%3Cspan%20class="x x-first x-last">3.tgz#d65cc9bc4487e2a86e2c6f6641c711fccfa90c5a"
 
-"@angular/platform-browser@^2.3.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.%3Cspan%20class="x x-first x-last">1.tgz#4eaa829b450be34f0029796b6c3b99e27d3d5740"
+"@angular/platform-browser@^2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.%3Cspan%20class="x x-first x-last">3.tgz#eba8588d2fffc39d0b85a9180c297d9ca2f1f3a4"
 
 "@angular/router@^3.2.3":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-3.4.1.tgz#079c8580943547a710f292026ac86a08d336a49d"
 
+"@cloudinary/angular@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary/angular/-/angular-2.0.0.tgz#fc4906291abdca8ed1cb9e67042fdf10ce68cf28"
+  dependencies:
+    "@angular/common" "^2.2.4"
+    "@angular/core" "^2.2.4"
+    core-js "^2.4.1"
+    reflect-metadata "^0.1.8"
+    rxjs "^5.0.1"
+    zone.js "^0.7.2"
+
 "@types/[email protected]":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-0.0.1.tgz#d90a4d3bf1fe8f961edf0f76f34a7a6df79580be"

samples/photo_album_aot/.gitignore

@@ -0,0 +1,4 @@
+aot/
+
+*.ngsummary.json
+*.ngstyle.ts

samples/photo_album_aot/README.md

@@ -0,0 +1,48 @@
+Cloudinary Angular photo Album Ahead of Time compilation Sample
+=======================================
+
+This sample project shows:
+
+1. How to use the Cloudinary Angular directives.
+2. How to consume Cloudinary SDK in an Angular AOT setup using rollup
+
+This sample does not show how to upload images directly frmo the browser.
+You can see how this is implemented in other samples in this repository.
+
+## Configuration ##
+
+There are 2 settings you need to change for this demo to work. Copy or rename `app/js/config.ts.sample` to `app/js/config.ts` and edit the following:
+
+1. **cloud_name** - Should be change to the cloud name you received when you registered for a Cloudinary account.
+2. **upload_preset** - You should first "Enable unsigned uploads" in the ["Upload Settings"](https://cloudinary.com/console/settings/upload) of your Cloudinary console and assign the resulting preset name to that field. Note, you may want to tweak and modify the upload preset's parameters.
+3. Additionally, in your Cloudinary console in the ["Security Settings"](https://cloudinary.com/console/settings/security) section you should uncheck the "list" item.
+
+Learn more about [Angular AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)
+
+## Setup ##
+
+Run `npm install` to install the required dependencies for this module.
+
+Alternatively use `yarn install`
+
+## Running ##
+
+Run `npm run clean-aot` to delete AOT compilation artifacts
+Run `npm run ngc` to run Angular's AOT compiler
+Run `npm run rollup` to bundle the application
+Run `npm run lite` to start the server and automatically open a browser and navigate to the application's url.
+
+## Internals ##
+This sample is using [Rollup](http://rollupjs.org/) for bundling the application and [lite-server](https://github.com/johnpapa/lite-server) for serving the application.
+
+[index.html](index.html) loads Rollup's output, which is based on Angular's AOT compiler.
+
+The sample creates a new NgModule, and depends on CloudinaryModule which is imported from the SDK module.
+
+### List Resource ###
+
+Cloudinary supports a JSON list resource. 
+This list represents all resources marked with a specific tag during upload (or later through other APIs).
+Whenever a new resource is uploaded with a tag, or an existing resource already tagged is deleted then the list is recalculated. 
+This enables you to group a list of resources which can be retrieved by a single query. The size of the list is currently limited to 100 entires.
+[Learn more](http://cloudinary.com/documentation/image_transformations#client_side_resource_lists)

samples/photo_album_aot/app/css/.gitkeep

@@ -0,0 +1,97 @@
+/*
+ * animations css stylesheet
+ */
+
+/* animate ngRepeat in photo listing */
+
+.photo-listing.ng-enter,
+.photo-listing.ng-leave,
+.photo-listing.ng-move {
+  -webkit-transition: 0.5s linear all;
+  -moz-transition: 0.5s linear all;
+  -o-transition: 0.5s linear all;
+  transition: 0.5s linear all;
+}
+
+.photo-listing.ng-enter,
+.photo-listing.ng-move {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.photo-listing.ng-move.ng-move-active,
+.photo-listing.ng-enter.ng-enter-active {
+  opacity: 1;
+  height: 120px;
+}
+
+.photo-listing.ng-leave {
+  opacity: 1;
+  overflow: hidden;
+}
+
+.photo-listing.ng-leave.ng-leave-active {
+  opacity: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* cross fading between routes with ngView */
+
+.view-container {
+  position: relative;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+  background: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.view-frame.ng-enter {
+  -webkit-animation: 0.5s fade-in;
+  -moz-animation: 0.5s fade-in;
+  -o-animation: 0.5s fade-in;
+  animation: 0.5s fade-in;
+  z-index: 100;
+}
+
+.view-frame.ng-leave {
+  -webkit-animation: 0.5s fade-out;
+  -moz-animation: 0.5s fade-out;
+  -o-animation: 0.5s fade-out;
+  animation: 0.5s fade-out;
+  z-index: 99;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-webkit-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-moz-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-webkit-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+