Question

我有加载角度材料的问题，我用jspm安装了它。由Systemjs。

我总是在复活：

未捕获的异常：未找到： http://localhost:8080/jspm_packages/github/angular/bower-material@0.10.0/angular-material

这是我的Systemjs配置，由jspm

创建

System.config({
  "baseURL": "/",
  "transpiler": "traceur",
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js"
  }
});

System.config({
  "map": {
    "angular": "github:angular/bower-angular@1.4.3",
    "angular-animate": "github:angular/bower-angular-animate@1.4.3",
    "angular-aria": "github:angular/bower-angular-aria@1.4.3",
    "angular-material": "github:angular/bower-material@0.10.0",
    "traceur": "github:jmcriffey/bower-traceur@0.0.88",
    "traceur-runtime": "github:jmcriffey/bower-traceur-runtime@0.0.88",
    "github:angular/bower-angular-animate@1.4.3": {
      "angular": "github:angular/bower-angular@1.4.3"
    },
    "github:angular/bower-angular-aria@1.4.3": {
      "angular": "github:angular/bower-angular@1.4.3"
    },
    "github:angular/bower-material@0.10.0": {
      "angular": "github:angular/bower-angular@1.4.3",
      "angular-animate": "github:angular/bower-angular-animate@1.4.3",
      "angular-aria": "github:angular/bower-angular-aria@1.4.3",
      "css": "github:systemjs/plugin-css@0.1.13"
    }
  }
});

这是我的主题：

var angular = require("angular");
require("angular-material");
var app = angular.module('StarterApp', ["ngMaterial"]);

我正在我的index.html中加载：

<script>
    System.import("Main");
</script>

这个错误

Answer 1

必须是配置中的错误。以下是迄今为止（2016/02）的程序，其中的示例来自here

第一： jspm install angular angular-animate angular-aria angular-material

window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;

require([
  'angular',
  'angular-aria',
  'angular-animate',
  'angular-material',
  'angular-material/angular-material.css!',
  'angular-material/angular-material.layouts.css!'
], function(angular) {
  var app = angular.module('App', ['ngMaterial', 'ngAnimate', 'ngAria']);

  app.controller('AppCtrl', ['$scope',
    function($scope) {
      $scope.title = document.title;
    }
  ]);

  // angular manual initialisation since we use a script loader
  // cf. http://docs.angularjs.org/guide/bootstrap
  angular.element(document).ready(function() {
    console.log('Bootstrapping angular...');
    angular.bootstrap(document, ['App'], {
      strictDi: true
    });
  });
});

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Angular Material</title>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
  </script>
</head>

<div class="contentdemoBasicUsage" ng-controller="AppCtrl" layout="column" ng-cloak="">
  <md-toolbar class="md-warn">
    <div class="md-toolbar-tools">
      <h2 class="md-flex">{{title}}</h2>
    </div>
  </md-toolbar>

  <md-content flex="" layout-padding="">
    <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
      cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.</p>

    <p>
      Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
    </p>
  </md-content>
</div>

用jspm运行角度材料

1 个答案: