http://www.sitepoint.com/using-requirejs-AngularJS-applications/

While writing large JavaScript applications, one of the simplest things one can do is divide the code base into several files. Doing this improves maintainability of the code but increases the chances of missing or misplacing the script tag on your main HTML document. Keeping track of the dependencies becomes difficult as the number of files increases. This issue persists in large angularjs applications as well. We have a number of tools in place that take care of loading dependencies in the application.

In this article, we will see how to use RequireJS with AngularJS to make the job of loading dependencies simpler. We’ll also examine how to use Grunt to generate combined files containing the RequireJS modules.

A Brief Introduction to RequireJS

RequireJS is a javascript library that helps in lazily loading JavaScript dependencies. Modules are just JavaScript files with some RequireJS syntactic sugar in them. RequireJS implements Asynynchronous Modules specified by CommonJS. RequireJS offers simple APIs to create and refer to modules.

RequireJS needs a main file that contains the basic configuration data such as paths to modules and shims. The following snippet shows the skeleton of a main.js file:

require.config({
map:{
// Maps
},
paths:{
// Aliases and paths of modules
},
shim:{
// Modules and their dependent modules
}
});

All modules in the application need not be specified in the paths section. Others can be loaded using their relative paths. To define a module, we need to use the define() block.

define([
// Dependencies
], function(
// Dependency objects
){ function myModule() {
// Can use the dependency objects received above
} return myModule;
});

A module may have some dependent modules. In general, an object is returned at the end of a module, but it is not mandatory.

Angular’s Dependency Injection vs RequireJS Dependency Management

One of the common questions that I hear from Angular developers regards the difference between Angular’s dependency management and that of RequireJS. It is important to remember that the purpose of both the libraries is totally different. The dependency injection system built into AngularJS deals with the objects needed in a component; while dependency management in RequireJS deals with the modules or, JavaScript files.

When RequireJS attempts to load a module, it checks for all dependent modules and loads them first. Objects of loaded modules are cached and they are served when same modules are requested again. On the other hand, AngularJS maintains an injector with a list of names and corresponding objects. An entry is added to the injector when a component is created and the object is served whenever it is referenced using the registered name.

Using RequireJS and AngularJS together

The downloadable code included with this article is a simple application containing two pages. It has the following external dependencies:

  • RequireJS
  • jQuery
  • AngularJS
  • Angular Route
  • Angular Resource
  • Angular UI ngGrid

These files should be loaded directly on the page in the order they are listed here. We have five custom script files containing code of the required AngularJS components. Let’s take a look at how these files are defined.

Defining AngularJS Components as RequireJS Modules

Any AngularJS component consists of:

  • A function definition
  • Dependency Injection
  • Registering to an Angular module

Out of the above three tasks, we will perform the first two tasks inside the individual modules, while the third task will be performed in a separate module that is responsible for creating the AngularJS module.

First, let’s define a config block. The config block doesn’t depend on any other blocks, and returns the config function in the end. But, before we load config module inside another module, we need to load everything that is needed for the config block. The following code is contained in config.js:

define([],function(){
function config($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
.when('/details/:id',{templateUrl:'templates/ideaDetails.html', controller:'ideaDetailsController'})
.otherwise({redirectTo: '/home'});
}
config.$inject=['$routeProvider']; return config;
});

Notice the way dependency injection is performed in the above snippet. I used $inject to get the dependencies injected as the config function defined above is a plain JavaScript function. Before closing the module, we return the config function so that it can be sent to the dependent module for further use.

We follow the same approach for defining any other type of Angular component as well, as we don’t have any component specific code in these files. The following snippet shows the definition of a controller:

define([], function() {
function ideasHomeController($scope, ideasDataSvc) {
$scope.ideaName = 'Todo List';
$scope.gridOptions = {
data: 'ideas',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'technologies', displayName: 'Technologies'},
{field: 'platform', displayName: 'Platforms'},
{field: 'status', displayName: 'Status'},
{field: 'devsNeeded', displayName: 'Vacancies'},
{field: 'id', displayName: 'View Details', cellTemplate: '<a ng-href="#/details/{{row.getProperty(col.field)}}">View Details</a>'}
],
enableColumnResize: true
};
ideasDataSvc.allIdeas().then(function(result){
$scope.ideas=result;
});
} ideasHomeController.$inject=['$scope','ideasDataSvc']; return ideasHomeController;
});

The Angular module for the application depends on each of the modules defined up to this point. This file gets objects from all other files and hooks them with an AngularJS module. This file may or may not return anything as the result of this file, the Angular module can be referenced from anywhere usingangular.module(). The following code block defines an Angular module:

define(['app/config',
'app/ideasDataSvc',
'app/ideasHomeController',
'app/ideaDetailsController'], function(config, ideasDataSvc, ideasHomeController, ideaDetailsController){
var app = angular.module('ideasApp', ['ngRoute','ngResource','ngGrid']);
app.config(config);
app.factory('ideasDataSvc',ideasDataSvc);
app.controller('ideasHomeController', ideasHomeController);
app.controller('ideaDetailsController',ideaDetailsController);
});

