RequireJS 与 AngularJS 集成（完整版）

最新推荐文章于 2018-11-27 09:46:31 发布

千影

最新推荐文章于 2018-11-27 09:46:31 发布

阅读量1.1w

点赞数 2

分类专栏： Angularjs 随记 RequireJS 文章标签： AngularJS RequireJS

本文链接：https://blog.csdn.net/yo548720570/article/details/41047309

版权

Angularjs 随记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

RequireJS

2 篇文章 0 订阅

订阅专栏

JS结构：

main.js

/**
 * main.js这个文件完成的事情简单来说就是：载入所有文件，然后在document上运行Angular并将ng-app属性设置为’app’。
 * 这些文件因为是由RequireJS异步载入，因此我们需要来“手动启动”Angular应用。
 *
 * */

require.config({
    paths: {
        //库文件
        //"responsive": "lib/responsive-nav",
        "angular": "lib/angular",
        "bootstrap": "lib/bootstrap.min",
        "angularRoute": "lib/angular-route",
        "angularResource": "lib/angular-resource",
        //"ui-bootstrap": "lib/ui-bootstrap-tpls-0.11.0.min",
        //"phprpc": "lib/phprpc_client",
        "jquery": "lib/jquery.min"
    },
    shim: {
        angular: {
            exports: "angular"
        },
        angularRoute: {
            deps: ["angular"]
        },
        angularResource: {
            deps: ['angular']
        }
    },
    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用
});



//手动启动ng
define(["routes"], function () {
    //使用bootstrap方法启动Angular应用
    angular.bootstrap(document, ["app"]);
});

routes.js

/**
 * routes.js
 */

define([
    "app"
], function (app) {

    //app是Angular应用对象
    app.config(['$routeProvider',
        function ($routeProvider) {

            $routeProvider
                .when('/search', {
                    templateUrl: 'template/search.html',
                    controller: 'SearchCtrl'
                })
                .otherwise({ redirectTo: '/LmpSumQut' });

        }]);

})

app.js

/**
 * app.js
 */

define(
    [
        'angular',
        'angularResource',
        'angularRoute',
        'controllers/index',
        'services/index'
    ], function (angular) {
        return angular.module('app', ['ngRoute', 'ngResource', 'controllers', 'services']);
    }
)

controllers/index.js

define([
  'controllers/homeController'
], function () {
    // 此处为空,这个文件主要是控制当控制器比较多时可以都加载完毕
});

controllers/homeController.js

define(['controllers/controllers'],
    function (controllers) {
        controllers.controller('homeController', ['$scope', 'homeService',
           function ($scope, homeService) {

               $scope.resultValue = homeService.Post(
                   [{
                       "QuoteNo": "11111",
                       "OrgZ": "洲",
                       "OrgG": "国",
                       "Sales": "admin",
                       "ContractNo": "20140805000",
                       "FeeNos": "11|22|33|44"
                   }], function () {
                       alert($scope.resultValue.Msg);
                   }
               );
           }
        ]);
    });

controllers/controllers.js

define(
    ['angular'],
    function (angular) {
        return angular.module('controllers', []);
    }
);

services/index.js

/**
 * index.js
 */
define([
  'services/homeService'
], function () {
    // 此处为空,这个文件主要是控制当控制器比较多时可以都加载完毕
});

services/homeService.js

define(['services/services'],
    function (services) {
        services.factory('homeService', ['$resource',
            function ($resource) {
                return $resource("../api/BoCtnQutMain/", {}, {
                    Post: { method: "Post" },
                    PostArray: { method: "Post",isArray:true }
                });
            }
        ])
    });

services/services.js

define(['angular'], function (angular) {
    return angular.module('services', ['ngResource']);
});

测试页：

<body>
    <span ng-controller="homeController">{{resultValue.Msg}}</span>
    
    <script src="js/lib/require.js" data-main="js/main"></script>
</body>

加载顺序：

主要看 define里面的第一个参数，看它依赖谁

首先程序进入加载require.js，

然后再进入main.js 可以看出main.js是依赖与routes.js 所以需要先加载routes.js

-->routes.js routes.js又是依赖于app.js 。。。下同

-->app.js

-->angular、angularResource、angularRoute、controllers/index.js、services/index.js//这里的angularResource、angularRoute与main.js里面配置的要一致

-->controllers/homeController.js

-->controllers/controllers.js

-->services/homeService.js

-->services/services.js

这样就全部加载完了，弄清楚顺序就不太复杂。