I use requirejs for loading angular and angular's modules.
I want to require all necessary modules (e.g. angular-sanitize.js) together.
In my require.config I define following rule:
require.config({
path: {
'angular':'libs/angular-modules'
},
shim: {
'angular': {
deps: ['libs/angular'],
exports: 'angular'
},
...
}
});
And in libs/angular-modules.js I define following module:
define(
[
'libs/angular-sanitize',
'libs/angular-animate'
],
function () {
return angular;
}
);
I expect that at the time of loading modules angular.js will already be loaded. But sometimes I get error:
Cannot read property '$$minErr' of undefined angular-sanitize.js:8
This is the eighth line of the angular-sanitize.js:
var $sanitizeMinErr = angular.$$minErr('$sanitize');
So it means that the angular.js file was not loaded but in network tab i see that it was.
I guess that at the time of initializing angular-sanitize module angular.js was loaded but was not initialized (window.angular has not yet been defined).
How I can determine that angular has been initialized?
I would expect to see a shim for angular-sanitize in your RequireJS configuration:
shim: {
... [whatever you already have] ,
'angular-sanitize': {
deps: ['angular'],
},
}
I have not put an exports option because I'm unsure what would make sense there. For AngularJS modules I would not expect anything to be required for exports.
The general rule of thumb is if you open the library's source and cannot find that it calls define by itself, then it needs a shim. angular-animate probably also needs a shim.
You can lazy load your dependencies in the route configuration resolve. Return a promise, and use Require to first load those dependencies, then resolve the promise:
.when('/login', {
templateUrl: appConfig.getUrl('login'),
resolve: { load: ['$q', '$rootScope', '$log', function ($q, $rootScope, $log) {
var deferred = $q.defer();
require(appConfig.getDeps('login'), function () {
$rootScope.$apply(function () {
forms.hideError();
deferred.resolve();
});
});
return deferred.promise;
}]
}
})
AngularJs does not support lazy loading ... yet.
There are a few things floating around the internet that supposedly allow lazy loading, but in my opinion they are messy and overly bloated for minimal benefit
requireJS will not work with angular for this reason
Related
I'm working on a huge Web App (AngularJS and RequireJS), in which there are a lot of JS files. (So many Controllers, Filters, Services and so many 3rd party plugins). The problem that I face is, my App takes too much time to download all the files (at once) each time I refresh my App. Can we use any strategy by which we configure our require JS in a way that only the required files should be donwloaded instead of All files?
Currently my Require JS is configured this way:
reqire.config({
paths: {
angular: '../../',
jquery: '../../', .......
}, shim: {
bootstrap: {
deps: ['jquery']
}.........................
});
You may also want to look at ocLazyLoad for your lazy loading needs- link
One strategy is to require the loading of plugins in ui-router's Resolve call. This will load the required dependencies for a view/state before attempting to transition to it, and is promise-aware to ensure that everything loads in the right order.
.state('myState', {
url: '/myState',
template: '<div ui-view class="fade-in"></div>',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load(['scripts/controllers/myController.js']);
}]
}
})
You can also use it to load multiple files if you so require.
.state('ui.map.google', {
url: '/google',
templateUrl: 'views/ui/map/google.html',
controller: 'GoogleMapCtrl',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load( [
{
files: ['vendor/jquery/load-google-maps.js',
'scripts/controllers/googlemap.js']
},
{
name:'ui.map',
files:['vendor/modules/angular-ui-map/ui-map.js']
}
]).then(
function(){
return loadGoogleMaps();
}
)
}]
}
})
You don't need to do anything special in the controller to make this work, and the ocLazyLoad plugin is very configurable (you can set up manifests/packages, etc).
I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is.
So I've tried to convert my code to suit requireJS now.
This is my main.js
requirejs.config({
baseUrl: "js",
paths: {
jquery:'jquery-1.7.min',
angular: 'angular',
angularRoute:'angular-route',
mainApp:'AngularApp/app'
},
priority:['angular'],
shim:{
angularRoute:{
deps:["angular"]
},
mainApp:{
deps:['angularRoute']
}
}});
require(['angular','angularRoute', 'mainApp'],
function(angular, angularRoute, app)
{
angular.bootstrap(document, ['ServiceContractModule']);
});
This is my app.js
define(['angular',
'angularRoute',
'AngularApp/services',
'AngularApp/directives',
'AngularApp/controllers'],
function(angular, angularRoute, services, directives, controllers)
{
console.log("sup");
var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
serviceContractModule.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/contractNumber/:contractNumbers', {
controller : 'ContractController',
templateUrl : './contractSearchResult',
reloadOnSearch : true
}).when('/serialNumber/:serialNumbers', {
controller : 'SerialController',
templateUrl : './serialSearchResult'
}).when('/QuoteManager',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerView'
}).when('/QuoteManagerHome',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerHome'
});
});
return serviceContractModule;
});
This is my directives.js file
define(['angular',
'AngularApp/Directives/tableOperations',
'AngularApp/Directives/line',
'AngularApp/Directives/listOfValues'],
function(
angular,
tableOperations,
line,
listOfValues)
{
var directiveModule = angular.module('ServiceContractModule.directives');
directiveModule.directive('tableoperations', tableOperations);
directiveModule.directive('line', line);
directiveModule.directive('listOfValues', listOfValues);
return directiveModule;
}
)
And this is my services.js file
define(['angular',
'AngularApp/Services/quoteManagerSearch'],
function(angular, quoteManagerSearch)
{
var serviceModule = angular.module('ServiceContractModule.services');
serviceModule.factory('searchRequestHandler', quoteManagerSearch);
return serviceModule;
}
)
When I run my page, the current error I am getting is
Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14
Uncaught TypeError: Cannot read property 'module' of undefined services.js:5
This seems to be happening on this particular line
var directiveModule = angular.module('ServiceContractModule.directives');
I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome.
Any ideas guys? Need quick help! Thanks!
Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' define so you need a shim for it. Add this to your shim configuration:
angular: {
exports: "angular"
}
By the way, the priority field in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because priority is supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor priority but would ignore the shim field because shim was introduced in 2.x. My suggestion: use RequireJS 2.x and remove priority.
There are 2 possible problems with your setup:
1. You are bootstrapping angular in your main.js and then loading the dependencies.
2. You should be referencing the dependency using string
So, after removing the angular.bootstrap from your main.js, try the following:
app.js
define([
'AngularApp/services',
'AngularApp/directives',
'AngularApp/controllers'],
function()
{
console.log("sup");
var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', 'ServiceContractModule.services', 'ServiceContractModule.directives', '<<Your Controller Module Name>>' ]);
serviceContractModule.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/contractNumber/:contractNumbers', {
controller : 'ContractController',
templateUrl : './contractSearchResult',
reloadOnSearch : true
}).when('/serialNumber/:serialNumbers', {
controller : 'SerialController',
templateUrl : './serialSearchResult'
}).when('/QuoteManager',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerView'
}).when('/QuoteManagerHome',{
controller : 'QuoteManagerController',
templateUrl: './quoteManagerHome'
});
});
angular.bootstrap(document, ['ServiceContractModule']);
});
Check out angularAMD that I created to help the use of RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
I am using RequireJS for large apps to manage 3rd party dependencies. It handles dependencies on the fly and helps a great deal with dependency management and modularization.
Can Angular do something like this, or does it make sense to integrate it with RequireJS? I would like to lazy-load 3rd party or custom dependencies as needed (compiling options like RequireJS optimizer would be nice too). Any advise or experience would be appreciated!
I use RequireJS, it's pretty straight forward:
require: require.config({
paths: {
jquery: '/assets/js/jquery',
"jquery.bootstrap": '/assets/js/bootstrap.min',
angular: '/js/libs/angular/angular',
sanitize: '/js/libs/angular/angular-sanitize',
text: '/js/libs/require/text',
async: '/js/libs/async/async',
moment: '/assets/js/moment.min'
},
baseUrl: '/js',
shim: {
'angular': {'exports' : 'angular'},
'sanitize': {'exports' : 'sanitize', deps: ['angular']},
'jquery.bootstrap': {deps: ['jquery']},
},
priority: [
"angular"
]
});
require(['jquery', 'angular', 'app'], function($, angular, app){
$(document).ready(function () {
var $html = $('html');
angular.bootstrap($html, [app['name']]);
$html.addClass('ng-app');
});
});
Then inside a file called app (depended on by the first require statement) I have
define(['angular','sanitize'], function (angular, sanitize) {
'use strict';
return angular.module('myApp', ['ngSanitize']);
});
Using RequireJS with AngularJS makes sense but only if you understand how each of them works regarding dependency injection, as although both of them injects dependencies, they inject very different things.
AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. Let's say you created a "first" module that implements an AngularJS filter "greet":
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
And now let's say you want to use the "greet" filter in another module called "second" that implements a "goodbye" filter. You may do that injecting the "first" module to the "second" module:
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
The thing is that in order to make this work correctly without RequireJS, you have to make sure that the "first" AngularJS module is loaded on the page before you create the "second" AngularJS module. Quoting documentation:
Depending on a module implies that required module needs to be loaded
before the requiring module is loaded.
In that sense, here is where RequireJS can help you as RequireJS provides a clean way to inject scripts to the page helping you organize script dependencies between each other.
Going back to the "first" and "second" AngularJS modules, here is how you can do it using RequireJS separating the modules on different files to leverage script dependencies loading:
// firstModule.js file
define(['angular'], function(angular) {
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
});
// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
});
You can see that we are depending on "firstModule" file to be injected before the content of the RequireJS callback can be executed which needs "first" AngularJS module to be loaded to create "second" AngularJS module.
Side note: Injecting "angular" on the "firstModule" and "secondModule" files as dependency is required in order to use AngularJS inside the RequireJS callback function and it have to be configured on RequireJS config to map "angular" to the library code. You may have AngularJS loaded to the page in a traditional manner too (script tag) although defeats RequireJS benefits.
More details on having RequireJS support from AngularJS core from 2.0 version on my blog post.
Based on my blog post "Making sense of RequireJS with AngularJS", here is the link.
In my project I want to use RequireJS and bootstrap my app as follows:
requirejs.config({
baseUrl: 'scripts/vendor',
paths: {
jquery: [
'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
'jquery'
],
angular: [
'http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min',
'angular'
],
app: '../app'
}
});
require(['require', 'jquery', 'angular', 'app'], function(require, $, angular, app) {
console.log(require);
console.log($);
console.log(angular);
console.log(app);
});
On my index.html only RequireJS is loaded via script tag, where the RequireJS loads the above code.
What works:
- in my Network monitor I can see that RequireJS, jQuery, Angular and app are loaded
- The console.log messages print correct for require, jQuery and app
The angular object is somehow undefined. But if I don't load it from CDN and use my local load, it works! The local file is a RequireJS wrapper that looks like this:
define(['/components/angular/angular.min.js'], function () {
return angular;
});
How do I get this work with Angular'S CDN? Or does this depend on support from Angular?
First, you are confusing "paths" with "shim"
Path is good, don't go for "shim" behavior. But, you need to make your "paths" proper:
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
// NOTE: angular is "plain JS" file
angular: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min',
app: '../app'
}
Then, you need to let go of the need to have something returned to you... Just "use the force, Luke" :) and expect the right globals to be there when you need them:
require(['jquery', 'app', 'angular'], function($, app, thisValueDoesNotMatter) {
// you don't need to wrap "require" Just use global
console.log(require);
console.log($);
console.log(app);
// note, angular is loaded as "plain JavaScript" - not an AMD module.
// it's ok. It returns "undefined" but we just don't care about its return value
// just use global version of angular, which will be loaded by this time.
// because you mentioned it in your dependencies list.
console.log(window.angular);
});
I am totally new to RequireJS so I'm still trying to find my way around it. I had a project that was working perfectly fine, then I decided to use RequireJS so I messed it up :)
With that out of the way, I have a few questions about RequireJS and how it figures out everything. I have the file hierarchy inside the scripts folder:
I have the following line inside my _Layout.cshtml file:
<script data-main="#Url.Content("~/Scripts/bootstrap.js")" src="#Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script>
And here's my bootstrap.js file:
require.config({
shim: {
'jQuery': {
exports: 'jQuery'
},
'Knockout': {
exports: 'ko'
},
'Sammy': {
exports: 'Sammy'
},
'MD': {
exports: 'MD'
}
},
paths: {
'jQuery': 'jquery-1.8.1.min.js',
'Knockout': 'knockout-2.1.0.js',
'Sammy': 'sammy/sammy.js',
'MD': 'metro/md.core.js',
'pubsub': 'utils/jquery.pubsub.js',
'waitHandle': 'utils/bsynchro.jquery.utils.js',
'viewModelBase': 'app/metro.core.js',
'bindingHandlers': 'app/bindingHandlers.js',
'groupingViewModel': 'app/grouping-page.js',
'pagingViewModel': 'app/paging-page.js'
}
});
require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) {
BindingHandlers.init();
$(window).resize(function () {
waitHandle.waitForFinalEvent(function () {
MD.UI.recalculateAll();
}, 500, "WINDOW_RESIZING");
});
var viewModelBase = Object.create(ViewModelBase);
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) {
BindingHandlers.init();
var viewModelBase = new ViewModelBase();
ko.applyBindings(viewModelBase);
viewModelBase.initialize();
});
Then I implemented my modules by using the define function. An example is the pubsub module:
define(['jQuery'], function ($) {
var
publish = function(eventName) {
//implementation
},
subscribe = function(eventName, fn) {
//implementation
}
return {
publish: publish,
subscribe: subscribe
}
});
I've basically done the same thing to all of my javascript files. Note that the actual file containing the pubsub module is jquery.pubsub.js inside the /Scripts/utils folder. This is also the case with other modules as well.
UPDATE:
Ok I updated my bootstrap file now that I think I understand what a shim is and why I should be using it. But it's still not working for me, although I've also declared all the paths that I think would've caused me trouble in getting them right. The thing is that it's not even going into my require callback inside the bootstrap file, so I guess I still have a problem in the way I'm configuring or defining my modules?
Well, for one, if you are going to use a non-amd library, say jQuery, with require and have the jQuery function passed to the callback, you need to specify a shim with exports in your require config, like so:
require.config({
shim: {
jQuery: {
exports: '$'
}
},
paths: {
jQuery: 'jquery-1.8.1.min.js',
}
});
Other than that I'm not sure I understand what your issue is exactly.
If you are using ASP.NET MVC take a look at RequireJS for .NET
The RequireJS for .NET project smoothly integrates the RequireJS framework with ASP.NET MVC on the server side using xml configuration files, action filter attributes, a base controller for inheritance and helper classes.
I did not completely understand what the problem is. But if it relates to JS libraries to be loaded with require.js then this boot file works for me:
require.config({
paths: {
"jquery": "/scripts/jquery-1.8.2",
"sammy": "/scripts/sammy-0.7.1"
},
shim: {
"sammy": {
deps: ["jquery"],
exports: "Sammy"
}
}
});
require(["jquery", "sammy"], function ($) {
$(document).ready(function () {
alert("DOM ready");
});
});
Please, note, there is no '.js' in paths.
BTW, if you use MVC 4, you don't need #Url.Content in 'href' and 'src' any more.