Uso del design dei materiali angularjs con visual studio 2013

Question

Sono un neofita del design dei materiali angularjs e desidero implementare le sue ricche funzionalità dell'interfaccia utente nel mio frontend. VS13 viene fornito con bootstrap installato nel modello creato. Posso combinare il design del materiale angularjs con il bootstrap o personalizzare il bootstrap per darmi l'aspetto del design del materiale e le animazioni?

Ho creato nuovo progetto e installato angularjs material design, aggiunto al BondleConfig.vb sotto la cartella App_Start

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

sono stato in grado di aggiungere class="md-button md-raised" a un link che mi ha dato una bella sollevato pulsante, ma non ho potuto aggiungere md-primary a esso. Inoltre, l'utilizzo di tag come <md-button></md-button> nel markup html restituisce l'errore unknown element.

Answer 1

La configurazione del pacchetto sembra OK, tranne che hai dimenticato di includere angular-material.js nel tuo pacchetto.

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

Devi includere un file app.js (*) nella tua configurazione.

La configurazione deve disporre di un modulo e di un controller.

La parte chiave è dependency injection. Devi includere il modulo ngMaterial per lavorare con le librerie scaricate ... E non dimenticare di includere altri script!

//(*) 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>

Ho anche seguito questa example per mostrarvi come funziona.

Spero che sia OK ora :)

Answer 2

Se qualcuno vuole sapere come iniziare con angolare Materiale + MVCnel vs è possibile seguire i passaggi a soffietto.

1.Crea un progetto MVC in Visual Studioe.
2.Vai alla cartella App_Start.
3. Accedere a BundleConfig.cs.
4.Cancellare tutto il codice all'interno della funzione RegisterBundles & salvarlo.
5. Vai al file _Layout.cshtml nella cartella condivisa.
6. Sostituire il codice seguente.

<!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 a index.cshtml
8.Start utilizzando angolare materiale. (Codice di esempio è sottoelencati)

@{ 
    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> 

Grazie,
-happy Coding-