Am new to Yeoman and I generated a Backbone application using generator-backbone
This is my main.js ( require js config)
/*global require*/
'use strict';
require.config({
shim: {,
handlebars: {
exports: 'Handlebars'
}
},
paths: {
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/lodash/dist/lodash',
handlebars: '../bower_components/handlebars/handlebars'
}
});
require([
'backbone'
], function (Backbone) {
Backbone.history.start();
});
Now I created a view using yo backbone:view Login
This is the generated view
define([
'jquery',
'underscore',
'backbone',
'templates'
], function ($, _, Backbone, JST) {
'use strict';
var LoginViewView = Backbone.View.extend({
template: JST['app/scripts/templates/LoginView.hbs'],
tagName: 'div',
id: '',
className: '',
events: {},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
}
});
return LoginView;
});
When I run the app with LoginView, i get an error
Error: Script error for: templates http://requirejs.org/docs/errors.html#scripterror
Apparently I see templates is no where defined in main.js. What am i missing while running the yeoman generator
If you did the same blunder mistake like m, just verify this
After generating the code, and if its shows template is undefined or u find the template.js missing, check the following steps
run grunt handlebars (include --force if you want to ignore any warning/errors)
This will pre compile the .hbs file make a single template.js file.
But the catch here is, it wont work out of the box, the template.js is written in the location app/.tmp/scripts/template.js location.
You can modify main require configure file accordingly, or open GruntFile.js and modify this function
grunt.registerTask('createDefaultTemplate', function () {
grunt.file.write('/your/custom/path/to/templates.js', 'this.JST = this.JST || {};');
});
Also verify if u have this line in GruntFile.js
grunt.loadNpmTasks('grunt-contrib-handlebars');
if not, add it at the very last (ofcourse not after the function block)
Related
I am trying to integrate requirejs into an existing project, which runs on a node/grunt stack. I want to use the r.js optimizer to concat everything together and noodle through dependencies to do its magic as well.
I am able to get r.js to build a single .js file, and there are no errors... but nothing happens. I set breakpoints in my code, but nothing is getting kicked off - the app never actually runs the bootstrap.js file. I have tried putting the bootstrap.js in an immediate function, and of course it does run then, but the dependencies are not loaded yet (it seems). What am I missing here?
File structure:
app
-> modules
- -> common
- - -> auth.js // contains an auth call that needs to return before I bootstrap angular
-> app.js
-> index.html
config
-> main.js
node_modules
vendor
-> angular/jquery/require/domready/etc
gruntfile.js
gruntfile requirejs task:
requirejs: {
compile: {
options: {
name: 'app',
out: 'build/js/app.js',
baseUrl: 'app',
mainConfigFile: 'config/main.js',
optimize: "none"
}
}
},
main.js config:
require.config({
paths: {
'bootstrap': '../app/bootstrap',
'domReady': '../vendor/requirejs-domready/domReady',
'angular': '../vendor/angular/angular',
'jquery': '../vendor/jquery/jquery.min',
'app': 'app',
'auth': '../app/modules/common/auth',
requireLib: '../vendor/requirejs/require'
},
include: ['domReady', 'requireLib'],
shim: {
'angular': {
exports: 'angular'
}
},
// kick start application
deps: ['bootstrap']
});
app.js:
define([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
bootstrap.js:
define([
'require',
'angular',
'app',
'jquery',
'auth'
], function (require, angular, app, $, auth) {
var Authentication = auth.getInstance();
.. do auth stuff...
if (Authentication.isAuthorized) {
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
}
);
You need to set up a main point of entry into your application; here it would be app.js, but all you are doing in that file is defining that files dependencies and not actually loading any code. You need to change your code to this:
require([
'angular',
'jquery',
], function (angular, $) {
'use strict';
$( "#container" ).css("visibility","visible");
return angular.module('app');
});
See this thread for more details on the difference between define and require.
I am new to angularjs
I am trying to integrate angularjs with requirejs . How ever I am getting the error
Uncaught Error: No module: app
This is my setup
main.coffee
require.config
baseUrl : "/Scripts/"
paths :
jquery : 'libs/jquery/jquery-2.0.3'
angular : 'libs/angular/angular'
'angular-resource' : 'libs/angular/angular-resource'
bootstrap : 'libs/bootstrap/bootstrap'
shim :
angular :
exports :'angular'
'angular-resource':
deps :['angular']
jquery :
exports: ['jquery']
bootstrap :
deps :['jquery']
app:
deps :['app-boot']
require ['app-angular/modules/app','app-angular/modules/app-boot'], ($,angular)->
app-boot.coffee
require ['jquery','angular','bootstrap'], ($,angular)->
$(document).ready ->
angular.bootstrap document,['app']
app.coffee
define "app",['angular','angular-resource'], (angular)->
angular.module 'app',['ngResource']
StudentController.coffee
require ["app"] , (app) ->
app.controller "StudentController" , ($scope) ->
$scope.msg = "Hello Joy !! How are you !! You are in Angularjs"
And my Index.cshtml
<div class="page-content">
<div ng-controller="StudentController">
<p ng-bind="{{msg}}">
</p>
</div>
However it gives the error Uncaught Error: No module: app
I also removed the ng-app from html also have bootstrapped the angular manually on domready . So where am I going wrong ?
I think that you need to invert the dependency on this bit of code:
app:
deps :['app-boot']
It's the way around:
'app-boot': {
deps: ['app']
}
Your app-boot.coffee file depends on the module app that is defined on the app.coffee file
Looks like you're following this guide, which is double plus good.
I was able to get it to work but kept getting the same error message because in my Angular controller, 'app' was not defined. It appears the 'app.controller' doesn't get set there, as the guide states, and just loading it via the 'require' statement is sufficient.':
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
This is only a little different than yours.
/* shim */
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"angular":{
exports:"angular"
},
"directives":{/* this is my custom Angular directive */
deps:["angular"]
}
}
});
/* RequireJS module */
define("app", ["angular", "directives"], function(angular)
{
var app = angular.module("app", ["zipppyModule"]);
angular.element(document).ready(function()
{ angular.bootstrap(document,['zippyModule']); });
});
/* 'app' loads the module */
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
i am trying to use angular with breeze and requireJS
how ever i am getting error of
Uncaught Error: Module name "ko" has not been loaded yet for context: _. Use require([])
i have configured
define("breezeConfig", ["breeze"], function(breeze) {
// configure to use the model library for Angular
//breeze.config.initializeAdapterInstance({ dataService: "OData" });
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
// configure to use camelCase
breeze.NamingConvention.camelCase.setAsDefault();
var serverAddress = "/odata/";
var manager = new breeze.EntityManager(serverAddress);
return breeze;
});
and in the main module
require.config({
baseUrl: "/app",
paths: {
"jQuery": "lib/jquery-1.8.2",
"angular": "lib/angular",
"angular-resource": "lib/angular-resource",
"text": "lib/text",
"Q": "lib/q",
"breeze": "lib/breeze.min"
and so on
at the end
require([
'jQuery',
'Q',
'breeze',
'angular',
'app',
'controllers',
'routes',
'breezeConfig'
], function ($, angular, app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['AMail']);
});
where am i wrong?
Yes ... we know. It's been reported on S.O. before. We have a fix on the way (next release).
Meanwhile, inside your main module do two things:
1) define a bogus knockout module
define('ko', function() {}); // do nothing
2) add a shim to your require.config function:
...
shim: {
jquery: { exports: '$' },
angular: { exports: 'angular' },
breeze: { deps: ['ko', 'jquery', 'Q'] }
}
...
You'll need the shim (minus the 'ko' dependency!) even after we fix the ko problem. Breeze depends on 'jquery' and 'Q' which must be loaded first. You may or may not need the other shim lines.
I started following Organizing your application using Modules (require.js tutorial, but after adding first event handler to my view - I encountered problem:
// Filename: views/project/list
define([
'jquery',
'underscore',
'backbone',
'handlebars',
'collections/projects',
'text!templates/projects/list.js'
], function ($, _, Backbone, Handlebars, ProjectsCollection, projectListTemplate) {
var ProjectListView = Backbone.View.extend({
el: $('#container'),
events: {
"click .open-proj": "openProject",
},
initialize: function () {
...
},
render: function () {
...
},
openProject: function(e) {
// HERE I WANT TO TRIGGER ROUTING VIA router.navigate
alert("opened");
}
});
// Our module now returns our view
return ProjectListView;
});
In the openProject callback I want to trigger routing, but I cannot introduce dependency to app.js as it would cause circular dependency(router depends on view). How should I handle this?
You can pass your router to the ProjectListView when you create it:
var projectListView = new ProjectListView({
router: app_router
});
Since ProjectListView is a Backbone.View, it can then access the router using this.options.router, no circular dependency problem here.
I have configured requirejs to load the core libs (jquery, underscore, backbone).
Now I would like to add my backbone models, controllers, views, etc to be loaded asyncronly
I found a lots of tutorials to this topic and lots of "ready" boilerplates unfortunatly I mentioned that most approaches are depreceated or rather complicated (even there are better approaches).
One example is how I configured requirejs for the main libs:
https://stackoverflow.com/a/10914666/1309847
So how do I load Backbone Views, Models, Collections, Routers, Controllers and Templates with a simple and valid Requirejs configuration?
I followed youre advice but get some strange error
main.js
require.config({
paths: {
jquery: 'vendors/jquery/jquery',
underscore: 'vendors/underscore/underscore',
backbone: 'vendors/backbone/backbone'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require(['app'], function(app){
});
app.js
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
var Message = new Backbone.Model.extend({
//idAttribute: '_id',
//defaults: { body: '' }
//url: function(){ return this.id ? '/messages/' + this.id : '/messages'; }
});
var newMessage = new Message({ body: 'hi' });
newMessage.save();
});
The error occours in app.js:
Uncaught TypeError: Object [object Object] has no method 'apply'
When I comment the new Backbone.Model.extend part I don't get any error anymore.
in my experience, the best way to bootstrap your application is by creating a Backbone.Router. So you can associate urls with your application functionality.
If you are using RequireJS+Backbone, you probably have a main.js where RequireJS is configured (paths, shims, etc). The first call to "require" is used to load a initial script in order to bootstrap the whole app.
For example:
/**
* main.js - RequireJS bootstrap
*/
require.config({
paths: {
//your paths
},
shim: {
//your shims
}
});
require(
[
'app' //app.js is at the same directory as main.js
],
function(app) {
app.init();
}
);
then in app.js you can create a new Router instance, or you can just start creating Views and Models.
For further reference: http://addyosmani.github.com/backbone-fundamentals/
So as I have now understood right: You have to wrap a requirejs function around youre own custom js file.
The function is called define. The first parameter is an array of the dependencies which you have defined in the main.js file or a relative path to another custom js from you.
The second parameter is the callback which holds the original file. Important is that you return the object, function, array or variable which you want to share.
The whole thing looks like this:
define(
['underscore', 'backbone'], // the dependencies (either relative paths or shortcuts defined in main.js
function(_, Backbone){ // the return statement of the deps mapped to a var
var MessageModel = Backbone.Model.extend({ // the original code, file
defaults: { body: '' },
initialize: function(){}
});
return MessageModel; // the return statement, sharing the "final result", sometimes you return the initialize parameter
});
The same for a collection wrapping the models:
define(
['jquery', 'underscore', 'backbone', 'models/message_model'], // deps and the last one is the relative path
function($, _, Backbone,MessageModel){ // same as above explained
var MessageCollection = Backbone.Collection.extend({
model: MessageModel,
initialize: function(){}
});
return MessageCollection;
});
I now only have to figure out how I can bootstrap to whole application. But I think I need more knowledge of backbone to do this :)