I am developing the app with angularjs and codeigniter. And I have done with it( DEMO app ), mostly.
What I want to do is: implement lazy loading or don't want to include all these files at start, just include when needed.
Here is my Layout HEAD tag including the required js and css files.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>UMS : Admin </title>
<!-- added for Angular JS -->
<link href="<?php echo base_url(); ?>angular/css/loading-bar.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/animation.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/angular-chart.css" rel="stylesheet">
<!-- added for Angular JS -->
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url(); ?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="<?php echo base_url(); ?>dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url(); ?>dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="<?php echo base_url(); ?>bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url(); ?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- jQuery -->
<script src="<?php echo base_url(); ?>bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript REMOVED -->
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url(); ?>dist/js/sb-admin-2.js"></script>
<!-------------Angular js------------------->
<script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
<!-- flash msg -->
<script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
<!-- flash msg -->
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
<!--loading bar-->
<!-- charts-->
<script src="<?php echo base_url();?>angular/js/chart.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-chart.min.js"></script>
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/es5-shim.js"></script><![endif]-->
<!-- charts-->
<!-- core angular APPLICATION specific -->
<script src="<?php echo base_url();?>angular/js/admin/demo_angular.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/app.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/demo-dropdown-controller.js"></script>
<!-- core angular APPLICATION specific -->
<!--Directives developed by VANESH -->
<script src="<?php echo base_url();?>angular/js/angular-directives.js"></script>
<!--Directives developed by VANESH -->
<!-- ui bootstrap pagination -->
<script src="<?php echo base_url();?>angular/js/ui-bootstrap-tpls-0.12.0.js"></script>
<!-- ui bootstrap pagination -->
<!-------------Angular js------------------->
Here is my app. js (just showing the structure or how i am injecting the dependancies)
/* this is the angular js file for our UMS */
var base_url="http://localhost/ums/";
/* angularapp (asssigned to html tag in view) */
/* angularControllers is module created in demo_angular.js */
var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']);
angularapp.config(['$routeProvider', function($routeProvider){
// routing configuration.......
}]);
Here is another js (demo_angular.js) where i have/had bunhch of controllers named as single module.
var base_url="http://localhost/ums/";
var angularControllers = angular.module('angularControllers', ['flash']);
angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash)
{/*...doing stuff...*/}
//other controllers same like above (edit user, all users, delete user, delete users...)
This app is working fine! Just there is need to implement lazy load(that i don't know).
Listen about Require.js.
Main Problem: How to use Require.js in this (my app: mentioned above).
Please do suggest some important with example.
IMPORTANT:
Is there anyone who can guide me (above) app specific? Means how my app.js and demo_angular.js will look like? how my main.js and require.js will look like? NOTE: I am injecting dependancies in app and controllers, dependancies in the sense services, directives, which are constructed or third party
There is a very good example which can help you?
Lazy Loading with Require js and Angualar js
Your main.js will look like
'use strict';
var app = angular.module('app', ['ngRoute']);
require js will look like
require.config({
baseUrl: './scripts/',
urlArgs: 'v=1.1',
waitSeconds: 200,
paths: {
'jquery': './libs/jquery.min',
'jquery-migrate.min': './libs/jquery-migrate.min',
'jquery-ui.min': './libs/jquery-ui.min',
'jquery.mobile.custom.min': './libs/jquery.mobile.custom.min',
'jquery.easyui.min': './libs/jquery.easyui.min',
'angular-resource': './libs/1.3.14/angular-resource.min',
'angular': './libs/1.3.14/angular.min',
'angular-route': './libs/1.3.14/angular-route.min',
'angular-animate': './libs/1.3.14/angular-animate.min',
'bootstrap': './libs/bootstrap',
'toastr': './modules/toastr',
'jsapi': './libs/jsapi',
'ngPopover': './modules/ngPopover',
'angular-file-upload': './modules/angular-file-upload',
'ckeditor': './javascripts/ckeditor4.4.7/ckeditor',
//'ng-infinite-scroll.min': './modules/ng-infinite-scroll.min',
'app': 'app',
'tr': './modules/tr',
'en': './modules/en',
'hi': './modules/hi',
'ru': './modules/ru',
'fr': './modules/fr',
'de': './modules/de',
}
});
require(
{
shim: {
//*************Jquery*****************
'angular-resource': {
deps: ['angular']
},
'angular-route': {
deps: ['angular']
},
'jquery-migrate.min': {
deps: ['jquery']
},
'jquery-ui.min': {
deps: ['jquery',
'jquery-migrate.min']
},
'jquery.easyui.min': {
deps: ['jquery',
'jquery-migrate.min']
},
'libs/shoppingCart': {
deps: ['jquery']
},
//Jquery ends
//************bootstrap**************
'bootstrap': {
deps: ['jquery',
'jquery-migrate.min',
'jquery-ui.min']
},
'javascripts/theme': {
deps: ['jquery', 'jquery-ui.min',
'javascripts/plugins/autosize/jquery.autosize-min',
'javascripts/plugins/charCount/charCount',
'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min',
//'javascripts/plugins/bootstrap_datetimepicker/bootstrap-datetimepicker',
'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker',
//'javascripts/plugins/common/bootstrap-wysihtml5',
'javascripts/plugins/nestable/jquery.nestable',
'javascripts/plugins/tabdrop/bootstrap-tabdrop',
//'javascripts/plugins/naked_password/naked_password-0.2.4.min',
'javascripts/plugins/datatables/jquery.dataTables.min',
'javascripts/plugins/datatables/jquery.dataTables.columnFilter',
'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min',
'javascripts/plugins/modernizr/modernizr.min']
},
//bootstrap ends
//***********plugins*****************
//'javascripts/plugins/msdropdown/jquery.dd': {
// deps: ['libs/jquery']
//},
'javascripts/plugins/select2/select2': {
deps: ['jquery',
'bootstrap']
},
'javascripts/plugins/timeago/jquery.timeago': {
deps: ['javascripts/theme']
},
'javascripts/plugins/autosize/jquery.autosize-min': {
deps: ['jquery']
},
'javascripts/plugins/charCount/charCount': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min': {
deps: ['jquery']
},
//'javascripts/plugins/common/wysihtml5.min': {
// deps: ['jquery']
//},
//'javascripts/plugins/common/bootstrap-wysihtml5': {
// deps: ['jquery', 'javascripts/plugins/common/wysihtml5.min']
//},
'javascripts/plugins/nestable/jquery.nestable': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_daterangepicker/bootstrap-daterangepicker': {
deps: ['jquery']
},
'javascripts/plugins/tabdrop/bootstrap-tabdrop': {
deps: ['jquery']
},
'javascripts/plugins/naked_password/naked_password-0.2.4.min': {
deps: ['jquery']
},
'javascripts/plugins/datatables/jquery.dataTables.min': {
deps: ['jquery']
},
'javascripts/plugins/datatables/jquery.dataTables.columnFilter': {
deps: ['jquery']
},
'javascripts/plugins/bootstrap_colorpicker/bootstrap-colorpicker.min': {
deps: ['jquery']
},
'javascripts/plugins/modernizr/modernizr.min': {
deps: ['jquery']
},
'javascripts/plugins/bootbox/bootbox.min': {
deps: ['jquery']
},
'javascripts/plugins/validate/jquery.validate.min': {
deps: ['jquery',
'jquery-ui.min',
'javascripts/theme']
},
'javascripts/plugins/FlowJs/flow': {
deps: ['jquery']
},
'javascripts/plugins/FlowJs/fusty-flow': {
deps: ['jquery',
'javascripts/plugins/FlowJs/flow']
},
'javascripts/plugins/FlowJs/fusty-flow-factory': {
deps: ['jquery']
},
'javascripts/plugins/validate/jquery.validate.min': {
deps: ['bootstrap']
},
'javascripts/plugins/validate/additional-methods': {
deps: ['javascripts/plugins/validate/jquery.validate.min']
},
'javascripts/JsCookies': {
deps: ['jquery']
},
'ckeditor' : {
deps: ['jquery']
},
//plugins end
//***********modules*****************
'modules/resettableForm': {
deps: ['angular']
},
'toastr': {
deps: ['jquery-migrate.min']
},
'modules/resettableForm': {
deps: ['angular',
'toastr']
},
'modules/angular-gettext': {
deps: ['angular']
},
'modules/angular-multi-select': {
deps: ['app']
},
'modules/common': {
deps: ['angular',
'toastr']
},
'modules/logger': {
deps: ['angular',
'modules/common']
},
'modules/ui-bootstrap-tpls-0.9.0': {
deps: ['angular',
'toastr']
},
'modules/bootstrap.dialog': {
deps: ['angular',
'modules/ui-bootstrap-tpls-0.9.0',
'modules/common']
},
'modules/translations': {
deps: ['app']
},
'modules/loading-bar': {
deps: ['app']
},
'angular-file-upload': {
deps: ['angular', 'toastr']
},
//'ng-infinite-scroll.min': {
// deps: ['angular']
//},
'ngPopover': {
deps: ['app']
},
//'modules/SharedServices': {
// deps: ['app']
//},
'modules/ng-flow': {
deps: ['app',
'angular']
},
'en': {
deps: ['app']
},
'fr': {
deps: ['app']
},
'de': {
deps: ['app']
},
'hi': {
deps: ['app']
},
//'modules/tr': {
// deps: ['app']
//},
'ru': {
deps: ['app']
},
'modules/paypalfactory': {
deps: ['app']
},
'angular-animate': {
deps: ['app']
},
//'modules/ngAutocomplete': {
// deps: ['app']
//},
'modules/bootstrap-select.min': {
deps: ['app']
},
//modules end
//***********Angular Common*****************
'app': {
deps: ['angular',
'angular-route',
'angular-resource',
'libs/Base64',
'libs/moment',
'modules/common',
'angular-file-upload']//,
//'modules/ngAutocomplete']
},
'routes': {
deps: ['app']
},
//Angular Common ends
//***********Angular Controllers***********
'controllers/manageEbayScheduledInventoryController': {
deps: ['app']
},
'jsapi': {
deps: ['app']
},
//'controllers/googleChartController': {
// deps: ['app', 'libs/jsapi']
//},
//Angular Controller ends
//***********Angular Services*************
'services/manageEbayScheduledInventoryService': {
deps: ['app']
},
//Angular Utility Services Ends
//Angular Filters
'filters/ellipsis': {
deps: ['app']
},
//Angular Filters ends
//Angular Directives
'directives/passwordValidate': {
deps: ['app']
},
}
},
// Including all of the modules to allow concencation and minification for deployment
[
//*************Jquery*****************'
'jquery', 'libs/moment', 'jquery.easyui.min',
//Jquery ends
//************bootstrap**************
'bootstrap', 'javascripts/theme', 'libs/shoppingCart',
//bootstrap ends
//***********plugins*****************
/*'javascripts/plugins/msdropdown/jquery.dd',*/ 'javascripts/plugins/select2/select2', 'javascripts/JsCookies', 'javascripts/plugins/bootbox/bootbox.min',
'javascripts/plugins/FlowJs/flow', 'javascripts/plugins/FlowJs/fusty-flow', 'javascripts/plugins/FlowJs/fusty-flow-factory',
'javascripts/plugins/validate/jquery.validate.min', 'javascripts/plugins/timeago/jquery.timeago','ckeditor',
//plugins end
//***********modules*****************
'toastr', 'modules/resettableForm', 'modules/angular-gettext', 'modules/angular-multi-select', 'modules/common', 'modules/logger',
'modules/ui-bootstrap-tpls-0.9.0', 'modules/bootstrap.dialog', 'modules/translations', 'ngPopover', //'modules/SharedServices',
'modules/ng-flow', 'en', 'de', 'fr', 'hi', 'ru', //'modules/tr',
'modules/paypalfactory', 'modules/loading-bar', 'angular-animate', 'modules/bootstrap-select.min', 'angular-file-upload', //'ng-infinite-scroll.min', //'modules/ngAutocomplete',
//modules end
//***********Angular Common*****************
'app', 'routes', 'jsapi',
//Angular Common ends
//***********Angular Controllers***********'controllers/supplierController',
'controllers/manageEbayScheduledInventoryController',
//Angular Controller ends
//***********Angular Services*************'services/supplierService','services/uploadManagerService','services/createPurchaseOrderService',
'services/manageEbayScheduledInventoryService',
//Angular Services ends
//Angular Utility Services Starts
'services/sortingService',
//Angular Utility Services Ends
//Angular filters
'filters/ellipsis', 'filters/currency',
//Angular filters ends
//Angular Directive
'directives/passwordValidate', 'directives/focus', 'directives/mypopover', 'directives/priceBox', 'directives/onDragStart'
],
function () {
angular.bootstrap(document, ['app']);
}
);
In reuire.js you can find how dependecy is working
'javascripts/plugins/timeago/jquery.timeago': {
deps: ['javascripts/theme']
},
Here javascripts/plugins/timeago/jquery.timeago depends on 'javascripts/theme'
You can refer this link also it is a very good example
Related
Is it possible to lazy load an angular application partially?
For instance, let's say I want to lazy load only a few libraries and a few angular modules (controllers, services) instead of lazy loading the entire application with the libraries.
Angular version is 1.x
Yes its possible, your require-config.js
require.config({
paths: {
'angular': 'bower_components/angular/angular.min',
'angular-animate': 'bower_components/angular-animate/angular-animate.min',
'angular-aria': 'bower_components/angular-aria/angular-aria.min',
'angular-cookies': 'bower_components/angular-cookies/angular-cookies.min',
'angular-messages': 'bower_components/angular-messages/angular-messages.min',
'angular-resource': 'bower_components/angular-resource/angular-resource.min',
'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
'angular-ui-router-extras': 'bower_components/ui-router-extras/release/ct-ui-router-extras.min',
'angular-sanitize': 'bower_components/angular-sanitize/angular-sanitize.min',
'angular-pagination': 'bower_components/angularUtils-pagination/dirPagination',
'angular-bootstrap': 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-uiSelect': 'bower_components/ui-select/dist/select.min',
'angular-loadingBar': 'bower_components/angular-loading-bar/build/loading-bar.min',
'angular-switch': 'bower_components/angular-ui-switch/angular-ui-switch.min',
'angular-tree': 'bower_components/bootstrap-tree/js/bootstrap-tree'
},
//resolve dependencies
shim: {
'angular': {exports: 'angular'},
'angular-animate': {deps: ['angular']},
'angular-aria': {deps: ['angular']},
'angular-cookies': {deps: ['angular']},
'angular-messages': {deps: ['angular']},
'angular-resource': {deps: ['angular']},
'angular-ui-router': {deps: ['angular']},
'angular-ui-router-extras': {deps: ['angular', 'angular-ui-router']},
'angular-sanitize': {deps: ['angular']},
'angular-pagination': {deps: ['angular']},
'angular-bootstrap': {deps: ['angular']},
'angular-uiSelect': {deps: ['angular']},
'angular-loadingBar': {deps: ['angular']},
'angular-switch': {deps: ['angular']},
'angular-tree': {deps: ['jquery']},
}
// set library priorities
priority: [
'angular'
],
//here you add your custom modules, just call the js "main.js" for each module
packages: [
{
name: 'home',
location: './src/module/home'// It has its own file main.js
},
{
name: 'login',
location: './src/modules/login'// It has its own file main.js
}
]
});
//inject modules and bootstrap the app
require([
'angular',
'main',
'type',
'angular-animate',
'angular-aria',
'angular-cookies',
'angular-messages',
'angular-resource',
'angular-ui-router',
'angular-ui-router-extras',
'angular-sanitize',
'angular-pagination',
'angular-bootstrap',
'angular-uiSelect',
'angular-loadingBar',
'angular-switch',
'angular-tree'
],
function(angular, main) {
//here bootstrap the angular app in your html, home.name is the array packages.
angular.module('myApp', [home.name]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
}
);
In your index.html add
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My app</title>
</head>
<!--The app is bootstrapped, you don't need ng-app -->
<body>
<!-- if you use router ui -->
<div ui-view></div>
<!-- data-main is the path to the require-config-->
<script type="text/javascript" data-main="require-config" src="bower_components/requirejs/require.js"></script>
</body>
</html>
Now in home/main.js
define(function(require) {
var angular = require('angular'),
moduleName = 'home';
angular
.module(moduleName, [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.select',
'ui-notification',
'angularUtils.directives.dirPagination',
'angular-loading-bar',
'uiSwitch',
'type'
])
.config(function($stateProvider, $urlRouterProvider, NotificationProvider, cfpLoadingBarProvider){
$urlRouterProvider
.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "src/main/views/main.html",
requireLogin: true
});
})
//Controllers
.controller('MainCtrl', ['$scope', require('./controllers/MainCtrl')])
.controller('NavCtrl', ['$scope', '$state', require('./controllers/NavCtrl')])
.controller('SideCtrl', ['$scope', '$state', require('./controllers/SideCtrl')])
//Also this works
.controller('SideCtrl', ['$scope', '$state', funtion($scope, $state){
//your code here
}])
//Sidebar & Navbar
.directive('navbar', require('./directives/NavbarDirective'))
.directive('sidebar', require('./directives/SidebarDirective'))
//Services
.factory('customNotifications', ['Notification', require('./services/notificationsFactory')])
.factory('errorsHandler', ['$location', 'authentication', 'customNotifications', require('./services/errorsFactory')])
;
return {
name: moduleName,
ngModule: angular
};
});
I have app.js file with the following config:
require.config({
paths: {
// vendors
'angular': 'vendor/angular',
'ngResource': 'vendor/angular-resource.min',
'ngRoute': 'vendor/angular-route.min',
'ngAnimate': 'vendor/angular-animate.min'
},
shim: {
ngAnimate: {
deps: ['angular']
},
angular: {
deps: [],
exports: 'angular'
},
ngRoute: {
deps: ['angular']
},
ngResource: {
deps: ['angular']
}
},
baseUrl: 'scripts'
});
Now i'm trying to instantiate angular trough require:
define("app", ["angular", "ngResource"], function (angular) {
var app = angular.module("app", ["ngResource"]);
// you can do some more stuff here like calling app.factory()...
return app;
});
But it throws out:
Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I'm following this guide step-by-step.
What am i doing wrong here?
Here is the deal. I have a problem with using ui-bootstrap-tpls directives namely "pagination". Library is connected successfully in requirejs, you can see in the haed, but directive is not working.
<script type="text/javascript" data-requiremodule="angularBootstrap" src="/components/angular-bootstrap/ui-bootstrap-tpls.js">
<div ng-controller="myController">
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
</div>
here is requirejs:
requirejs.config({
baseUrl: '/',
paths: {
'angular': 'components/angular/angular',
'angularRoute': 'components/angular-route/angular-route',
'angularBootstrap': 'components/angular-bootstrap/ui-bootstrap-tpls',
},
shim: {
'angular': {
deps: [ 'jquery' ],
exports: 'angular'
},
'angularRoute': {
deps: [ 'angular' ]
},
'angularBootstrap': {
deps: ['angular']
},
}
});
and app.js:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute']);
});
app.js should be like this:
define(['angular', 'angularBootstrap', 'angularRoute'], function (angular) {
'use strict';
return angular.module('myModule', ['ngRoute','ui.bootstrap']);
});
in return angular.module it was necessary to add 'ui.bootstrap'
I am developing an aplication single page. I'm using Backbone.js and RequireJS.
The problem is that on one page I use 3 different models that are not interrelated. But always only loads the first.
page.html
<html><heade></heade><body>
<div id="content">
<div id="results"></div>
<div id="collectorTable">
<!-- the container that gets populated with the index -->
</div>
<div id="collectorEdition">
<!-- the container that gets populated with the edition -->
</div>
<div style="margin-top: 10px">
<div id="terms" style="width: 50%; float: left; height: auto !important; min-height: 100px;">
<div id="termTable"><!-- Term model index --></div>
<div id="termEdition"><!-- Term model edition --></div>
</div>
<div id="termsCampaign" style="width: 50%; float: left; height: auto !important; min-height: 100px;">
<div id="termCampaignTable"><!-- TermCampaign model edition --></div>
<div id="termCampaignEdition"><!-- TermCampaign model edition --></div>
</div>
</div>
</div>
<script data-main="js/mainCollector" src="js/libs/require.js"></script>
<script data-main="js/mainTerm" src="js/libs/require.js"></script>
<script data-main="js/mainTermCampaign" src="js/libs/require.js"></script>
</body>
</html>
mainCollector.js
require.config({
baseUrl: "js",
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min",
backbone: "libs/backbone.min",
utils: "utils",
//Files Collector
CollectorModel: "models/CollectorModel",
CollectorCollection: "collections/CollectorCollection",
CollectorRouter: "routers/CollectorRouter",
// Views
edit: "views/Collector/Collector_edit",
index: "views/Collector/Collector_index",
neww: "views/Collector/Collector_new",
row: "views/Collector/Collector_row",
show: "views/Collector/Collector_show",
//Templates
'templates': 'templates'
},
shim: {
jqueryui: {
deps: ["jquery"]
},
tablesorter: {
deps: ["jquery"],
exports: "TableSorter"
},
script: {
deps: ["jquery", "jqueryui", "tablesorter"],
exports: "Script"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(["backbone", "underscore", "CollectorCollection", "CollectorRouter", "script"],
function (Backbone, _, CollectorCollection, CollectorRouter) {
var Collectors = new CollectorCollection();
var router = new CollectorRouter({Collectors: Collectors});
Backbone.history.start();
});
mainTerm.js
require.config({
baseUrl: "js",
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min",
backbone: "libs/backbone.min",
utils: "utils",
//Files Term
termModel: "models/termModel",
termCollection: "collections/termCollection",
termRouter: "routers/termRouter",
// Views
...
//Templates
'templates': 'templates'
},
shim: {
...
}
});
require(["backbone", "underscore", "termCollection", "termRouter", "script"],
function (Backbone, _, TermCollection, TermRouter) {
var terms = new TermCollection();
var router = new TermRouter({terms: terms});
Backbone.history.start();
});
mainTermCampaign.js
require.config({
baseUrl: "js",
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min",
backbone: "libs/backbone.min",
utils: "utils",
//Files Term Campaign
termCampaignModel: "models/termCampaignModel",
termCampaignCollection: "collections/termCampaignCollection",
termCampaignRouter: "routers/termCampaignRouter",
// Views
...
//Templates
'templates': 'templates'
},
shim: {
...
}
});
require(["backbone", "underscore", "termCampaignCollection", "termCampaignRouter", "script"],
function (Backbone, _, TermCampaignCollection, TermCampaignRouter) {
var termsCampaign = new TermCampaignCollection();
var router = new TermCampaignRouter({termsCampaign: termsCampaign});
Backbone.history.start();
});
You should have only one main.js file in a view, so
<script data-main="js/mainCollector" src="js/libs/require.js"></script>
<script data-main="js/mainTerm" src="js/libs/require.js"></script>
<script data-main="js/mainTermCampaign" src="js/libs/require.js"></script>
is wrong, use:
<script data-main="js/main" src="js/libs/require.js"></script>
, and put the logic into that main.js file. You wrote that mainCollector, mainTerm.js and mainTermCampaign.js are similar. which mean you have three routers in your app, which also seems like a bad thing, I think one should be enough. I think you should think again how to structure your code.
You put the script tag into your body, which is also unusual, read require.js docs and try to use best practices.
Solved
index.html
<html>
<heade>
<script data-main="js/main" src="js/libs/require.js"></script>
</head>
<body>
.....
</body>
</html>
main.js
require.config({
baseUrl: "js",
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min",
backbone: "libs/backbone.min",
utils: "helpers/utils",
//Files Collector
CollectorModel: "models/CollectorModel",
CollectorCollection: "collections/CollectorCollection",
// Files Term
TermModel: "models/TermModel",
TermCollection: "collections/TermCollection",
// Files Term Campaign
TermCampaignModel: "models/TermCampaignModel",
TermCampaignCollection: "collections/TermCampaignCollection",
// Router
Router: "routers/Router",
// Views Collector
editCollector: "views/Collector/Collector_edit",
indexCollector: "views/Collector/Collector_index",
newCollector: "views/Collector/Collector_new",
rowCollector: "views/Collector/Collector_row",
showCollector: "views/Collector/Collector_show",
//Views Term
editTerm: "views/Term/Term_edit",
indexTerm: "views/Term/Term_index",
newTerm: "views/Term/Term_new",
rowTerm: "views/Term/Term_row",
showTerm: "views/Term/Term_show",
//Views Term Campaign
editTermCampaign: "views/TermCampaign/TermCampaign_edit",
indexTermCampaign: "views/TermCampaign/TermCampaign_index",
newTermCampaign: "views/TermCampaign/TermCampaign_new",
rowTermCampaign: "views/TermCampaign/TermCampaign_row",
showTermCampaign: "views/TermCampaign/TermCampaign_show",
//Templates
'templates': 'templates'
},
shim: {
jqueryui: {
deps: ["jquery"]
},
tablesorter: {
deps: ["jquery"],
exports: "TableSorter"
},
script: {
deps: ["jquery", "jqueryui", "tablesorter"],
exports: "Script"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(["backbone", "underscore", "CollectorCollection", "TermCollection", "TermCampaignCollection", "Router", "script"],
function (Backbone, _, CollectorCollection, TermCollection, TermCampaignCollection, Router) {
var Collectors = new CollectorCollection();
var Terms = new TermCollection();
var TermsCampaign = new TermCampaignCollection();
var router = new Router({Collectors: Collectors, Terms: Terms, TermsCampaign: TermsCampaign});
Backbone.history.start();
});
router.js
define([
"backbone",
"CollectorModel", "editCollector", "indexCollector", "newCollector", "showCollector",
"TermModel", "editTerm", "indexTerm", "newTerm", "showTerm",
"TermCampaignModel", "editTermCampaign", "indexTermCampaign", "newTermCampaign", "showTermCampaign"
],
function(_,
CollectorModel,CollectorEditView, CollectorIndexView, CollectorNewView, CollectorShowView,
TermModel, TermEditView, TermIndexView, TermNewView, TermShowView,
TermCampaignModel, TermCampaignEditView, TermCampaignIndexView, TermCampaignNewView, TermCampaignShowView
){
var Router = Backbone.Router.extend({
routes: {
// Collector
"Collector/new": "createCollector",
"Collectors/index": "indexCollector",
"Collector/:id/edit": "editCollector",
"Collector/:id/view": "showCollector",
// Term
"Term/new": "createTerm",
"Terms/index": "indexTerm",
"Term/:id/edit": "editTerm",
"Term/:id/view": "showTerm",
// Term Campaign
"TermCampaign/new": "createTermCampaign",
"TermsCampaign/index": "indexTermCampaign",
"TermCampaign/:id/edit": "editTermCampaign",
"TermCampaign/:id/view": "showTermCampaign"
},
// functions ...
});
return Router;
});
How can I load Backbone.io, Backbone, and socket.io with Require.js's shim config?
It seems like everything else is loading just fine, just that when I attempt to run Backbone.io.connect() I get "Backbone is not defined". Backbone.io is served the same way socket.io is from the /socket.io directory that the socket.io server creates.
requirejs.config({
baseUrl: 'javascripts/lib',
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min'
},
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"]
}
}
})
requirejs(['jquery',
'underscore',
'backbone',
'bootstrap',
'../socket.io/socket.io.js',
'../socket.io/backbone.io.js'
], function($,
_,
Backbone,
bootstrap){
Backbone.io.connect();
}
small update:
It seems like Backbone is defined just fine in the main requirejs function, it's just that backbone.io needs Backbone to be defined before it's initialized. How can I initialize the Backbone object and THEN the backbone.io library so it can do it's thing?
Try including backbone in your path
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min',
underscore: '<name of underscore file>',
backbone: '<name of backbone file>'
},
I think that should do it. Remember not to include the .js in the file name.
Also, if backbone.io depends on backbone you may need to add the dependencies under shim.
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"]
},
'backbone.io': {
deps: ["backbone"]
}
}
Here's how it ended up working for me:
Thanks landland, your answer helped the most.
requirejs.config({
baseUrl: 'javascripts/lib',
paths: {
jquery: 'jquery.min',
bootstrap: 'bootstrap.min',
backbone: 'backbone',
underscore: 'underscore',
socketio: '../../socket.io/socket.io',
backboneio: '../../socket.io/backbone.io'
},
shim : {
'underscore': {
exports: '_'
},
'backbone': {
deps: ["underscore", "jquery"],
exports: 'Backbone'
},
'bootstrap': {
deps: ["jquery"],
exports: 'bootstrap'
},
'backboneio': {
deps: ["backbone", "socketio"]
}
}
})
requirejs(['jquery',
'underscore',
'backbone',
'bootstrap',
'socketio',
'backboneio'
], function($,
_,
Backbone,
bootstrap,
titlealert,
waitForImages){
}