RequireJs整合AngularJs

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 

整合成功！