I'm starting off with an empty body element and then dynamically adding HTML that contains an ng-controller attribute. I want to bootstrap the Angular application after that html has been added to the body . This works fine with angular 1.0 but not with 1.3.8. Any ideas why?
require(['angular'], function(angular){
'use strict';
buildDom();
function buildDom(){
$('body').append('<div role="tabpanel" ng-controller="WelcomeController"><span>{{greeting}}</span></div>');
}
var app = angular.module('demo', []);
app.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.element(document).ready(function() {
angular.bootstrap(document, ["demo"]);
});
});
end result - I see {{greeting}} and not Welcome!
right way of bootstrapping angularjs and requirejs is something like:
'use strict';
require.config({
baseUrl: 'js/',
deps: ['jquery'],
paths: {
jquery: '../lib/jquery.min',
angular: '../lib/angular.min'
},
shim: {
'angular': {
'deps': ['jquery'],
'exports': 'angular'
}
},
priority: [
'angular'
]
});
//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app'
], function(angular, app) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
now you should have a separate file called app.js :
define([
'angular',
'services',
'directives',
'controllers'
], function (angular) {
'use strict';
return angular.module('myapp', [
'myapp.services',
'myapp.directives',
'myapp.controllers'
]);
});
Then you should have on each file (services.js, directives.js and controllers.js) each one of your angular components declared.
Related
Hey I am new to requirejs, I am trying to use requirejs with angularjs,but I get struggling with dependencies. The first dependency of angular which is ngRoute, doesn't get loaded.
I get the following error:
angular.min.js:6Uncaught Error: [$injector:modulerr]
I have checked the paths of each files and it seems to be ok.
This is my code:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Example</title>
<script type="text/javascript" data-main="scripts/js/main"
src="scripts/vendor/requirejs/require.js">
</script>
<script type="text/javascript">
require(['main'],function () {
console.log("after load requirejs");
})
</script>
</head>
<body ng-app="app" ng-controller="mainCTRL">
{{title}}
</body>
</html>
main.js
require.config({
baseUrl: 'scripts',
paths:{
'angular': 'vendor/angular/angular.min',
'angular-route': 'vendor/angular/angular-route.min',
'jquery': 'vendor/jquery/jquery-1.12.3.min',
'app' : 'js/app',
'bootstrap':'vendor/bootstrap/js/bootstrap.min',
'bootstrapUI': 'vendor/bootstrap-ui/ui-bootstrap-tpls-1.2.4.min',
'hotkeys': 'vendor/hotkeys.min.js',
'jqueryDataTables': 'vendor/jqueryDataTables/jquery.dataTables.min'
},
shim:{
'jquery': {
exports: 'jquery'
},
'angular': {
exports: 'angular',
deps: ['jquery']
},
'angular-route':{
exports: 'ngRoute',
deps: ['angular']
},
'bootstrap':{
exports: 'bootstrap',
deps:['jquery']
},
'app':{
deps: ['jquery','angular','bootstrap','angular-route']
}
}
});
require(['app'], function(){
angular.bootstrap(document,['app']);
})
app.js
/**
* Module
*
* Description
*/
define(['jquery','angular','bootstrap','angular-route'],function($){
var app = angular.module('app', ['ngRoute']);
app.controller('mainCTRL', ['$scope', function($scope){
$scope.title = "Hello World";
}]);
app.controller('HomeCtrl', ['$scope', function($scope){
$scope.title = "Hello Home";
}])
});
UPDATE:
angular-route is loaded properly using requirejs. The problem is that when I call $routeProvider it doesn't work properly as expected and I get another module errors such as:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=ReferenceErr…0%20at%20http%3A%2F%2F127.0.0.1%3A49849%2Fscripts%2Fjs%2Fmain.js%3A36%3A13
define(['jquery','angular','bootstrap','angular-route'],function($){
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when("/home", angularAMD.route({
templateUrl: 'views/home.html', controller: 'HomeCtrl',
controllerUrl: 'ctrl/home'
}))
});
app.controller('mainCTRL', ['$scope', function($scope){
$("#title").text("I have change the title");
console.log("$('#title').val()",$("#title").text());
$scope.title = "Hello World";
}]);
app.controller('HomeCtrl', ['$scope', function($scope){
$scope.title = "Hello Home";
}])
});
I struggling with understanding why I'm seeing several "No define call for" when attempting to load my angular application. Well I know they are there because I'm using enforeDefine: true, but what is wrong with my code? What do I need to do to satisfy the enforceDefine?
Errors:
main.js
/*global require, requirejs */
'use strict';
requirejs.config({
enforceDefine: true,
paths: {
angular: ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular.min','../lib/angularjs/angular.min'],
'angular-messages': ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-messages.min','../lib/angularjs/angular-messages.min'],
'angular-resource': ['//cdn.jsdelivr.net/webjars/org.webjars/angularjs/1.4.0/angular-resource.min','../lib/angularjs/angular-resource.min'],
'angular-ui-bootstrap': ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min','../lib/angular-ui-bootstrap/ui-bootstrap-tpls.min'],
uiRouter: ['//cdn.jsdelivr.net/webjars/org.webjars/angular-ui-router/0.2.15/angular-ui-router.min','../lib/angular-ui-router/angular-ui-router.min'],
bootstrap: ['//cdn.jsdelivr.net/webjars/org.webjars/bootstrap/3.3.4/bootstrap.min','../lib/bootstrap/js/bootstrap.min'],
jquery: ['//cdn.jsdelivr.net/webjars/org.webjars/jquery/2.1.4/jquery.min','../lib/jquery/jquery.min'],
async: '../lib/requirejs-plugins/src/async'
},
shim: {
angular: {
exports : 'angular'
},
uiRouter: {
deps: ['angular']
},
'angular-ui-bootstrap': {
deps: ['angular']
},
'angular-resource': {
deps: ['angular']
},
'angular-messages': {
deps: ['angular']
},
bootstrap: {
deps: ['jquery'],
exports: 'jQuery.fn.popover'
}
},
deps: ['app']
});
app.js
/*global require, requirejs */
'use strict';
define(['angular',
'./controllers',
'./directives',
'./filters',
'./services',
'bootstrap',
'jquery',
'uiRouter',
'angular-ui-bootstrap',
'angular-messages',
'angular-resource',
'async',
'./gmaps'
],
function(angular, controllers) {
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui.router', 'ngMessages','ngResource','ui.bootstrap']).
config(['$stateProvider','$urlRouterProvider','$httpProvider', function($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
.... several routes here that I hid
});
}]).controller('RouteCtrl', ['$scope','$state', function($scope, $state) {
$scope.$state = $state;
}]);
angular.bootstrap(document, ['myApp']);
});
From this (emphasis mine):
enforceDefine: If set to true, an error will be thrown if a script loads that does not call define() or have a shim exports string value that can be checked.
So the script loaded must either comply with AMD (Angular doesn't) or define an exports in its shim configuration.
Since main is yours, just make it a proper AMD module. The "problem" is that the other scripts (uiRouter, angular-ui-bootstrap, angular-resource, angular-messages) do not actually export anything. My suggestion is just re-export angular (or any other global, e.g. document, but angular seems more relevant) so that you satisfy RequireJS:
requirejs.config({
...
'angular-resource': {
deps: ['angular'],
exports: 'angular'
}, // and so on...
...
});
This is a bypass, but I do not think there is any other way, if you insist on using enforceDefine.
You might need to change the require inside the script you specify as being data-main to be a define instead. There has been a issue on GitHub noted that sounds similar to what you are running into.
The library author suggests that if you use the enforceDefine flag then your data-main module should also use a define.
I'm having difficulties setting up Skrollr using AngularJS & RequirejS.
Some articles suggested to set up Skrollr as a directive and that is the approach that I have been following. Unfortunately, Skrollr is not able to initialize. Specifically, when I try to call the skrollr.init() from the directive I get an error saying that skrollr is not defined.
Below is my code:
directives.js
define(['directivesFactory', 'skrollr'], function(directivesFactory){
directivesFactory.directive('skrollr', [function(){
var directiveDefinitionObject = {
link: function() {
skrollr.init();
}
};
return directiveDefinitionObject;
}]);
});
main.js
(function() {
'use strict';
require.config({
baseUrl: 'js',
paths: {
'angular': 'libs/angular-1.3.9',
'angularRoute': 'libs/angular-route-1.3.9',
'bootstrap': 'libs/modernizr-2.6.2-respond-1.1.0.min',
'jquery': 'libs/jquery-1.11.0.min',
'bootstrapJS': 'libs/bootstrap',
'jqueryElastislide': 'libs/jquery.elastislide',
'jqueryPpCustom' : 'libs/jquerypp.custom',
'modernizrCustom' : 'libs/modernizr.custom.17475',
'skrollr' : 'libs/skrollr.min'
},
shim: {
'angular': {
exports: 'angular'
},
'angularRoute': {
deps: ['angular']
},
'jquery': {
exports: '$'
},
'bootstrapJS': {
deps: ['jquery']
},
'jqueryElastislide':{
deps: ['jquery']
},
'jqueryPpCustom':{
deps: ['jquery']
},
'skrollr': {
exports: 'skrollr'
}
}
});
define('controllersFactory', ['angular'], function(angular) {
return angular.module('app.controllers', []);
});
define('servicesFactory', ['angular'], function(angular) {
return angular.module('app.services', []);
});
define('directivesFactory', ['angular'], function(angular) {
return angular.module('app.directives', []);
});
define('app', [
'angular',
'angularRoute',
'servicesFactory',
'controllersFactory',
'directivesFactory',
],
function(angular) {
return angular.module('app', ['app.services', 'app.controllers', 'app.directives', 'ngRoute']);
}
);
require(['app',
'jquery',
'skrollr',
'bootstrap',
'bootstrapJS',
'jqueryElastislide',
'jqueryPpCustom',
'modernizrCustom'],
function(app,
jquery,
skrollr,
bootstrap,
bootstrapJS,
jqueryElastislide,
jqueryPpCustom,
modernizrCustom) {
require([
'controllers/mainController'
],
function() {
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'templates/main.html', controller: "MainController"}).
otherwise({redirectTo: '/'});
}]);
angular.bootstrap(document, ['app']);
}
);
});
})();
From web inspector, I see that skrollr.min.js is loaded before the directives.js file so I believe the directives should be able to call the functions within skrollr.
Any suggestions would be greatly appreciated - thanks!
define(['directivesFactory', 'skrollr'], function(directivesFactory){
directivesFactory.directive('skrollr', [function(){
var directiveDefinitionObject = {
link: function() {
skrollr.init();
}
};
return directiveDefinitionObject;
}]);
});
You don't seem to have required skrollr here, you need to add the require.
I am trying to work on an Angular application powered by RequireJS, but I am not able to split up the controller files as I keep getting an error of Argument '(contoller)' is not a function, got undefined. Any idea what have I done wrong?
app/main.js,
require.config({
baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'domReady': 'bower_components/requirejs-domready/domReady',
'angular': 'bower_components/angular/angular',
'angular-route': 'bower_components/angular-route/angular-route',
'jquery': 'bower_components/jquery/dist/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
},
// kick start application
deps: ['app/bootstrap']
});
app/app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'view/home.html',
controller: 'HomeCtrl',
controllerUrl: 'app/home'
});
$routeProvider.when('/view1', {
templateUrl: 'view/view1.html',
controller: 'View1Ctrl',
controllerUrl: 'app/view'
});
//$routeProvider.otherwise({redirectTo: '/home'});
}]);
});
app/home.js,
define(['app/app'], function (app) {
app.controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
});
});
error,
Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
But if I concat the controllers after ng.module('app', ['ngRoute']).config(...) then they work fine,
app/app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('app', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'view/home.html',
controller: 'HomeCtrl',
//controllerUrl: 'app/home'
});
$routeProvider.when('/view1', {
templateUrl: 'view/view1.html',
controller: 'View1Ctrl',
//controllerUrl: 'app/view'
});
//$routeProvider.otherwise({redirectTo: '/home'});
}]).controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
}).controller('View1Ctrl', function ($scope) {
$scope.message = "Message from View1Ctrl";
});
});
Why??
This seems to be a problem with the load order of your JS files. You are defining the HomeCtrl in app/home.js and using it it app/app.js. So make sure that home.js is loaded before app.js in your web app.
Split the app.js into two parts - one for just creating the ng.module (module.js), and one for setting the config (module-config.js). Then the dependency tree will be:
app/module-config.js
requires: app/home.js
requires: app/module.js
I am bit new to angular js. Here I am trying to use angular js with require js. While configuring it I am getting a weird undefined error for $location while the error has not occurred for $scope.
main.js
require.config({
paths: {
'angular' : 'core/angular.min',
'uiRouter': 'core/angular-ui-router.min'
},
shim: {
uiRouter:{
deps: ['angular'],
exports: 'angular'
},
angular: {
exports : 'angular'
}
}
});
require(['app']);
app.js
(function (define){
"use strict";
define(
[
'angular',
'uiRouter',
'controllers/headerCtrl'
],
function (angular,uiRouter,headerCtrl) {
var app = angular.module('test', ["ui.router"]);
app.controller('headerCtrl',headerCtrl);
angular.bootstrap( document.getElementsByTagName("body")[0], [ 'test' ]);
return app;
}
);
}(define));
headerCtrl.js
(function( define ) {
"use strict";
define(
[],
function(){
var headerCtrl= function($scope, $location) {
console.log($location.path());
};
return ['$scope',headerCtrl];
}
);
}( define ));
Here when I am trying to get the path from $location its saying "$location" is undefined but $scope is accessible.
Please tell where am I going wrong here?