这似乎很容易,但相信我,我几乎浪费了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
中答案 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
代替。