I am trying to use the requirejs-hbs lib in a Backbone project. I have the Handlebars lib and the requirejs-hbs lib in the same folder. They are declared the same in my config. When I look at the sources in my chrome tab, I am only getting the require-hbs script, I am not getting the handlebars script. Here is my config file:
require.config({
hbs: {
templateExtension: '.hbs'
},
paths: {
backbone: "libs/backbone/backbone",
Handlebars: 'libs/handlebars/handlebars.amd',
hbs: 'libs/requirejs-hbs/hbs',
jquery: 'libs/jquery/jquery',
underscore: 'libs/underscore/underscore'
},
shim: {
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['js/router/easier.view'], function(View) {
'use strict';
var view = new View();
});
And here is the view where I am trying to access my template.
define(function(require) {
'use strict';
var Backbone = require('backbone');
var testTemplate = require('hbs!views/test.hbs');
var router = Backbone.View.extend({
render: function() {
debugger;
}
});
return router;
});
The error I get is GET http://localhost:9000/handlebars.js 404 (Not Found). I have the other files that I am declaring, but I do not have the handlebars.js. What am I doing wrong?
You are creating a path to Handlebars but if you look at the source of requirejs-hbs you see that it uses handlebars.
So either change the requirejs-hbs source to Handlebars or change your path to handlebars.
Should work.
Related
I have a problem implementing Toaster into my demoApp which uses RequireJS. Here some code:
(function () {
require.config({
paths: {
'angular': 'bower_components/angular/angular',
'jquery': 'bower_components/jquery/dist/jquery',
'toaster': 'bower_components/toaster/toaster'
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
toaster: {
deps: ['angular', 'jquery'],
exports: 'toaster'
}
}
});
require([
'angular',
'app',
'toaster',
'jquery'
],
function (angular, app, toaster) {
'use strict';
// toaster is undefined. I add it here just for a check. <<<<<<
angular.bootstrap(angular.element('body')[0], ['myApp']);
});
})();
This is main.js and toaster is undefined where I wrote the comment near the end. The file is loaded as I can see it at the Sources tab in the console.
In addition, wherever I want to use toaster, it is undefined. Here some code from the same demo app:
First case:
define(['somefile', 'toaster'], function (someModule, toaster) {
'use strict';
// toaster is undefined
});
Second case (John Papa Angular Style Guide):
define(['somefile', 'toaster'], function (someModule) {
'use strict';
someModule.controller('NewController', NewController);
NewController.$inject = ['someDeps', 'toaster'];
function NewController(someDeps, toaster) {
// angular.js:13424 Error: [$injector:unpr]
// Unknown provider: toasterProvider <- toaster <- NewController
}
});
Here's what I'm using:
Angular: 1.5.3
RequireJs: 2.2.0
Toaster: 2.0.0
Can anyone tell me what I'm doing wrong?
You have to distinguish between Angular modules and RequireJS modules. Toaster only registers an Angular module, no need to export anything in a RequireJS way.
shim: {
// ...
toaster: {
deps: ["angular", "jquery"]
}
}
Bootstrapping:
require(["angular", "app"], function (angular) {
// here, app.js is loaded in the DOM, so you can bootstrap Angular:
angular.bootstrap(angular.element("body")[0], ["myApp"]);
})
In your app.js:
define(["toaster" /* , ... */], function () {
// here, toaster.js is loaded in the DOM, so you can add the "toaster" Angular module in your Angular app dependencies:
return angular.module("myApp", ["toaster" /* , ... */]);
});
Anywhere else:
define(["app"], function (app) {
// as myApp depends on toaster, you can inject the toaster service the Angular way:
app.controller("MyController", ["toaster", function (toaster) {
// ...
}]);
});
I am trying to create a very simple Angular + Require project template.
I am getting error-
Error: Script error for: ngRoute
http://requirejs.org/docs/errors.html#scripterror
In my index.html i have
require(
[
'jquery',
'angular',
'mainApp',
], function($, angular, mainApp) {
var AppRoot = angular.element(document.getElementById('CollectorWallApp'));
AppRoot.attr('ng-controller','MainController');
angular.bootstrap(AppRoot, ['MainApp']);
});
In mainApp.js i'm doing the following-
'use strict';
define(['angular','ngRoute'],function(angular,ngRoute){
var MainApp = angular.module('MainApp',['ngRoute']);
MainApp.controller("MainController", function ($scope) {
console.log("Main Controller working");
});
//Route configuration goes here
MainApp.config([ '$routeProvider', function ($routeProvider) {
console.log("--->checkiing out $routeProvider");
}]);
return MainApp;
});
In Require config
'paths': {
'angular': 'js/lib/angular/angular',
'ngRoute': 'js/lib/angular-route.min',
.
.
.
.
.
'shim': {
'angular': {
exports: 'angular',
},
'ngRoute': {
exports: 'ngRoute',
deps: ['angular']
},
Unable to debug or pin point the reason.
Note- all my require paths are correct. Kindly help. Thanks
(Using requireJS, angularJS, angularAMD)
When in my main.js file I have:
require.config({
baseUrl: "js",
paths: {
'angular': 'libs/angularjs/angular.min',
'angularAMD': 'libs/angularjs/angularAMD.min'
},
shim: {
'angularAMD': ['angular']
}
});
define(['angularAMD'], function (angularAMD) {
var app = angular.module("app", []);
app.controller("testCtrl", function ($scope) {
$scope.message = "udało się!";
});
angularAMD.bootstrap(app);
return app;
});
everything works fine.
But when I cut config part to other file I got errors:
main.js:
require(['common'], function (common) {
define(['angularAMD'], function (angularAMD) {
var app = angular.module("app", []);
app.controller("testCtrl", function ($scope) {
$scope.message = "udało się!";
});
angularAMD.bootstrap(app);
return app;
});
});
common.js
require.config({
baseUrl: "js",
paths: {
'angular': 'libs/angularjs/angular.min',
'angularAMD': 'libs/angularjs/angularAMD.min'
},
shim: {
'angularAMD': ['angular']
}
});
Can I use define in require function? If not how to include common config first and then use define?
I'm assuming your main.js file is what you give to the data-main attribute on the <script> tag that loads RequireJS or that it is the main entry point of your application. Change main.js to this:
require(['common'], function (common) {
require(['app']);
});
And create an app.js module in a location where your code can readily load it:
define(['angularAMD'], function (angularAMD) {
var app = angular.module("app", []);
app.controller("testCtrl", function ($scope) {
$scope.message = "udało się!";
});
angularAMD.bootstrap(app);
return app;
});
Anything that needs access to the value of app you create in this module can just require the app module.
The code you have in the question defines a module but it does so asynchronously. By the time the call to define happens, RequireJS has already finished loading main. As far as it is concerned, main is done. So what name should it give to the defined module?
I went through this tutorial. Now I am attempting incorporate require
I found this explanation.
I am currently getting an error
Object #<Object> has no method 'unshift'
Here is the code that is causing the error
require(['jquery', 'angular', 'app/routes/app'], function ($, angular, mainRoutes) {
//tried this way as well
//$(function () { // using jQuery because it will run this even if DOM load already happened
// angular.bootstrap(document, ['mainApp']);
//});
require(['Scripts/app/modules/mainApp.js'], function (mainApp) {
angular.bootstrap(document.body, [mainApp]);//based of orginal answer
})
});
my app.js file
define(['app/modules/mainApp', 'app/controller/controllers'], function (mainApp) {
return mainApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'Templates/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'Templates/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
});
and my mainApp.js file
define(['angular', 'angular-resource'], function (angular) {
return angular.module('mainApp', ['ngResource']);
});
there are other files that I didnt show (controllers, services) but I dont think the problem lies their
UPDATE
I am now getting an error of undefined injector.
This is the only break point that gets hit, but the item is not undefined.
UPDATE 2
I updated my project to more resemble this
my main.js now is this
require.config({
baseUrl: '/Scripts/',
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'jquery': 'lib/require-jquery',
'angular': 'lib/angular/angular.min',
'angular-resource': 'lib/angular/angular-resource.min',
},
shim: {
'angular': { 'exports': 'angular' },
'angular-resource': { deps: ['angular'] },
'jQuery': { 'exports': 'jQuery' },
},
priority: [
'angular'
]
});
require(['angular', 'app/modules/app', 'app/routes/routes'], function (angular, app, routes) {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function () { //breakpoint here
$html.addClass('ng-app');
angular.bootstrap($html, [app.name]);
});
});
if i put a break point on angular element and run a test in console
(app == routes)
true
should app be equal to routes?
The second argument of bootstrap method should be an array, I made the change on the code below.
require(['jquery', 'angular', 'app/routes/app'], function ($, angular, mainRoutes) {
//tried this way as well
//$(function () { // using jQuery because it will run this even if DOM load already happened
// angular.bootstrap(document, ['mainApp']);
//});
require(['Scripts/app/modules/mainApp.js'], function (mainApp) {
angular.bootstrap(document.body, [mainApp]);
})
});
When adding a Backstack as a module for a test app in my router file it throws a error 404 loading backbone.js
I can't figure out what is the cause, but an extra http get is added that requests js/Backbone.js which then throws a 404 as I only have my libs in the js/libs folder.
What could be the issue?
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Starting Require</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<script data-main="js/main" src="js/libs/require.js"></script>
</head>
<body>
<div id="content">
</div>
</body>
// main.js
requirejs.config({
paths : {
'jquery' : 'libs/jquery-1.8.2.min',
'underscore' : 'libs/underscore',
'backbone' : 'libs/backbone',
'backstack' : 'https://github.com/pwalczyszyn/backstack/blob/master/backstack'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'backstack': {
deps: ['backbone', 'underscore', 'jquery'],
},
'underscore': {
exports: '_'
}
}
});
require([
'app',
], function(App){
App.initialize();
});
// app.js
define([
'jquery',
'underscore',
'backbone',
'router'
], function($, _, Backbone, Router){
var initialize = function(){
Router.initialize();
};
return {
initialize: initialize
};
});
// router.js
define([
'jquery',
'underscore',
'backbone',
'backstack'
], function($, _, Backbone, Backstack) {
var AppRouter = Backbone.Router.extend({
routes: {
'': 'welcome'
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('route:welcome', function(){
$('#content').html('Hello World!');
});
};
return {
initialize: initialize
};
});
backstack uses the Backbone module name, not backbone.
This fiddle uses only a capitalised Backbone module name and has no extra module load.
http://jsfiddle.net/MUSBk/
Or else you could define an alias (omit the module name if you place in a file called Backbone.js) - http://jsfiddle.net/3UXGZ/1/
define('Backbone', ['backbone'], function (Backbone) {
return Backbone;
});
I'm not sure you can use your path config to point a new Backbone module to your existing Backbone JS, as this would probably load the same file as a second instance of Backbone, which might cause issues.