今天开发的时候遇到一个很奇怪的问题,先记录下来和简单的解决办法,以后慢慢分析,今天使用require.js来加在AngularJS的时候,只要
require
了Jquery
AngularJS 第一次加载的时候就会报错,如果去掉ng-app='app'
中的 'app' 就不报错,最后简单的解决方法,就是使用低版本的RequireJS,只要使用2.1版本以下就可以,等有时间分析一下原因。现在可以用了,测试代码如下:
index.html
主页文件<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
<meta charset="utf-8" />
<title ng-bind="title"></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="widuu">
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/bootstrap/2.3.2/css/bootstrap.min.css">
<style type="text/css">
.navbar{
margin-top: 20px;
}
body{
background-color: #62E2EF;
}
</style>
</head>
<body>
<!--导航条start-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" >Widuu</a>
<ul class="nav">
<li class="active"><a href="">首页</a></li>
<li><a href="">测试</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</div>
</div>
<!--导航条end-->
<!--container start-->
<div class="container" style="margin-top:50px;">
<div class="row">
你好呀
<p>
<h1>
Widuu 你好呀
</h1>
</div>
</div>
<!--container end-->
</body>
<script type="text/javascript" data-main="js/main" src="http://libs.useso.com/js/require.js/2.0.6/require.min.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: 'js/',
paths: {
"angular": 'http://libs.useso.com/js/angular.js/1.2.0rc3/angular.min',
"jquery" : 'http://libs.useso.com/js/jquery/1.10.1/jquery.min',
"bootstrap" : 'http://libs.useso.com/js/bootstrap/2.3.2/js/bootstrap.min',
},
shim :{
"bootstrap" : {
deps : [ 'jquery' ],
exports : 'bootstrap'
},
"angular": {"exports": "angular"},
},
deps:['bootstrap']
});
</script>
</html>
main.js
JS文件 require(['angular'],function(angular){
angular.module('app',[]).run(function($rootScope){
$rootScope.title = "hello bootstrap";
})
});
发表评论 取消回复