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'
Related
Really don't understand how to load third party libraries using Require.js in Angular.js project
For example 'topojson' is defined, but 'datamap' is undefined in this case.
Datamap from here https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js
Topojson from here https://github.com/mbostock/topojson/blob/master/topojson.js
Angular app.js:
'use strict';
requirejs.config({
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-route': ['../lib/angular-route/angular-route'],
'angular-resource': ['../lib/angular-resource/angular-resource'],
'angular-animate': ['../lib/angular-animate/angular-animate'],
'datamap':['../app/dense/world-view/datamaps.world'],
'topojson':['../app/dense/world-view/topojson'],
'lodash': ['../lib/lodash/lodash'],
'd3': ['../lib/d3js/d3']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular'],
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
exports: 'angular'
},
'angular-animate': {
deps: ['angular'],
exports: 'angular'
},
'd3': {
exports: 'd3'
},
'topojson': {
deps: ['d3'],
exports: 'topojson'
},
'datamaps': {
deps: ['d3', 'topojson'],
exports: 'datamaps'
},
'lodash': {
exports: 'lodash'
}
}
});
require(
[
'angular',
'topojson',
'datamap',
'angular-route',
'angular-resource',
'angular-animate',
'lodash',
'd3'
],
function (angular, topojson, datamap) {
console.log("topojson", topojson);
console.log("datamap", datamap); // is undefined
angular.module('myApp', [
'myApp.graph',
'myApp.node',
'myApp.dense',
'ngAnimate',
'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/login'
});
})
;
angular.bootstrap(document.getElementById("myAppId"), ['myApp']);
});
Some of the Angular controllers:
'use strict';
define(['angular'], function (angular) {
angular
.module('myApp.dense', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/dense', {
templateUrl: 'assets/app/dense/dense.html',
controller: 'DenseCtrl'
});
}])
.controller('DenseCtrl', function ($scope) {
var map = new Datamap({
scope: 'world',
element: document.getElementById("someId"),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
}
});
})
;
});
In my angular controller new Datamap(...) says 'ReferenceError: Datamap is not defined'
This is not the only case.
Same for most external JS libraries.
I am running Angular project on top of Scala and SBT with WebJars, so Require.js is the only way how to load all that stuff.
I don't see any imports except for angular in your RequireJS module (the second snippet in your question). You need to add your other dependencies, such as datamap, etc.
Looks like in 'Datamap' object does not initialize, line 12535:
https://github.com/markmarkoh/datamaps/blob/master/dist/datamaps.world.js#L12535
// expose library
if (typeof exports === 'object') {
d3 = require('d3');
topojson = require('topojson');
module.exports = Datamap;
}
else if ( typeof define === "function" && define.amd ) {
define( "datamaps", ["require", "d3", "topojson"], function(require) {
d3 = require('d3');
topojson = require('topojson');
return Datamap;
});
// window.Datamap = window.Datamaps = Datamap; // hack
}
else {
window.Datamap = window.Datamaps = Datamap;
}
Now it works for me.
Added that line after define:
window.Datamap = window.Datamaps = Datamap; // hack
and used require block inside Angular controller:
requirejs(["datamaps"], function () {
// draw map here new Datamap({...})
};
I am trying to use ngMessages in my controller:
I am setting up my require.js config:
require({
// libraries dependencies (fallback support)
paths: {
jquery: [
'vendor/jquery/2.1.3/jquery.min'
],
bootstrap: [
'vendor/bootstrap/3.3.2/js/bootstrap.min'
],
angular: [
'vendor/angular.js/1.3.11/angular.min'
],
angularResource: [
'vendor/angular.js/1.3.11/angular-resource.min'
],
angularAnimate: [
'vendor/angular.js/1.3.11/angular-animate.min'
],
ngMessages: [
'vendor/angular.js/1.3.11/angular-messages.min'
],
uiBootstrap: [
'vendor/angular-ui/bootstrap/0.12.0/ui-bootstrap-tpls.min'
],
uiRouter: [
'vendor/angular-ui/ui-router/0.2.13/angular-ui-router.min'
],
},
// define js scripts dependencies
shim: {
'bootstrap': {
deps: ['jquery']
},
'angular': {
deps: ['bootstrap'],
exports: 'angular'
},
'angularResource': {
deps: ['angular']
},
'angularAnimate': {
deps: ['angular']
},
'ngMessages': {
deps: ['angular']
},
'uiBootstrap': {
deps: ['bootstrap', 'angular']
},
'uiRouter': {
deps: ['angular']
},
},
priority: [
'angular'
],
deps: ['./ng.app']
});
and in module.js I am requiring ngMessages:
define(function(require) {
'use strict';
var angular = require('angular');
require('angularResource');
require('ngMessages');
require('uiRouter');
require('uiBootstrap');
// angular module definition
return angular.module(
// module name
'companies',
// module dependencies
[
'ngResource',
'ngMessages',
'ui.router',
'ui.bootstrap',
require('shared/fend/input-utils/package').name,
require('shared/fend/pagination/package').name
]
);
});
and then in my controller I am trying to inject ngMessages:
define(function(require) {
'use strict';
var module = require('../module');
require('../resources/rest');
module.controller('CompaniesNewCtrl', CompaniesNewCtrl);
CompaniesNewCtrl.$inject = [
'$rootScope', '$scope', '$state',
'CompaniesResource',
'InputFocusFactory', 'ngMessages'
];
function CompaniesNewCtrl($rootScope, $scope, $state, resource, input, ngMessages) {... })
but i am getting error:
Error: $injector:unpr Unknown Provider Unknown provider:
ngMessagesProvider
What am I doing wrong?
Check API of ngMessages It is directive, not an provider so you can not inject it as dependency in component of angular. You can use it on html as AE (attribute/element)
API
.directive('ngMessages', ['$animate', function($animate) {
var ACTIVE_CLASS = 'ng-active';
var INACTIVE_CLASS = 'ng-inactive';
return {
require: 'ngMessages',
restrict: 'AE',
controller: ['$element', '$scope', '$attrs', function($element, $scope, $attrs) {
//.......code here
I am tring to insert angular route in an angular project which has also a requiredjs.
app.js looks like this:
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app',
jquery: 'jquery-2.1.3.min',
angular: 'angular',
route: 'angular-route'
},
shim: {
'jquery': {
exports: '$'
},
'angular': {
exports: 'angular'
},
'route': {
deps: ['angular'],
exports: 'route'
}
}
});
// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['app/main']);
main.js looks like this:
define(['route', "angular", 'app/navController'], function (route, angular, navController) {
var app = angular.module('mainFrameModule', 'ngRoute');
app.controller('navController', navController);
});
when I try to run the web site i get the follwing error described in:
https://docs.angularjs.org/error/$injector/nomod?p0=mainFrameModule
And when I debug the main.js, route is undefined.
can anyone help me to solve this problem?
thanks in advance
kobi
You don't need exports option for either angular or ngRoute. Try this shim config
shim: {
'jquery': {
exports: '$'
},
'route': ['angular']
}
and your main.js
define(['angular', 'app/navController', 'route'], function (angular, navController) {
var app = angular.module('mainFrameModule', 'ngRoute');
app.controller('navController', navController);
});
I am trying to implement angularjs with requirejs
Here is my applicaiton.js file which loads initially
var config = {
baseUrl: '/assets/',
paths: {
jquery: 'jquery',
twitter: 'twitter',
angular: 'angular',
angularjs: 'angularjs', # This is the directory
app: 'app'
},
shim: {
'twitter/bootstrap': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'app': {
deps: ['jquery']
}
}
}
requirejs.config(config);
requirejs(['jquery', 'twitter/bootstrap', 'angularjs/app', 'app/common']);
Directory structure
Application.js
Angularjs/
-controllers/
-directives/
-Services/
-app.js
As startup angularjs/app.js will be initiated and my app.js contains
define('app', ['angular'], function(angular) {
var app = angular.module('app', []);
return app;
})
require(['app'], function(app) {
app.controller('FirstController', function($scope) {
$scope.message = 'hello';
})
})
While running getting the exception as
Failed to instantiate module app
Used this as reference link
That's not a healthy way to use RequireJS aside from the fact that does not work. Please refer to my answer regarding using RequireJS with AngularJS: Does it make sense to use Require.js with Angular.js?
I have a web application using angular v1.1.5 and i am trying to update this to v.1.2.9.
I have downloaded v1.2.9 and the corresponding route.js file however when trying to run my application, i am seeing the below:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=app&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1
main.js:
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
'zepto' : 'vendor/zepto',
'jquery' : 'vendor/jquery',
'angular' : 'vendor/angular',
'ngRoute' : 'vendor/route',
// 'ngResource': 'vendor/resource',
'router' : 'vendor/page',
'history' : 'vendor/history.iegte8',
'event' : 'vendor/eventemitter2'
},
shim: {
'zepto' : { exports: '$' },
'angular' : { deps: ['jquery'], exports: 'angular' },
'ngRoute' : { deps: ['angular'], exports: 'angular' },
// 'ngResource': { deps: ['angular'], exports: 'angular' },
'app' : { deps: ['angular'] },
'router' : { exports: 'page'}
}
});
require(['angular', 'app'], function (angular, app) {
angular.bootstrap(document,['app']);
});
})(this.require);
app.js:
define("app", ["angular"], function(angular){
var app = angular.module("app", ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/products", {
templateUrl: "products.html",
controller: "ProductsController"
})
.otherwise({ redirectTo: '/products'});
});
return app;
});
Any advice appreciated.
Update**********************************************
If i change (app.js):
define("app", ["angular"], function(angular){
to:
define("app", ["angular", "ngRoute"], function(angular){
I get the following error:
TypeError: e is undefined
...controller,f),b.controllerAs&&(a[b.controllerAs]=f),c.data("$ngControllerControl...
I'm not familiar with require.js, but wouldn't you need to inject it here as well?
require(['angular', 'ngRoute', 'app'], function (angular, app, ngRoute) {
angular.bootstrap(document,['app', 'ngRoute']);
});
I might be out on deep waters here though.