RequireJs整合AngularJs

曾经终败给现在 2022-05-16 00:38 441阅读 0赞

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

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

![SouthEast][]

其中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

![SouthEast 1][]

整合成功！

[Link 1]: http://www.requirejs.cn/
[SouthEast]: /images/20220516/feecbeba82124bdc99a065ba5bb54dc4.png
[SouthEast 1]: /images/20220516/0a5228df403c4fa3b84796ac17a0c0bd.png