requirejs整合angularjs

最新推荐文章于 2025-03-12 11:14:17 发布

Randy-rs

最新推荐文章于 2025-03-12 11:14:17 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： javascript angularjs 前端

本文链接：https://blog.youkuaiyun.com/u012959008/article/details/72674570

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文记录了在AngularJs 1.6.3版本的项目中，如何使用RequireJs进行JS加载管理的过程。通过RequireJs的配置和模块定义，实现了AngularJs应用的无缝结合，无需手动启动Angular应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RequireJs整合AngularJs

最近开发一个门户网站，前端使用的是AngularJs，版本是1.6.3，然后使用RequireJs来管理项目中的JS加载。在这里记录下两者整合的过程，也希望能够帮助到那些跟楼主一样第一次接触RequireJs和AngularJs的朋友。（然而楼主本职是搞JAVA开发）

RequireJs的中文官网。官网上详细介绍了RequireJs的方方面面，我也不重复了。下图是demo的目录结构

其中lib下面主要是require.js和angular.js。
我们先来看看 demo1.html代码：

<!DOCTYPE html>
<html >
<head>
<title>RequireJs整合AngularJs</title>
<script src="../js/lib/require.js" data-main="../js/desk.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mycontroller">
    {{text}}
</div>
</body>
</html>

引入require.js，然后使用data-main属性引入一个页面的入口JS。在这个入口JS中，主要是require.js相关的配置项。

下面是desk.js

//设置RequireJS的配置
require.config({
    baseUrl : '../js',
    paths : {
        "angular" : "lib/angular"
    },
    shim : {
        "angular":{exports:"angular"},
    },
    urlArgs: "bust=" +  (new Date()).getTime()
});
//注册一个controller
require(["app"],function(app){
    app.controller("mycontroller",function($scope){
        $scope.text = "hello world!";
    });
});

在注册controller的时候，[“app”]，表示依赖app.js。require会先引入app.js后再去执行回调函数。网上很多帖子都说需要我们自己使用angular的bootstrap方法去手动开启一个app应用，但实践后，发现并不需要手动启动。

再看看app.js

define("app",["angular"],function(angular){
    var myapp = angular.module("myapp",[]);
    return myapp;
});

定义一个angular模块，名为“myapp”，并返回。值得注意的是，这里我们使用的是RequireJS中的define函数，去定义一个模块，这样在desk.js中才能被成功引用。
浏览器访问demo1.html

整合成功！