requirejs整合angularjs

来源：互联网发布：元认知知乎编辑：程序博客网时间：2024/06/12 05:24

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()});//注册一个controllerrequire(["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

整合成功！

阅读全文

0 0