Question

我正在尝试使用棱角分明的材料。我添加了所有参考文献，但是当我使用角度材料按钮进行测试时，我没有看到按钮。我认为我与此帖后问题类似：Installing Angular Material, "Failed to instantiate module ngMaterial" even though I'm using angular version 1.3.0

_Layout.cshtml

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Register</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body data-ng-app="main">
    <div><md-button class="md-raised md-primary">Primary</md-button></div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        window.MyApp = {};
        MyApp.rootPath = '@Url.Content("~")';
    </script>
    <script src="~/App/Validator.js"></script>
    <script src="~/App/App.js"></script>
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
        @RenderSection("jsCode", required: false)
    </script>
</body>
</html>

App.js

var material = angular.module('ngMaterial', ['ng', 'ngAnimate', 'ngAria','ngMessages','ngMaterial']);
var commonModule = angular.module('common', ['ngRoute']);
var mainModule = angular.module('main', ['common', 'ngMaterial']);

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                  "~/Scripts/angular.js",
                  "~/Scripts/angular-route.js",
                  "~/Scripts/angular-animate.js",
                  "~/Scripts/angular-aria.js",
                  "~/Scripts/angular-messages.min.js",
                   "~/Scripts/angular-material.js"));

Answer 1

似乎ngMaterial依赖项是错误的，因为ngMaterial依赖于它自己：

angular.module('ngMaterial', ['ng', 'ngAnimate', 'ngAria','ngMessages','ngMaterial']);

工作示例：

angular.module('ngMaterial', [ 'ng', 'ngAnimate', 'ngAria', 'material.core', 'material.services.attrBind', 'material.services.compiler', 'material.services.registry', 'material.decorators', 'material.services.aria', "material.components.bottomSheet","material.components.button","material.components.card","material.components.checkbox","material.components.circularProgress","material.components.content","material.components.dialog","material.components.divider","material.components.icon","material.components.linearProgress","material.components.list","material.components.radioButton","material.components.sidenav","material.components.slider","material.components.subheader","material.components.switch","material.components.tabs","material.components.textField","material.components.toast","material.components.toolbar","material.components.tooltip","material.components.whiteframe"]);

Plnkr：http://embed.plnkr.co/ggfXIq/

添加所有参考后，角度材料不起作用

1 个答案: