requirejs和AngularJS结合使用

最近一个项目要使用requirejs实现angularjs的js文件按需加载，在网上我也找了很多资料但是都不是很全，要么就不是很详细，所以我自己总结了一下，有需要的朋友可以看一下。废话不多说，直接上代码。

一、简单事例的项目目录如下：

-index.html

-js文件夹

--controller文件夹

  --- controllers.js

  --- controller1.js

  ---controller2.js

--directives文件夹

  ---directives.js

  ---directive1.js

--app.js

--router.js

--loader.js

--main.js

--angular-bootstrap.js

二、首页

首先你的index.html大概如下

在首页index.html只需要引入requireJs库文件，并且指明入口函数main.js，采用手动启动angularjs应用，所以这里不用为首页添加ng-app='webApp'。

三、配置mian.js

• 定义RequireJS配置
  require.config({
  urlArgs: "==version==",
  waitSeconds: 0,
  paths: {
  'jquery': '../../plugins/jQuery/jQuery-2.1.4.min',
  'bootstrap': '../../lib/bootstrap/dist/js/bootstrap.min',
  'angular': '../../lib/angular/angular.min',
  'angular-route': '../../lib/angular-route/angular-route.min',
  'angular-animate': '../../lib/angular-animate/angular-animate.min',
  'angular-resource': '../../lib/angular-resource/angular-resource.min',
  'angular-growl': '../../lib/angular-growl-v2/build/angular-growl.min',
  'domReady': '../../lib/require/domReady',
  'jquery-ui': '../../lib/jquery-ui/jquery-ui.min',
  },
  shim: {
  'angular': {
  exports: 'angular',
  deps: ['jquery']
  },
  'bootstrap': {
  deps: ['jquery']
  },
  'angular-route': {
  deps: ['angular']
  },
  'angular-animate': {
  deps: ['angular']
  },
  'angular-resource': {
  deps: ['angular']
  },
  'angular-growl': {
  deps: ['angular']
  },
  'slimscroll': {
  deps: ['jquery']
  },
  'tools': {
  deps: ['jquery']
  },
  'configs': {
  deps: ['jquery']
  },
  },
  deps: [
  'index-app',
  'tools',
  'configs',
  ]
  });

  require([
   'app',
   'routes',
           // 这是导入一个方法
   'loader',
   //注意：这不是Twitter Bootstrap，而是AngularJS bootstrap
   'angular-bootstrap',
   //所创建的所有控制器、服务、指令及过滤器文件都必须写到这里，这块内容必须手动维护
   'controllers/controllers',
   'directives/directives',
         ],
     function(app, config, loader) {
   'use strict';
   app.config([
       '$routeProvider',
       '$locationProvider',
       '$controllerProvider',
       '$compileProvider',
       '$filterProvider',
       '$provide',
       "$httpProvider",
       'growlProvider',
       function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider, growlProvider) {
           app.registerController = $controllerProvider.register;
           app.registerDirective = $compileProvider.directive;
           app.registerFilter = $filterProvider.register;
           app.registerFactory = $provide.factory;
           app.registerService = $provide.service;
           console.log("config.routes"+config.routes);
           if(config.routes != undefined) {
               angular.forEach(config.routes, function(route, path) {
                   $routeProvider.when(path, {
                       templateUrl: route.templateUrl,
                       controller: route.controller,
                       resolve: loader(route.dependencies)
                   });
               });
           }
  
           if(config.defaultRoutePath != undefined) {
               $routeProvider.otherwise({
                   redirectTo: config.defaultRoutePath
               });
           }
           growlProvider.globalTimeToLive({
               success: 3000,
               error: 5000,
               warning: 5000,
               info: 5000
           });
           $httpProvider.defaults.withCredentials = true;
           $httpProvider.defaults.useXDomain = true;
           delete $httpProvider.defaults.headers.common['X-Requested-With'];
       }
   ]);
   return app;
   }
   );
  

所以总体上说main.js这个文件做的事情就是：由requirejs异步载入所有文件；
function里面就是各种依赖方法。

四、手动启动angularjs应用

angular-bootstrap.js文件

    //当DOM结构加载完成后，bootstrap.js文件将会命令AngularJS启 动起来并继续执行
    define(['angular', 'domReady', 'app'], function(angular, domReady) {
    require(['domReady!'], function(document) {
        angular.bootstrap(document, ['app']);
       });
    });

这里依赖于app.js和router.js，我们看看这两个文件分别做什么

