Это кажется простым, но поверьте мне, я потратил почти 4 часа на это, так и не выяснив, что в нем не так. Очень простая установка, установка всего с помощью Bower, например, требуется угловой domReady bootstrap, шрифт потрясающий... и т. д.
Извините, если я забыл что-то добавить, это моя первая настройка angular с require.
Он показывает мне две ошибки: -
1) ReferenceError: требование не определено
require.config({
//эта ошибка в rconfig.js
2) ReferenceError: определение не определено // эта ошибка в самом 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']}
}
});
Угловая версия AngularJS v1.3.13
Любая помощь будет оценена.
ОБНОВЛЕНИЕ, предложенное @irysius
Если я изменю определение на требование в моем main.js, тогда возникнут 2 ошибки: -
1) TypeError: path.match не является функцией paths = path.match(MODULE_SPLITER), // в файле require.js
2) ReferenceError: требование не определено
require.config({
//эта ошибка в rconfig.js
