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.

This topic will give you answers to your questions: http://stackoverflow.com/questions/27438336/choosing-bootstrap-vs-material-design. — arman1991, Jul 04 '15 at 15:40
ok i have the new project setup and i right clicked solution > manage nuget pacages > serached "responsive design" and i saw angularjs material design i installed and added it to my buildConfig class but its when i try to implement it i get Unknown Element — Samuel Moshie, Jul 04 '15 at 16:08
Pls edit your question and show us the parts of code what you really did in your project. Thanks. — arman1991, Jul 04 '15 at 16:30
It could be that you are missing the ngMaterial reference in your module's injection... Where is your JS file and AngularJS configuration? — arman1991, Jul 04 '15 at 17:20
i am new to angularjs and its material design is there any tutorial i can follow for step by step or proper installation on visual studio 13 MVC application tanks — Samuel Moshie, Jul 04 '15 at 17:47
AngularJS is framework that you must to understand how it works. My advice to you is to learn basics of Angular and then it will be easier to import 3rd party angular libraries. I improved my answer because I found a little missing part in your bundle. Hope it will be helpful for you :) — arman1991, Jul 05 '15 at 14:36

arman1991 · Answer 1 · 2015-07-05T14:33:03.647

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 :)

Charitha Goonewardena · Answer 2 · 2016-09-10T15:04:27.060

If anyone want to know how to get started with Angular Material + MVC in vs you can follow bellow steps.

1.Create a MVC project in Visual Studioe.
2.Go to App_Start folder.
3.Go to BundleConfig.cs.
4.Clear all the code inside RegisterBundles funciton & save it.
5.Go to _Layout.cshtml file under shared folder.
6.Replace the below code.

<!DOCTYPE html>
<html lang="en"  ng-app="BlankApp">

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>

<body>
    <script type="text/javascript">

    /**
     * You must include the dependency on 'ngMaterial'
     */
    angular.module('BlankApp', ['ngMaterial']);
    </script>
    <div class="wrapper">
        <div class="container">
            @RenderBody()
        </div>
    </div>
    @RenderSection("scripts", required: false)
</body>

</html>

7.Go to index.cshtml
8.Start using Angular Material.(sample code is undermentioned)

@{
    ViewBag.Title = "Home Page";
}

<body>

    <md-content>
        <md-tabs md-dynamic-height="" md-border-bottom="">
            <md-tab label="one">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab One</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur.</p>
                </md-content>
            </md-tab>
            <md-tab label="two">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Two</h1>
                    <p>LNullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor.</p>
                    <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor.</p>
                    <p>Integer turpis finibus commodo lectus.</p>
                </md-content>
            </md-tab>
            <md-tab label="three">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Tab Three</h1>
                    <p>Integer turpis erat, lectus.</p>
                </md-content>
            </md-tab>
        </md-tabs>
    </md-content>
</body>

Thanks,
-Happy Coding-

Using angularjs material design with visual studio 2013

2 Answers2