Question

有人可以帮我解决这个问题。我试图使用带有requirejs的Angular材料。但它不起作用。这是我使用的代码：

的index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
    </head>
    <body ng-app="StarterApp" ng-controller="AppCtrl">
        <md-select placeholder="Pick" ng-model="someVal">
            <md-option value="1">One</md-option>
            <md-option value="2">Two</md-option>
        </md-select>        
    </body>
    <script data-main="main" src="require.js"></script>
</html>

main.js

require.config({
    baseUrl: "",
    paths: {
        'app': 'app',
        'angular': 'bower_components/angular/angular',
        'ngAnimate': 'bower_components/angular-animate/angular-animate.min',
        'ngAria': 'bower_components/angular-aria/angular-aria.min',
        'ngMaterial': 'bower_components/angular-material/angular-material.min'
    },
    shim: {
        'ngAnimate': ['angular'],
        'ngAria': ['angular'],
        'ngMaterial': {
             deps: ['ngAnimate', 'ngAria']
         }
    },
    deps: ['app']
});

app.js

"use strict";

define(['angular', 'ngMaterial'], function () {
    var app = angular.module('StarterApp', ['ngMaterial']);

    app.controller('AppCtrl', ['$scope', function ($scope) {
    }]);
});

类似的问题已经asked here，我接着使用hammerjs代理，但我仍然得到同样的错误。：（

Click Here To See The Error Screenshot

Answer 1

我在link找到答案。

index.html中的更改

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body ng-controller="AppCtrl">
    <md-select placeholder="Pick" ng-model="someVal">
        <md-option value="1">One</md-option>
        <md-option value="2">Two</md-option>
    </md-select>        
</body>
<script data-main="main" src="require.js"></script>
</html>

app.js中的更改

"use strict";

 define(['angular', 'ngMaterial'], function () {
    var app = angular.module('StarterApp', ['ngMaterial']);

    app.controller('AppCtrl', ['$scope', function ($scope) {
    }]);

    angular.bootstrap(document.getElementsByTagName("body")[0], ['StarterApp']);
    return app;
});

角度材料+ RequireJS不能一起工作

1 个答案: