Używanie projektu materiałowego angularjs ze studiem graficznym 2013

Question

Jestem nowym materiałem do projektowania angularjs i będę chciał wprowadzić w interfejsie jego bogate funkcje interfejsu użytkownika. VS13 jest wyposażony w bootstrap zainstalowany w utworzonym szablonie. Czy mogę połączyć projekt materiału angularjs z bootstrapem lub dostosować bootstrap, aby nadać mu wygląd i animacje?

stworzyłem nowy projekt i zainstalowane angularjs material design, dodaje go do BondleConfig.vb w folderze 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")) 

udało mi się dodać class="md-button md-raised" do linku, który dał mi piękny podniesiony przycisk, ale nie mogłam dodać md-primary do to. Ponadto użycie znaczników, takich jak <md-button></md-button> w znacznikach html, powoduje błąd o wartości unknown element.

Answer 1

Twoja konfiguracja pakietu wygląda OK, ale zapomniałeś dołączyć plik kątowy-material.js do swojego pakietu.

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

Należy również dołączyć plik app.js (*) do konfiguracji.

Twoja konfiguracja musi mieć moduł i kontroler.

Kluczową częścią jest dependency injection. Musisz dołączyć moduł ngMaterial do pracy z pobranymi bibliotekami ... I nie zapomnij dołączyć innych skryptów!

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

ja również po tej example pokazać wam jak to działa.

Mam nadzieję, że teraz jest OK :)

Answer 2

Jeśli ktoś chce wiedzieć, jak zacząć z kątowe Materiał + MVCw vs można śledzić mieszkowych kroki.

1. Utwórz projekt MVC w Visual Studioe.
2. Przejdź do folderu App_Start.
3. Przejdź do BundleConfig.cs.
4. Usuń wszystkie kody wewnątrz RegisterBundles funciton & zapisz.
5. Przejdź do pliku _Layout.cshtml w folderze udostępnionym.
6.Zmień poniższy kod.

<!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 do index.cshtml
8.Start użyciu kątowa materiał. (Kod próbki jest niżej)

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

Dzięki,
-Happy kodowaniu