When running Angular under Requirejs, I encountered a situation where the data in the controller class was being repeated twice. This issue only seemed to occur when ng-app="myApp" was present in the div. Why is this happening?
Here is an example from welcomeController.js:
define(['app'], function (app) {
app.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
console.log($scope.message); // it is repeated twice here.
}]);
});
In my HTML file:
<head>
<link rel="stylesheet" href="style.css">
<script data-main="scripts/main.js" src="scripts/vendors/requirejs/require.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
The main.js file contains:
require.config({
paths: {
'domReady': 'vendors/requirejs-domready/domReady',
'angular': 'vendors/angular/angular',
'angular-route': 'vendors/angular-route/angular-route',
'jquery': 'vendors/jquery/dist/jquery'
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
}
});
define([
'controllers/welcomeController',
'bootstrap'
]);
And bootstrap.js has:
define([
'require',
'angular',
'app'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['myApp']);
});
});
In app.js,
define([
'angular'
], function (ng) {
'use strict';
return ng.module('myApp', []);
});
It seems that everything works fine with Angular alone, without Requirejs. The duplication issue does not arise when ng-app="myApp" is included in the `div`. But under Requirejs with Angular, the problem occurs.
<head>
<link rel="stylesheet" href="style.css">
<script src="scripts/vendors/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('welcomeController', ['$scope', function($scope) {
$scope.message = "Message from WelcomeController";
console.log($scope.message); // It occurs only once.
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
What could be causing this discrepancy between working with Angular and Requirejs together versus using Angular alone?