AngularJS+requirejs+juqery中出现的问题

widuu 2015-9-29 前台技术 2,265 0 喜欢 (1)

今天开发的时候遇到一个很奇怪的问题,先记录下来和简单的解决办法,以后慢慢分析,今天使用require.js来加在AngularJS的时候,只要requireJquery 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>
JS文件 main.js
require(['angular'],function(angular){
    angular.module('app',[]).run(function($rootScope){
        $rootScope.title = "hello bootstrap";
    })
});

转载请注明来自微度网络,本文标题:《AngularJS+requirejs+juqery中出现的问题》

喜欢 1 发布评论
Top