基本积分角度js并要求js不起作用

时间:2015-02-21 05:23:29

标签: angularjs require angular-bootstrap angular-require

这似乎很容易,但相信我,我几乎浪费了4个小时,但仍然没有发现它有什么问题。 非常简单的设置安装所有的凉亭,如需要角度domReady bootstrap fontawesome..etc。

很抱歉,如果我忘了添加一些内容,这是我第一次设置角度需要。

它向我展示了两个错误: -

1)ReferenceError:未定义require

require.config({

//此错误发生在rconfig.js

2)ReferenceError:未定义define //此错误发生在require.js本身

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <style>
      *{
       line-height: normal !important;
      }
      body{
        background: #ffa500;
      }
      .room{
        background: #fff;
      }
      .me{
        font-weight: bold;
        font-family: cursive;
        color: #00f;
        background: #ccc; 
      }
      .others{
        font-weight: bold;
        font-family: cursive;
        color: #0f0;
        background: #999; 
      }
      .user_list{
        border-right: 2px solid;
      }
      .chat_room{

      }
      .room{
        border: 2px solid;
        box-shadow: 10px 10px 5px #888888;
      }
    </style>
  </head>
  <body>
    <div class="container room" style="height:500px;margin-top:100px;"> 
      <div class="row" >
          <div class="col-xs-4 user_list">
            <h2>Users Connected list</h2>
          </div>
          <div class="col-xs-6 chat_room">
            <h2>Chat Room</h2>
            <ul id="messages"></ul>
          </div>
        </div>  
    </div> 
    <div class="container" style="margin-top:20px;"> 
    <div class="row chat_box_input ">
            <form action="" class="form-inline">
              <div class="form-group col-sm-10">
                <input class="form-control" style="width:100%" placeholder="Message <3 Here" id="chatbox" autocomplete="off" />
            </div>
            <div class="form-group col-sm-2">
                <button style="width:100%" class="btn btn-danger">Send</button>
            </div>
            </form>
    </div>
         </div>
     </div>
    <script data-main="./main" src="bower_components/require/build/require.js"></script>
    <script src="./rconfig.js"></script>
  </body>
</html>

main.js

window.name = "NG_DEFER_BOOTSTRAP!";


define(['angular','domReady','bootstrap','jquery'],function(angular,domReady){
    domReady(function (document) {
        angular.bootstrap(document, ['app']);
        angular.resumeBootstrap();
    });
});

rconfig.js

require.config({
     baseUrl: 'bower_components',
  paths:{
    'angular':'angular/angular.min',
    'bootstrap':'bootstrap/dist/js/bootstrap.min',
    'jquery':'jquery/dist/jquery.min',
    'domReady':'requirejs-domeready/domReady'

  },
  shim:{
    'angular': {exports: 'angular'},
    'bootstrap':{deps:['jquery']}
  }
});

Angular版本AngularJS v1.3.13

任何帮助都会受到欢迎。

@irysius 建议

更新

如果我在 main.js 中将define更改为require,则会出现2个错误: -

1)TypeError:path.match不是函数 paths = path.match(MODULE_SPLITER), //在require.js文件中

2)ReferenceError:未定义require

require.config({

//此错误发生在rconfig.js

1 个答案:

答案 0 :(得分:2)

将你的rconfig放在require.js声明之后(也有data-main声明)。

编辑2 :澄清我之前的陈述的含义。

<script data-main="./main" src="bower_components/require/build/require.js"></script>
<script src="./rconfig.js"></script>

编辑:此外,不要使用它来定义main,而是使用它。

所以,将define([... stuff更改为require([... stuff

您没有将main.js作为模块公开。这是你的切入点。使用RequireJS时,这是一个非常常见的错误来源。

编辑3 :你有错误的require.js

bower install requirejs代替。