The Angular application cannot be bootstrapped using the ng-app directive as the required script files are loaded asynchronously. The right approach here is to use manual bootstrapping. This has to be done in a special file called main.js. This needs the file defining the Angular module to be loaded first. The code for this file is shown below.

require(['app/ideasModule'],
function() {
angular.bootstrap(document, ['ideasApp']);
}
);

Configuring Grunt to Combine RequireJS Modules

While deploying a JavaScript heavy application, the script files should be combined and minified to optimize download speed of the script files. Tools like Grunt come handy to automate these tasks. It has a number of tasks defined to make any process of front-end deployment easier. It has a task, grunt-contrib-requirejs for combining RequireJS files modules in the right order and then minifying the resulting file. Just like any other grunt task, it can be configured to behave different for each stage of deployment. The following configuration can be used in the demo application:

requirejs: {
options: {
paths: {
'appFiles': './app'
},
removeCombined: true,
out: './app/requirejs/appIdeas-combined.js',
optimize: 'none',
name: 'main'
},
dev:{
options:{
optimize:'none'
}
},
release:{
options:{
optimize:'uglify'
}
}
}

This configuration would produce an unminified file when Grunt is run with the dev option, and a minified file when grunt is run with the release option.

Conclusion

Managing dependencies becomes challenging when the size of the application grows beyond a certain number of files. Libraries like RequireJS make it easier to define the dependency and not worry about the order of loading of the files. Dependency management is becoming an integral part of the JavaScript applications. AngularJS 2.0 is going to have built-in support for AMD.

Using RequireJS in AngularJS Applications的更多相关文章

  1. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  2. 关于RequireJS与AngularJS的集成文档

    为什么要整合RequireJS RequireJS是一个Javascript 文件和模块框架,通过模块的方式来配置js文件之间的依赖关系,遵守的是CommonJS的AMD标准. 在开发的时候则无需关注 ...

  3. Integrating AngularJS with RequireJS

    Integrating AngularJS with RequireJS When I first started developing with AngularJS keeping my contr ...

  4. AngularJS快速入门指南12:模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  5. angularjs与require的集成摘抄

    基于requireJS和angularJS的前端技术架构 :http://blog.163.com/liuyong_xiaxia/blog/static/17435525520156341446981 ...

  6. AngularJS快速入门指南05:控制器

    AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS app ...

  7. AngularJS快速入门指南02:介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...

  8. trackr: An AngularJS app with a Java 8 backend – Part II

    该系列文章来自techdev The Frontend 在本系列的第一部分我们已经描述RESTful端建立在Java 8和Spring.这一部分将介绍我们的第一个用 AngularJS建造的客户端应用 ...

  9. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

随机推荐

  1. design principle:java 回调与委派/委托机制

    博客 design principle:模拟 android Button 控件点击事件 主要说了一下模拟 android 的 Listener 模式,其实这就是一种委派与回调机制的体现. 委派,也可 ...

  2. C算法分解质因数与分解因子

    ) ) printf("%d ",i); } }

  3. Spring Security3 - MVC 整合教程

    下面我们将实现关于Spring Security3的一系列教程.  最终的目标是整合Spring Security + Spring3MVC  完成类似于SpringSide3中mini-web的功能 ...

  4. gcov 统计 inline 函数

    gcov 统计 inline 函数 (金庆的专栏) gcov可以统计 inline  函数,可是实际使用中碰到统计次数总是为0的现象. 假设类A的头文件为 A.h, 实现文件为 A.cpp. A 有几 ...

  5. jquery easyui datagrid 分页实现---善良公社项目

    接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...

  6. 【Django】优化小技巧之清除过期session

    事情是这样的,大概也就几万注册用户的站点(使用django1.6), session 存储在关系型数据库,这次上线之后发现session表几十万数据了,过期session没有被自动删除 思考 官网 s ...

  7. Dynamics CRM 系统自定义部分的语言翻译

    Dynamics CRM 自带语言切换功能,在官网下载所需语言包安装后,在设置语言中就能看到你所添加的语言,勾选要启用的语言应用即可,再打开系统设置--语言就能看到可更改用户界面语言的显示了. 但官方 ...

  8. Leetcode_128_Longest Consecutive Sequence

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43854597 Given an unsorted arra ...

  9. 禁用JavaScript控制台调试

    原文链接: Disable the User's JavaScript Console 原文日期: 2014年03月06日 翻译日期: 2014年03月07日 翻译人员: 铁锚 有几个巨头公司,即Fa ...

  10. Linux多线程编程初探

    Linux线程介绍 进程与线程 典型的UNIX/Linux进程可以看成只有一个控制线程:一个进程在同一时刻只做一件事情.有了多个控制线程后,在程序设计时可以把进程设计成在同一时刻做不止一件事,每个线程 ...