使用requirejs来管理angularJS依赖示例

来源：互联网发布：java权限管理实例编辑：程序博客网时间：2024/05/16 12:02

有关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>

四、文件组织结构

最简单的demo示例，有用你就点个赞吧！后期可能会修改，也欢迎大家提意见O(∩_∩)O~

1 0