Basic Angular 1.4.0

by Nicolas PUJOL

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-controller="AppCtrl">
  <!-- Font Selector - General  -->
  <h4 class="pull-left">@Common.Font</h4>
  <div class="col-md-12 p0 m20-b">
    <select id="googleFontsGeneral" class="col-md-12 p0" name="fonts" ng-model="currentAdJSON.Font.fontName">
      <option ng-repeat="font in generalFonts | orderBy:'fontName'" style='font-family: "{{ font.fontName }}"'>{{ font.fontName }}</option>
    </select>
  </div>
  <!-- Font Selector - Promo Message -->
  <li class="col-md-12 p0 m20-b">
    <label class="pull-left">@Common.Font</label>
    <select id="googleFontsPromoMsg" class="col-md-12 p0" name="fontsPromoMsg" ng-model="currentAdJSON.PromoMessage.Font.fontName">
      <option ng-repeat="font in generalFonts | orderBy:'fontName'" style='font-family: "{{ font.fontName }}"'>{{ font.fontName }}</option>
    </select>
  </li>
</div>

JavaScript

var app = angular.module('starter', []);

app.controller('AppCtrl', function($scope) {
  CONST = {
    AZURE_BLOB_STORAGE_URL: ''
  };
  $scope.generalFonts = [{
    fontName: 'Abril Fatface',
    fontUrl: CONST.AZURE_BLOB_STORAGE_URL + 'fonts/abrilfatface.woff'
  }, {
    fontName: 'Alegreya',
    fontUrl: CONST.AZURE_BLOB_STORAGE_URL + 'fonts/alegreya.woff'
  }, {
    fontName: 'Alfa Slab One',
    fontUrl: CONST.AZURE_BLOB_STORAGE_URL + 'fonts/alfaslabone.woff'
  }, {
    fontName: 'Amatic SC',
    fontUrl: CONST.AZURE_BLOB_STORAGE_URL + 'fonts/amaticsc.woff'
  }, {
    fontName: 'Architects Daughter',
    fontUrl: CONST.AZURE_BLOB_STORAGE_URL + 'fonts/architectsdaughter.woff'
  }, {
    fontName: 'Arial',
    fontUrl: 'Arial, Helvetica, sans-serif'
  }];
  
    $scope.currentAdJSON = {
    Font: {
      fontName: 'Arial'
    },
    PromoMessage: {
      Font: {
        fontName: 'Arial'
      }
    }
  };
});