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
Related
I have a regular ol' requirejs app, that pulls in modules in regular JS I write. I really want to start using reactjs but am not even able to get it to load with out throwing errors in the console.
My Paths
'react': '../node_modules/react/cjs/react.production.min', // there is a cjs and a umd (Universal Module Definition) version, I dont think I am UMD. we are Asynchronous Module Definition (AMD)
'reactDOM': '../node_modules/react-dom/cjs/react-dom.production.min',
'JSXTransformer': 'vendors/react/JSXTransformer-0.10.0',
'jsx': 'vendors/react/jsx',
Is it possible that there is a shim dependency that I need to setup?
'react' : {
'deps' : ['jquery']
},
'reactDOM' : {
'deps' : ['jquery']
}
I have also included them normally such as
require(["jquery", "jqueryUi", "bootstrap", "react", "reactDOM", "front", "owlCarousel", "select2", "blockui", ], function ($, jqueryUi, bootstrap, React, ReactDOM, front, owlCarousel, select2, blockui) {
$(document).ready(function(){
require([ $('#requirePageSpecificJs').val() ]); // this is set in php, result: "/require-mturk.js"
});
});
I get this error, when loading a page.
I am completely new to React, so I may be missing some things. Does the latest react require Babel to run, and if so do I need to include babel as a package, and add that as a shim? I am seeing some other posts of using requirejs with react but it is requiring different tools and stuff. completely lost here.
I'am trying to add toastr to my app and get error "ReferenceError: toastr is not defined"
Here is my requirejs config:
requirejs.config({
baseUrl: 'scripts/lib',
waitSeconds: 200,
paths: {
'jquery': 'jquery/jquery-1.10.2',
'toastr': 'jquery/toastr'
},
shim: {
toastr: ['jquery']
}
And when I tryng to add toastr as module dependency I got this error.
What should I do to fix this problem?
Thank you
I think you should better use an angular port of toaster, like AngularJS-Toaster.
The main advantage is that it will work "inside angular".
The approach you were following is not angular aware, and it wont work "inside" angular ( is not an angular module ). You will have to communicate with angular each time you use it (notify changes on your models or whatever).
Using jQuery toaster does not need to be listed as a dependency for your angular application, since its not an angular module. Toaster should be ready for use without being listed as dependency.
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']);
In my project, I hope the lazy loaded modules can add their own state, so I found the ui-router-extras. It's really useful for me, but when I want to use ng-grid in the lazy loaded module like the module1 in demo, the module1.js file looks like this:
define(['angularAMD', 'ngGrid'], function () {
var app = angular.module("module1", ['ui.router','ngGrid']);
...
and the main.js file looks like this:
require.config({
waitSeconds: 100,
paths: {
"angularAMD": "../../lib/angularAMD",
...
"jQuery": "../../lib/jquery",
"ngGrid": "../../lib/ng-grid-2.0.14.debug"
},
shim: {
"angular": { exports: "angular" },
...
"ngGrid": ["angular", "jQuery"],
},
deps: ["app"]
});
But I got an exception from ng-grid : "Uncaught TypeError: Cannot read property 'factory' of undefined". I found the ng-grid source code where the exception happened:
angular.module('ngGrid.services').factory('$domUtilityService',['$utilityService', '$window', function($utils, $window) {....}
So I found in the lazy loaded module, get module by angular.module('mymodule') returns the undefined. Is there something I forgot to write, or is there another way to use ng-grid or other plugin in the lazy load module with ui-router-extras future?
You need to use the 'ngload' plugin for AngularAMD to load a module on the fly.
Excerpt from the docs:
3rd Party AngularJS Modules
3rd party AngularJS modules, meaning any module created using angular.module syntax, can be loaded as any normal JavaScript file before angularAMD.bootstrap is called. After bootstraping, any AngularJS module must be loaded using the included ngload RequireJS plugin.
define(['app', 'ngload!dataServices'], function (app) {...});
In case you need to load your module using the RequireJS plugin or if you have complex dependecies, you can create a wrapper RequireJS module as below:
define(['angularAMD', 'ui-bootstrap'], function (angularAMD) {
angularAMD.processQueue();
});
In this case, all dependencies will be queued up and when .processQueue() is called, it will go through the queue and copy them into current app using app.register:
https://github.com/marcoslin/angularAMD
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){
...
});