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.

Integrating AngularJS with RequireJS的更多相关文章

  1. AngularJS与RequireJS集成方案

    关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianContr ...

  2. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

  3. AngularJS - 使用RequireJS还是Browserify?

    http://www.html-js.com/article/2126 AngularJS - 使用RequireJS还是Browserify? AngularJS之所以吸引了很多开发者的关注,很大一 ...

  4. AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service

    一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...

  5. angularjs集成requirejs

    其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...

  6. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  7. angularJS和requireJS和angularAMD

    最近因为要用到angularJS开发项目,因为涉及到的静态资源比较多,所以想把js文件通过requireJS来按需加载,这两个框架以前都使用过,但是结合到一起还没有用过,那就试一下,看能否达到目的. ...

  8. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

  9. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

随机推荐

  1. 【转】Python 日期和时间

    本文转自:http://www.runoob.com/python/python-date-time.html Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Pytho ...

  2. linux主要的发行版及其区别和联系

    1. 主要发行版 linux主要发行版有3类: (1).Debian (2).Slackware (3).Redhat (1)Debian Ubuntu 针对桌面和服务器 knopix 以安全著称 ( ...

  3. java中的成员变量和局部变量区别

    1.作用域不同 成员变量的作用域在整个类内部都是可见,可用的: 局部变量的作用域仅限于定义它的方法,不能被其它方法调用: 2.初始值不同 java会给成员变量一个初始值,初始值为0: java不会给局 ...

  4. git pull提示当前不在某个分支上

    $ git pull You are not currently on a branch, so I cannot use any 'branch.<branchname>.merge' ...

  5. Android百度地图附加搜索和公交路线方案搜索

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 综述: 今 ...

  6. Oracle 乱码

    导入DMP之后 ..... 1.Oacle数据库表中数据乱码 请检查导出DMP的ORACLE数据库编码设置 修改ORACLE编码与原DMP导出编码一致 select userenv('language ...

  7. 使用curl传递cookie错误的问题

    工作中发现一个问题, 通过curl调用接口传递cookie操作用户的数据, 接口的程序解析不了cookie中的数据. 经过排查发现curl发送的cookie数据为 TZ+Gn+rEk+6G4d 而接口 ...

  8. struts下ajax提交与页面进行提示 返回值为null

    @Override    public String execute() throws Exception {        if ("none".equals(task)) {  ...

  9. C#/ASP.NET MVC微信公众号接口开发之从零开发(四) 微信自定义菜单(附源码)

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  10. tomcat重启脚本

    #!/bin/bashPATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/binexport JAVA_HOME=/opt/jd ...