RequireJs整合AngularJs 曾经终败给现在 2022-05-16 00:38 307阅读 0赞 RequireJs整合AngularJs 最近开发一个门户网站,前端使用的是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
还没有评论,来说两句吧...