Using angularjs material design with visual studio 2013

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.

Upvotes: 5

Answers (2)

Charitha Goonewardena

Reputation: 4714

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-

Upvotes: 1

arman1991

Reputation: 1166

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

Upvotes: 3

Using angularjs material design with visual studio 2013

Answers (2)

Related Questions