五、angular.module

这时先看看平时我们在写angularjs应用是这样写的

  var app = angular.module("xxx",["xxx"]);

  app.controller("foo",function($scope){});
  app.directive(...)

所以app.js里是这样的

 define([
'angular',
'angular-route',
'angular-resource',
'angular-animate',
'angular-growl',
'angular-animate',
     。。。

 ], function(angular) {
'use strict';
return angular.module('app', [
    'controllers',
    'directives',
    'angular-growl',
    'ngAnimate',
    'ngRoute',
     。。。
   ]);
});

六、网站路由设置

我们这里使用ng-router。所以我们的router.js应该是这样的，主要是用来定义路由的，关于ng-router的配置请自行查看相关知识，这里就简单略过
router.js

   define([], function() {
return {
    defaultRoutePath: '/index',
    routes: {
        '/index': {
            templateUrl: 'tpls/index.html',
            controller: 'indexCtr',
            dependencies: ['js/controllers/index.js', 'js/directives/derective1.js']
            //这就是按需导入js文件
        },
    
    }
};
});

当然还需要有loader文件 里面有我们定义按需加载的方法；
loader.js

define([], function() {
  return function(dependencies) {
// 返回路由的 resolve 定义， 
var definition = {
  // resolver 是一个函数， 返回一个 promise 对象；
  resolver: ['$q', '$rootScope', function($q, $rootScope) {
    // 创建一个延迟执行的 promise 对象
    var defered = $q.defer();
    // 使用 requirejs 的 require 方法加载的脚本
    require(dependencies, function() {
      $rootScope.$apply(function() {
        // 加载完脚本之后， 完成 promise 对象；
        defered.resolve();
      });
    });
    //返回延迟执行的 promise 对象， route 会等待 promise 对象完成
    return defered.promise;
  }]
};
return definition;
  }
 });

七、控制器

首先 controllers.js里我们要这样写

 define(['angular'], function(angular) {
      'use strict';
          var controllers = angular.module('controllers', []);
   controllers.config([ '$controllerProvider', function($controllerProvider) {
        controllers.registerController = $controllerProvider.register;
}
  ]);
  controllers.initController = function(controllerName, options) {
        var attrs = [];
        var fun = null;
      if(jQuery.isArray(options)) {
                attrs = options.slice(0, options.length - 1)
                fun = options[options.length - 1]
         } else {
            fun = options;
        }
        controllers.registerController(controllerName, fun);
          if (attrs.length > 0)
            fun.$inject = attrs;
          }
    return controllers;
  });

主要用来加载各个控制器（所有的控制器都将在这个文件中被加载）,除此之外再不用做其他，因为我们可以有很多个控制器文件，按照具体需要进行添加。

contreller1.js里要这样写 这就是我们具体的控制器

  define(['controllers/controllers'], function(controllers) {
      'use strict';
  controllers.initController('user_centerCtrl', ['$scope', '$location', '$routeParams', '$timeout', '$http',
    function($scope, $location, $routeParams, $timeout, $http) {
        

        }
    ]);
 });

八、指令

同理directives.js也类似。

define(['angular'], function(angular) {
'use strict';
var directives = angular.module('directives', []);
directives.config([
'$compileProvider',
function($compileProvider) {
  directives.registerDirective = $compileProvider.directive;
      }
]);
directives.initDirective = function(directiveName, options) {
var attrs = [];
var fun = null;
if(jQuery.isArray(options)) {
  attrs = options.slice(0, options.length - 1)
  fun = options[options.length - 1]
} else {
  fun = options;
}
directives.registerDirective(directiveName, fun);
if (attrs.length > 0)
  fun.$inject = attrs;
}
return directives;
});

directive1.js

define(['directives/directives'],
  function(directives) {
  'use strict';

directives.initDirective("oprationtable", function() {
    return {
        restrict: 'AE',
        templateUrl: "tpls/operationTable.html",
        transclude: true,
        scope: {
            tabdata: '=',
        },
        link: function(scope, elem, attrs) {
            //console.log(attrs.tabdata)
            //scope.tabdata = attrs.tabdata
            //console.log(scope.tabdata)
        },
        controller: function($scope, $element, $attrs) {

        },
     }
 });

});

好了 剩下的服务啊 过滤器啊 都可以这样写
这就是比较完整requirejs和AngularJS结合使用项目搭建 希望对大家有帮助！
有帮助给个赞谢谢！！！