Require.js

详见：

初识Require.js

解密Require.js

Angular.js

详见：

初识Angular.js之爱恨情仇

整合Require.js、Angular.js

配置

在Requirejs中配置angular.js。

require-main.js

// 配置
requirejs.config({
...
  paths: {
    ‘jquery‘: ‘libs/jquery-2.1.3/jquery.min‘,
    ‘angular‘: ‘libs/angular-1.3.15/angular.min‘
  },
  shim: {
    ‘angular‘: {
      deps: [‘jquery‘],
      exports: ‘angular‘
    }
  },
  ...
});

创建

创建Angularjs应用模块。

angular-app.js

// 创建
define([‘angular‘], function(angular) {
  return angular.module(‘angularApp‘, []);
});

加载、启动

通过Requirejs加载、启动Angularjs

require-bootstrap.js

GlobalConfig.requireScripts.unshift(
  ‘angular‘,
  ‘angularApp‘
);
// 加载
requirejs(GlobalConfig.requireScripts, function (angular) {
  // 启动
  $(document).ready(function(){
    angular.bootstrap(document, [‘angularApp‘]);
  });

});

页面引用

<script src="/libs/require/require.js"></script>
<script src="/require-main.js"></script>
<script src="/require-bootstrap.js"></script>

文件中引用Angular.js

通过Requirejs依赖注入，引入angularjs模块

define([
  ‘angularApp‘ // 引入angularjs
], function(
  angularApp
) {

  angularApp.factory(‘loginService‘, function() {
    var loginService = {};

    loginService.login = function (data) {
      window.location.href = ‘/welcome‘;
    };

    return loginService;
  });
});

通过Requirejs动态加载js文件

详见简单、强大的swig.js