基本集成 angular js 并要求 js 不工作

Question

这看起来很简单，但请相信我，我在上面浪费了将近 4 个小时，但仍然没有找出其中的问题所在。非常简单的设置，用 bower 安装所有东西，比如 require angular domReady bootstrap fontawesome..etc.

对不起，如果我忘了添加一些东西，这是我第一次设置 angular 需要。

它向我显示了两个错误：-

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

如有任何帮助，我们将不胜感激。

UPDATE @irysius

建议

如果我将 main.js 中的定义更改为 require，则会出现 2 个错误：-

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

2) ReferenceError: require 未定义

require.config({

//这个错误在rconfig.js

Answer 1

将您的 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 代替。

基本集成 angular js 并要求 js 不工作

Basic Integration angular js and require js not working

require

angularjs

angular-bootstrap

angular-require

UPDATE @irysius