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: stackoverflow.com/questions/27438336/…. — arman1991
– arman1991, Commented Jul 4, 2015 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
– Samuel Moshie, Commented Jul 4, 2015 at 16:08
Pls edit your question and show us the parts of code what you really did in your project. Thanks. — arman1991
– arman1991, Commented Jul 4, 2015 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
– arman1991, Commented Jul 4, 2015 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
– Samuel Moshie, Commented Jul 4, 2015 at 17:47

arman1991 · Accepted Answer · 2015-07-05 14:33:03Z

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 · Accepted Answer · 2016-09-10 15:04:27Z

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-

Collectives™ on Stack Overflow

Using angularjs material design with visual studio 2013

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related