Using Angular & Mailchimp for your Launch Page
This tutorial we are going to create a landing page for our potential customers to fill in their email, using HTML, Angular, and Mailchimp. The resources available to Angular developers is amazing. We will be using an Angular Module for Mailchimp. If you are familair with Ruby on Rails, Angular Modules are very much like Ruby Gems.
What’s Required?
You will already need to have Node Package Manger and Bower installed on your machine. If you have never used these tools before, you are in for a wonderful surprise.
First Step - Create the Skeleton
We are going to build this launch page off a free template from BlackTie. Download this template and extract it into a new directory.
Second Step - Install Angular components
Open up terminal and CD into the directory that contains the index.html you just extracted. Run the following commands:
bower install angular
bower install angular-mailchimp
bower initTo include what Bower just downloaded for us, copy the following html into your <head></head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-mailchimp/angular-mailchimp.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="js/app.js"></script>Third Step - Loading Angular
To load our Angular App and inject the mailchimp module, it’s as easy as writing the following code into our <head></head>.
<script type="text/javascript">
angular.module("productLaunch", ["mailchimp"])
</script>Here we are defining the name of our app productLaunch and injecting the module mailchimp. Next we will load the app by passing our app name to the ng-app directtive <body ng-app="productLaunch">. This allows us to use the Mailchimp module anywhere inside of our body.
##Fourth Step - Setting up Mailchimp To learn how to use the Mailchimp module visit angular-mailchimp. This will walk you through putting in your credentials for your Mailchimp account. Which is basically filling out the following 4 hidden input fields
<input class="hidden" type="hidden" ng-model="mailchimp.username" ng-init="mailchimp.username=''">
<input class="hidden" type="hidden" ng-model="mailchimp.dc" ng-init="mailchimp.dc=''">
<input class="hidden" type="hidden" ng-model="mailchimp.u" ng-init="mailchimp.u=''">
<input class="hidden" type="hidden" ng-model="mailchimp.id" ng-init="mailchimp.id=''">The Mailchimp module gave us a new controller MailchimpSubscriptionCtrl. Let’s add it to the following
<section id="header" ng-controller="MailchimpSubscriptionCtrl">This will allow us to manipulate the content inside of this section based off what happens with the Mailchimp Subscription Controller. Let’s start by making the “Let Me Know When You Launch” text smarter with ng-hide and ng-show.
<h4 ng-hide="mailchimp.result ==='success'">LET ME KNOW WHEN YOU LAUNCH</h4>
<h4 ng-show="mailchimp.result ==='success'">THANKS FOR SIGNING UP!</h4>Let’s also hide the input box when mailchimp has a successful response.
<form class="form-inline" role="form" ng-hide="mailchimp.result === 'success'">We can also add a Mailchimp error message to the page. Add the following after your submit button
<div ng-show="mailchimp.result === 'error'">
<p ng-bind-html="mailchimp.errorMessage" class="error"></p>
</div>Now to hook in our form on the page to the our mailchimp module we need to add ng-model="mailchimp.email" to our input for the email and hookup the submit button.
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" ng-model="mailchimp.email">
<button type="submit" class="btn btn-info" ng-disabled="MailchimpSubscriptionForm.$invalid" ng-click="addSubscription(mailchimp)" type="submit" value="SIGN UP" disabled="disabled">Submit</button>That’s it! You are good to go. This page can not be tested by simply opening up the file, it needs to be served to test it. I am using Jekyll to run a local webserver, which is what Github pages uses, which will be the hosting platform for this landing page. If you want to know more about Jekyll please check my first blog post about starting a blog.
You can view the code for this tutorial at https://github.com/davidpatrick/angular-mailchimp-landing