1

It's seem to be easy but trust me i wasted almost my 4 hours on it still didn't find out what is wrong in it. Very simple setup install everything with bower like require angular domReady bootstrap fontawesome..etc.

Sorry if I forgot to add something this is my first setup angular with require.

It is showing me two errors:-

1) ReferenceError: require is not defined

require.config({

//this error is in rconfig.js

2) ReferenceError: define is not defined //this error is in require.js itself

<!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 version AngularJS v1.3.13

Any help would be appretiated.

UPDATE suggested by @irysius

If i change define to require in my main.js then there are 2 errors:-

1)TypeError: path.match is not a function paths = path.match(MODULE_SPLITER), //in the require.js file

2) ReferenceError: require is not defined

require.config({

//this error is in rconfig.js

4

1 回答 1

2

Put your rconfig after the require.js declaration (the one that also has data-main).

EDIT 2: Clarifying what I mean by the previous statement.

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

EDIT: In addition, instead of defining main, use it.

So, change define([... stuff to require([... stuff

You are not exposing main.js as a module. It is your entry point. This is a very common source of errors when using RequireJS.

EDIT 3: You have the wrong require.js

bower install requirejs instead.

于 2015-02-21T05:31:47.460 回答