I have included ui-router.js for angularjs . But somehow i am not getting it to work with requirejs.
require.config
baseUrl:"/Scripts/app"
paths :
jquery : "libs/jquery/jquery-2.0.3"
bootstrap : "libs/bootstrap/bootstrap"
angular : "libs/angular/angular"
domReady : "libs/requirejs/domReady"
blockui : "libs/jquery.blockUI"
"ui-router" : "libs/angular/angular-ui-router"
"angular-resource" : "libs/angular/angular-resource"
shim:
jquery:
exports:
"jquery"
bootstrap:
depts:["jquery"]
angular:
exports:
"angular"
"ui-router":
exports:
"ui.router"
deps : ['angular']
blockui :
deps : ["jquery"]
"angular-resource":
deps: ['angular']
deps :['app','utils/common']
require ['angular','jquery','bootstrap','routes'] ,(angular,$) ->
$(document).ready ->
angular.bootstrap document,['app']
now my app.coffee is
define ['angular','angular-resource','ui-router'] , (angular) ->
angular.module 'app',['ngResource']
the console gives error in chrome
Uncaught TypeError: Cannot read property 'router' of undefined
and
TypeError: g is undefined
g = g[part];
in firefox . Why am I not able to use ui-router as my module to load it into my modules for route.coffee ?
finally got the answer from this guy in ui-router project here is the answer link
Ui-Router Issue for requirejs load with AMD
"ui-router":
exports:
"ui.router"
deps : ['angular']
especially "ui.router" is the bad guy here.
solution: don't use the dot in its name.
i used "uiRouter" even for the export!
if the module name is incorrect, requirejs can't load the script file. so your can't get the router.
in development environment, you should open the console window, in this window, you should find the error from requirejs.
Related
I would like to add some plugin to my project based on angular + requirejs.
In my config I do:
shim: {
'angular': {exports: 'angular', deps: ['jquery']},
'angular-strap': {deps: ['angular']},
}
But when I write in my module:
define([
'angular',
'angular-strap'
]
Then I get console error "Uncaught ReferenceError: angular is not defined" in line where angular-strap module is registering
angular.module('mgcrea.ngStrap', [
If I remove angular-strap from define application is loaded properly and in global context I can see 'angular' object.
You have inject angular-strap wrongly. You are supposed to use this syntax instead
angular.module('your_app name', ['deps']);
in your case it will be like this
angular.module('yourApp', ['mgcrea.ngStrap']);
I want to include the locale-feature from MomentJS into one of my Backbone Views. http://momentjs.com/docs/#/i18n/adding-locale/ - but I get an error:
Uncaught TypeError: undefined is not a function - and it refers to:
return moment.defineLocale('da', {
In my config.js I have:
require.config({
deps: ['main'],
paths: {
jquery : '../lib/jquery-2.1.1.min',
underscore : '../lib/lodash-2.4.1',
backbone : '../lib/backbone',
moment : '../lib/moment.min',
locale : '../lib/locale/da'
},
And in my View I have:
define([
'app',
'backbone',
'moment',
'locale'
],
function (App, Backbone, moment, locale) {
...
Does anyone know what the issue could be?
Here is the oficial documentation http://momentjs.com/docs/#/use-it/require-js/
seems to me that there is a little trick to work with requirejs
I'm looking to use AngularStrap in an existing Angular.js application which is using require.js as the module loader. I'm having trouble getting AngularStrap loaded correctly in the application. When I try to include 'angularStrap' in my Angular module, it fails to initialise. Below is an extract from my requirejs config.
paths: {
'angular' : 'lib/angularjs/angular',
'angularStrap': 'lib/angularstrap/angular-strap',
'angularStrapTpl': 'lib/angularstrap/angular-strap.tpl',
},
shim: {
'angularStrap' : {
deps : [ 'angular', 'angularStrapTpl' ],
},
}
Has anyone managed to use AngularStrap with require.js? I suspect my dependencies are slightly incorrect.
Yo need to add angular-animate to your requirejs configuration.
Github Link: https://github.com/Augus/ngAnimate
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 have a backbone jquery mobile app in which i want to use mobiscroll date picker.
I tried include it in the head tag.
TypeError: Cannot read property 'widget' of undefined
But i am getting this error.
Is mobiscroll require js compatible ?
How can i load it to use it within my views directly ?
Make sure you're including Mobi Pick's JS file after Jquery Mobile.
I'm new to jQuery Mobile and realized I did that mistake just now. This solved it for me.
Just include mobiscroll the same way you include jquery and set the dependency on jquery. I'm posting here an example how you can include mobiscroll with require.js:
require.config({
paths: {
jquery: 'vendor/jquery/jquery.min'
mobiscroll: 'vendor/mobiscroll/mobiscroll..min'
},
shim: {
jquery:{
exports: "jquery"
},
mobiscroll:{
deps: ['jquery'],
exports: "mobiscroll"
}
}
});
require(['domReady','app', 'mobiscroll'],
function(domReady, App){
...
});