Using angularjs material design with visual studio 2013

Question

I am new to angularjs material design and will wish to implement its rich UI features in my frontend. VS13 comes with bootstrap installed in the template created. Can I combine angularjs material design with bootstrap or customize bootstrap to give me the material design look and animations?

I created new project and installed angularjs material design, added it to BondleConfig.vb under the App_Start folder

bundles.Add(New ScriptBundle("~/bundles/angular").Include(
                    "~/bundles/angular.js",
                    "~/bundles/angular-animate.js",
                    "~/bundles/angular-aria.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/angular-material/angular-material.css",
                  "~/Content/site.css"))

I was able to add class="md-button md-raised" to a link which gave me a nice raised button but I could not add md-primary to it. Also, using tags like <md-button></md-button> in the html markup gives unknown element error.

Answer 1

Your bundle config looks OK, except you forgot to include the angular-material.js in your bundle.

bundles.Add(New ScriptBundle("~/bundles/angular").Include(
                    "~/bundles/angular.js",
                    "~/bundles/angular-animate.js",
                    "~/bundles/angular-aria.js",
                    "~/bundles/angular-material.js")) //missing part

        bundles.Add(New StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/angular-material/angular-material.css",
                  "~/Content/site.css"))

You have also to include an app.js file(*) in your config.

Your configuration must have an module and controller.

The key part is dependency injection. You have to include ngMaterial module to work with downloaded libraries... And don't forget to include other scripts!

//(*) app.js
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
  $scope.title1 = 'Button';
  $scope.title4 = 'Warn';
  $scope.isDisabled = true;

  $scope.googleUrl = 'http://google.com';

});

.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }
.buttondemoBasicUsage md-content {
  margin-right: 7px; }
.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }
.buttondemoBasicUsage .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }

<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<div ng-controller="AppCtrl" class="buttondemoBasicUsage" ng-app="MyApp">
  <md-content>

    <section layout="row" layout-sm="column" layout-align="center center">
      <md-button>{{title1}}</md-button>
      <md-button md-no-ink="" class="md-primary">Primary (md-noink)</md-button>
      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
      <md-button class="md-warn">{{title4}}</md-button>
      <div class="label">Flat</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center">
      <md-button class="md-raised">Button</md-button>
      <md-button class="md-raised md-primary">Primary</md-button>
      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
      <md-button class="md-raised md-warn">Warn</md-button>
      <div class="label">Raised</div>
    </section>


    <section layout="row" layout-sm="column" layout-align="center center">
        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>

        <md-button>Default Button</md-button>
      <div class="label">Link vs. Button</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center">
      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
      <md-button class="md-accent">Accent</md-button>
      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
      <div class="label">Themed</div>
    </section>
  </md-content>
</div>

I also followed this example to show you how this works.

I hope it's OK now :)