使用requirejs来管理angularJS依赖示例

最新推荐文章于 2017-05-24 11:15:11 发布

谭正强

最新推荐文章于 2017-05-24 11:15:11 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端合集文章标签： requirejs

本文链接：https://blog.csdn.net/u010834071/article/details/45045743

前端合集专栏收录该内容

43 篇文章

订阅专栏

本文通过实际代码展示了如何使用requirejs进行模块化依赖管理，从下载库到配置依赖，再到定义模块和控制器，最后整合到HTML中进行测试。提供了一个简单而强大的示例，帮助开发者理解并应用模块化思想。

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

有关requirejs是什么在这里不做解释，只用纯代码实战让你感受requirejs依赖管理的强大。

一、首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用。

//配置依赖
require.config({
    paths: {
      "angular":"angular"
    },
    shim:{
        "angular": {
            "deps":[],
            "exports": "angular"
        }
    }
  });

//定义模块
define([
    'angular',
    'controller'
    ], function (angular) {    
  
    angular.module('HelloModel', ['HelloCtrls']);

    return {
        angularModules: [ 'HelloModel' ]
    };    
    
});

二、定义angular中的控制器模块controller.js

define([ 'angular' ], function(angular) {

    var componentCtrls = angular.module('HelloCtrls', []);

     componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {
        $scope.greet = "hello world";
      } ]);

    return componentCtrls;
});

三、新建一个index.html文件测试

<!DOCTYPE html>
<html ng-app="HelloModel">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="js/require.js" data-main="js/main" defer async="true" ></script>
</head>
<body ng-controller="helloCtrl">

{{greet}}

</body>
</html>

四、文件组织结构