Angular Material Design with Yeoman Gulp-Angular

Having been really digging what’s happening with Google’s Material Design, and now having seen enough Bootstrap to make my eyes bleed, I was itching to try it out for myself. I’ve blogged previously about my love for Yeoman, and I’ve recently started using Gulp for my build process. Fortunately, Swiip has created the Gulp-Angular generator that we can use to easily start an Angular Material  project. I wanted to prototype a responsive and modern request form.

Without much effort I was able to build a simple form using Angular :

<md-content >

    <md-card layout layout-sm="column" layout-padding class="maincard">
      <h2>How do I get a key?</h2>
      <p>
        Fill out some quick details, and request yourself an API key!
      </p>
    </md-card>

    <md-card layout-padding class="maincard">
      <div ng-controller="FormCtrl" >
      <h2> Request a Key </h2>
        <form name="userForm" >

          <div layout layout-sm="column">
            <md-input-container flex>
              <label>First name</label>
              <input ng-model="user.firstName">
            </md-input-container>
            <md-input-container flex>
              <label>Last Name</label>
              <input ng-model="user.lastName">
            </md-input-container>
          </div>

          <md-input-container flex>
            <label>Company</label>
            <input ng-model="user.company">
          </md-input-container>

          <md-input-container flex>
            <label>Phone</label>
            <input ng-model="user.phone">
          </md-input-container>

          <section layout="row" layout-sm="column" >
            <md-button class="md-raised md-primary">Request Key</md-button>
          </section>
        </form>
      </div>
    </md-card>

    <md-card layout layout-sm="column" layout-padding  class="maincard" >
      <h2>Keymaker</h2>
      <p class="lead">
        <img src="assets/images/keymaker.jpg" class="cardnail" ><br>
        We do only what we're meant to do.
      </p>
    </md-card>

  </md-content>

Which gives us the form below:

keymaker
I pushed it to Github Pages, which is an easy way to build a website for your project. You push the code to a repository, and it’s hosted at your username.github.io. You can see keymaker running at andrewbell.github.io and you can find it on my repo.

Posted in Examples Tagged with: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*