zoukankan      html  css  js  c++  java
  • Integrating AngularJS with RequireJS

    Integrating AngularJS with RequireJS

    When I first started developing with AngularJS keeping my controllers and directives in separate .js files for better maintainability I ended up including lots of .js files on my pages. This approach has led to some obvious drawbacks. For example, each of these files will have to be minified or combined before deployment to save bandwidth. There's also little control over load order and inter-dependencies between them, like AngularJS must be available before module can be created, and module must be present before one could attach controllers to it. So was looking for a clean solution to this problem, and that's whereRequireJS came in.

    How to combine them? I'll start by writing RequireJS module that exports AngularJS module which can be used to connect controllers to. Before that however there's some configuration needed on RequireJS side, as it needs to find AngularJS as it's dependency:

    require.config({
        baseUrl: "/assets/javascripts",
        paths: {
            "angular": "libraries/angular",
            "angular-resource": "libraries/angular-resource",
        },
        shim: {
            "angular": {
                exports: "angular"
            },
            "angular-resource": {
                deps: ["angular"]
            },
        }
    });
    

    This is required for anything that is not a RequireJS module (or to be more specific, a module which is non AMD-compliant). What I do here is that I specify paths on where angular.js and angular-resource.js can be found and the property name for each path defines a module name for RequireJS to recognize it by. Notice there are omitted file extensions (.js) and it's not a mistake, you can see RequireJS docs why as it's irrelevant here. The shim section specifies dependencies between the modules we just defined. Additionally, for angular.js an exports property is required to give a variable name under whichAngularJS API will be available.

    Now I can create AngularJS module and export it as RequireJS module:

    define("app", ["angular", "angular-resource"], function(angular) {
        var app = angular.module("app", ["ngResource"] );
        // you can do some more stuff here like calling app.factory()...
        return app;
    });
    

    What it does is that it defines module app that requires module angular and angular-resource, and after they load, the function is executed with angular parameter that is needed to access AngularJS API (see exports property in configuration above). Inside this function we create angular module app and return it, so it can be available to controllers.

    How to write AngularJS controller then?

    require(["app"], function(app) {
        app.controller(
            "HelloController",
            function($scope) {
                $scope.sayHello = function() {
                    return "Hello";
                }
            }
        );
    });
    

    Again, it says it requires our app module and after it loads it executes function with app parameter, which is in turn ourAngularJS app module. Having that I can write my controller as normal.

    In usual AngularJS applications there are multiple controllers or directives needed on one page. To put it all together I can define a module that is dependent on all of them, like:

    require([
        "app",
        "controllers/controller",
        "controllers/another-controller",
        "directives/directive"
    ]);
    

    Practically it's a single require statement listing all of the things I need in one place. No function defined as none is needed. Now having a page with some AngularJS markup utilizing those directives/controllers all I have to do is to put:

    <script type="text/javascript" data-main="/assets/javascripts/atask" src="/assets/javascripts/require.js"></script>
    

    That way my foo.js will be loaded and all dependencies pulled and initialized.

  • 相关阅读:
    使用 DataAdapter 执行批量更新 [摘自MSDN]
    深入浅出net泛型编程
    模版页中引用文件路径的问题
    查询SQLSERVER某个表所占用空间大小的SQL语句
    如何获取SQL Server数据库里表的占用容量大小的存储过程
    确定计算机是否可以运行 Windows Vista? 操作系统
    SQL语句 [转]
    SQLServer中如何将一个字段的多个记录值合在一行显示
    ASP.net在页面所有内容生成后、输出内容前对页面内容进行操作
    oracle 删除用于及其表空间
  • 原文地址:https://www.cnblogs.com/uchenm/p/4976769.html
Copyright © 2011-2022 走看看