├── .gitignore
├── README.md
├── angular-mailchimp.js
└── bower.json


/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | bower_components/
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Installation
  2 | 
  3 | Install with `bower`:
  4 | 
  5 | ```shell
  6 | bower install angular-mailchimp
  7 | ```
  8 | 
  9 | Add a `<script>` to your `index.html`:
 10 | 
 11 | ```html
 12 | <script src="/bower_components/angular-resource/angular-resource.min.js"></script>
 13 | <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
 14 | <script src="/bower_components/angular-mailchimp/angular-mailchimp.js"></script>
 15 | ```
 16 | 
 17 | And add `mailchimp` as a dependency for your app:
 18 | 
 19 | ```javascript
 20 | angular.module('myApp', ['mailchimp']);
 21 | ```
 22 | 
 23 | # Justification of Method
 24 | 
 25 | Instead of relying on a resource or a service, I chose to make this module as reusable as possible. This means that all configuration is done in the [HTML shown below](https://github.com/keithio/angular-mailchimp#usage). So, you can have one page with as many subscription forms as you'd like as long as you [configure](https://github.com/keithio/angular-mailchimp#configuration) everything properly.
 26 | 
 27 | # Configuration
 28 | 
 29 | 1. Log into your Mailchimp Account
 30 | 2. Click on "Lists" from the sidebar
 31 | 3. Click on the list for which you want
 32 | 4. Click "Signup forms"
 33 | 5. Select "Embedded forms"
 34 | 6. Select "Naked"
 35 | 
 36 | You must obtain the following information from the form action attribute code:
 37 | 
 38 | * `mailchimp.username` - Your MailChimp username, immediately follows `http://`
 39 | * `mailchimp.dc` - Your MailChimp distribution center, immediately follows your username
 40 | * `mailchimp.u` - Unique string that identifies your account. It is obtained from 
 41 | * `mailchimp.id` - A unique string that identifies your list.
 42 | 
 43 | Example::
 44 | 
 45 |     <form action="http://username.us1.list-manage.com/subscribe/post?u=a1b2c3d4e5f6g7h8i9j0&amp;id=aabb12" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
 46 | 
 47 | Result:
 48 | 
 49 | * `mailchimp.username = 'username'`
 50 | * `mailchimp.dc = 'us1'`
 51 | * `mailchimp.u = 'a1b2c3d4e5f6g7h8i9j0'`
 52 | * `mailchimp.id = 'aabb12'`
 53 | 
 54 | # Usage
 55 | 
 56 | The results from the last step will be populated in your form via `ng-init`.
 57 | 
 58 | So, add a `<form>` to your template as follows and replace the values with
 59 | those you obtained:
 60 | 
 61 | ```html
 62 | <form name="MailchimpSubscriptionForm" ng-controller="MailchimpSubscriptionCtrl">
 63 |   <div ng-hide="mailchimp.result === 'success'">
 64 |     <input class="hidden" type="hidden" ng-model="mailchimp.username" ng-init="mailchimp.username='username'">
 65 |     <input class="hidden" type="hidden" ng-model="mailchimp.dc" ng-init="mailchimp.dc='us1'">
 66 |     <input class="hidden" type="hidden" ng-model="mailchimp.u" ng-init="mailchimp.u='a1b2c3d4e5f6g7h8i9j0'">
 67 |     <input class="hidden" type="hidden" ng-model="mailchimp.id" ng-init="mailchimp.id='aabb12'">
 68 |     <input type="text" name="fname" ng-model="mailchimp.FNAME" placeholder="First name">
 69 |     <input type="text" name="lname" ng-model="mailchimp.LNAME" placeholder="Last name">
 70 |     <input type="email" name="email" ng-model="mailchimp.EMAIL" placeholder="Email address" required>
 71 |     <button ng-disabled="MailchimpSubscriptionForm.$invalid" ng-click="addSubscription(mailchimp)">Join</button>
 72 |   </div>
 73 | 
 74 |   <!-- Show error message if MailChimp unsuccessfully added the email to the list. -->
 75 |   <div ng-show="mailchimp.result === 'error'" ng-cloak>
 76 |     <span ng-bind-html="mailchimp.errorMessage"></span>
 77 |   </div>
 78 | 
 79 |   <!-- Show success message if MailChimp returned successfully. -->
 80 |   <div ng-show="mailchimp.result === 'success'" ng-cloak>
 81 |     <span ng-bind-html="mailchimp.successMessage"></span>
 82 |   </div>
 83 | </form>
 84 | ```
 85 | 
 86 | # Custom Fields
 87 | You also have the option to include extra fields in your subscription form.
 88 | For example, you can pass a phone number to MailChimp by providing a value for
 89 | ``mailchimp.phone``.
 90 | 
 91 | # License
 92 | 
 93 | The MIT License
 94 | 
 95 | Copyright (c) 2014 Keith Hall
 96 | 
 97 | Permission is hereby granted, free of charge, to any person obtaining a copy
 98 | of this software and associated documentation files (the "Software"), to deal
 99 | in the Software without restriction, including without limitation the rights
100 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
101 | copies of the Software, and to permit persons to whom the Software is
102 | furnished to do so, subject to the following conditions:
103 | 
104 | The above copyright notice and this permission notice shall be included in
105 | all copies or substantial portions of the Software.
106 | 
107 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
108 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
109 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
110 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
111 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
112 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
113 | THE SOFTWARE.
114 | 


--------------------------------------------------------------------------------
/angular-mailchimp.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * angular-mailchimp
 3 |  * http://github.com/keithio/angular-mailchimp
 4 |  * License: MIT
 5 |  */
 6 | 
 7 | 'use strict';
 8 | 
 9 | angular.module('mailchimp', ['ng', 'ngResource', 'ngSanitize'])
10 | 
11 |   /**
12 |    * Form controller for a new Mailchimp subscription.
13 |    */
14 |   .controller('MailchimpSubscriptionCtrl', ['$log', '$resource', '$scope', '$rootScope',
15 |               function ($log, $resource, $scope, $rootScope) {
16 |     // Handle clicks on the form submission.
17 |     $scope.addSubscription = function (mailchimp) {
18 |       var actions,
19 |           MailChimpSubscription,
20 |           params = {},
21 |           url;
22 | 
23 |       // Create a resource for interacting with the MailChimp API
24 |       url = '//' + mailchimp.username + '.' + mailchimp.dc +
25 |             '.list-manage.com/subscribe/post-json';
26 | 
27 |       var fields = Object.keys(mailchimp);
28 | 
29 |       for(var i = 0; i < fields.length; i++) {
30 |         params[fields[i]] = mailchimp[fields[i]];
31 |       }
32 | 
33 |       params.c = 'JSON_CALLBACK';
34 | 
35 |       actions = {
36 |         'save': {
37 |           method: 'jsonp'
38 |         }
39 |       };
40 |       MailChimpSubscription = $resource(url, params, actions);
41 | 
42 |       // Send subscriber data to MailChimp
43 |       MailChimpSubscription.save(
44 |         // Successfully sent data to MailChimp.
45 |         function (response) {
46 |           // Define message containers.
47 |           mailchimp.errorMessage = '';
48 |           mailchimp.successMessage = '';
49 | 
50 |           // Store the result from MailChimp
51 |           mailchimp.result = response.result;
52 | 
53 |           // Mailchimp returned an error.
54 |           if (response.result === 'error') {
55 |             if (response.msg) {
56 |               // Remove error numbers, if any.
57 |               var errorMessageParts = response.msg.split(' - ');
58 |               if (errorMessageParts.length > 1)
59 |                 errorMessageParts.shift(); // Remove the error number
60 |               mailchimp.errorMessage = errorMessageParts.join(' ');
61 |             } else {
62 |               mailchimp.errorMessage = 'Sorry! An unknown error occured.';
63 |             }
64 |           }
65 |           // MailChimp returns a success.
66 |           else if (response.result === 'success') {
67 |             mailchimp.successMessage = response.msg;
68 |           }
69 | 
70 |           //Broadcast the result for global msgs
71 |           $rootScope.$broadcast('mailchimp-response', response.result, response.msg);
72 |         },
73 | 
74 |         // Error sending data to MailChimp
75 |         function (error) {
76 |           $log.error('MailChimp Error: %o', error);
77 |         }
78 |       );
79 |     };
80 |   }]);
81 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-mailchimp",
 3 |   "main": "angular-mailchimp.js",
 4 |   "version": "0.0.4",
 5 |   "authors": {
 6 |     "name": "Keith Hall",
 7 |     "web": "http://keith.io"
 8 |   },
 9 |   "description": "Angular controller for facilitating MailChimp subscription.",
10 |   "keywords": [
11 |     "angular",
12 |     "angularjs",
13 |     "mailchimp"
14 |   ],
15 |   "license": "MIT",
16 |   "homepage": "http://keithio.github.io/angular-mailchimp",
17 |   "ignore": [
18 |     "**/.*",
19 |     "node_modules",
20 |     "bower_components",
21 |     "test",
22 |     "tests"
23 |   ],
24 |   "dependencies": {
25 |     "angular": "~1.3.2",
26 |     "angular-resource": "~1.3.2",
27 |     "angular-sanitize": "~1.3.2"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------