Question

您好我刚刚开始角度，我只是想尝试将ui.bootstrap依赖项传递给我的应用程序，但一直收到此错误：

我正在尝试重新创建手风琴示例http://angular-ui.github.io/bootstrap/，但需要。

请帮助这个noobie !!!

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化模块MyApp：错误：[$ injector：nomod]模块'MyApp'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

app.js

define(['angular'], function(angular){
    return angular.module('MyApp', ['ui.bootstrap']);
})

main.js

//Configure RequireJS
require.config({
paths: {
    angular: '../lib/angular',
    angularResource: '../lib/angular-resource',
    jquery: '../lib/jquery-1.11.1.min',
    uiBootstrap: '../lib/ui-bootstrap'
},

//angular does not support AMD out of the box, put it in a shim
shim: {
    'angular': {
        exports: 'angular',
    },
    'angular-resource': ['angular'],
    'uiBootstrap': [ 'angular' ]
},
priority: [
    'angular'
]
});

require( [
    'controllers/MainCtrl',
    'controllers/AccordionDemoCtrl'
]);

app.js

define(['angular', 'uiBootstrap'], function(angular){
return angular.module('MyApp', ['ui.bootstrap']);
})

AccordionDemoCtrl.js

require(['app'], function(app){
    app.controller('AccordionDemoCtrl',
        function($scope){
            $scope.oneAtATime = true;

            $scope.groups = [
                {
                  title: 'Dynamic Group Header - 1',
                  content: 'Dynamic Group Body - 1'
                },
                {
                  title: 'Dynamic Group Header - 2',
                  content: 'Dynamic Group Body - 2'
                }
            ];

            $scope.items = ['Item 1', 'Item 2', 'Item 3', 'HOTDOG'];

            $scope.addItem = function() {
                var newItemNo = $scope.items.length + 1;
                $scope.items.push('Item ' + newItemNo);
            };

            $scope.status = {
                isFirstOpen: true,
                isFirstDisabled: false
            };
        }
    );
});

HTML

<!DOCTYPE html>
<html>
<head>
    <title>The Pillow Fort Land!</title>
      <!-- use css file if not using a webserver -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
      <!-- <link href="style/less/global.less" rel="stylesheet/less" type="text/css"/> -->
</head>

<body ng-app="MyApp">
  <div ng-controller="AccordionDemoCtrl">
    <p>
      <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
      <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
    </p>

    <label class="checkbox">
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
    <accordion close-others="oneAtATime">
      <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        This content is straight in the template.
      </accordion-group>
      <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
        {{group.content}}
      </accordion-group>
      <accordion-group heading="Dynamic Body Content">
        <p>The body of the accordion group grows to fit the contents</p>
          <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
          <div ng-repeat="item in items">{{item}}</div>
      </accordion-group>
      <accordion-group is-open="status.open">
          <accordion-heading>
              I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
          </accordion-heading>
          This is just some content to illustrate fancy headings.
      </accordion-group>
    </accordion>
  </div>

</body>
<!-- known issue with chrom and lessjs -->
<script src="lib/less.js" type="text/javascript"></script>
<script data-main="js/main" src="lib/require.min.js"></script>
</html>

需要ui-bootstrap js的问题

0 个答案: