I'm new to Angular+Require so please bear with me as I couldn't find this information online.
I understand that ng-app is not declared in the html as it's bootstrapped manually, but how is ng-controller used? Or is not used?
In this plunk I have an Angular application that runs under Require, but the $scope fields are not shown, is it because the controller is declared incorrectly?
HTML
This is the name: {{name}}
<br>
This is the toggle: {{singleModel}}
<br>
<button type="button" class="btn btn-primary" ng-model="singleModel"
uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
Javascript - main.js
require.config({
paths: {
angular: 'https://code.angularjs.org/1.2.16/angular',
uiBootstrap : 'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls',
app: 'app'
},
shim: {
'angular': {
exports: 'angular'
},
uiBootstrap: {
exports: 'uiBootstrap',
deps: ['angular']
},
'app': ['angular']
}
});
require(['angular', 'app'], function(angular) {
'use strict';
angular.bootstrap(document, ['app']);
});
Javascript - app.js
define([
'angular',
'uiBootstrap'
], function (angular) {
var app = angular.module('app', ['ui.bootstrap']);
app.controller('mainCtrl', function($scope) {
$scope.name = 'World';
$scope.singleModel = 1;
});
});
Related
In this plunk I have a sample code running Angular + Angular UI Router + RequireJS. There are two pages, each with a corresponding controller. If you click on View 1, you should see a page that contains a directive.
When the page loads it throws the following exception:
Cannot read property 'controller' of undefined at at my-ctrl-1.js:3
meaning that app is undefined in my-ctrl-1.js even though I'm returning it in app.js. What's wrong with this code?
HTML
<ul class="menu">
<li><a href ui-sref="view1">View 1</a></li>
<li><a href ui-sref="view2">View 2</a></li>
</ul>
<div ui-view></div>
main.js
require.config({
paths: {
'domReady': 'https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady',
'angular': 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min',
"uiRouter": "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router"
},
shim: {
'angular': {
exports: 'angular'
},
'uiRouter':{
deps: ['angular']
}
},
deps: [
'start'
]
});
start.js
define([
'require',
'angular',
'app',
'routes'
], function (require, angular) {
'use strict';
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
app.js
define([
'angular',
'uiRouter',
'my-ctrl-1',
'my-ctrl-2',
'my-dir-1'
], function (angular) {
'use strict';
console.log("app loaded");
return angular.module('app', ['ui.router']);
});
my-ctrl-1.js
define(['app'], function (app) {
'use strict';
app.controller('MyCtrl1', function ($scope) {
$scope.hello = "Hello1: ";
});
});
The problem is that you have a circular dependency between app.js and my-ctrl-1.js. When RequireJS encounters a circular dependency, the references it passes to the modules' factories are going to be undefined. There are many ways to solve the issue. One simple way that would work with the code you show could be to change my-ctrl-1.js to:
define(function () {
'use strict';
return function (app) {
app.controller('MyCtrl1', function ($scope) {
$scope.hello = "Hello1: ";
});
};
});
And in app.js:
define([
'angular',
'my-ctrl-1',
'my-ctrl-2',
'my-dir-1',
'uiRouter',
], function (angular, ctrl1) {
'use strict';
console.log("app loaded");
var app = angular.module('app', ['ui.router']);
ctrl1(app);
return app;
});
Presumably, you'll have to do the same thing with your other controler.
The documentation has a section on the topic of circular dependencies and other methods to handle them.
I have a problem implementing Toaster into my demoApp which uses RequireJS. Here some code:
(function () {
require.config({
paths: {
'angular': 'bower_components/angular/angular',
'jquery': 'bower_components/jquery/dist/jquery',
'toaster': 'bower_components/toaster/toaster'
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
toaster: {
deps: ['angular', 'jquery'],
exports: 'toaster'
}
}
});
require([
'angular',
'app',
'toaster',
'jquery'
],
function (angular, app, toaster) {
'use strict';
// toaster is undefined. I add it here just for a check. <<<<<<
angular.bootstrap(angular.element('body')[0], ['myApp']);
});
})();
This is main.js and toaster is undefined where I wrote the comment near the end. The file is loaded as I can see it at the Sources tab in the console.
In addition, wherever I want to use toaster, it is undefined. Here some code from the same demo app:
First case:
define(['somefile', 'toaster'], function (someModule, toaster) {
'use strict';
// toaster is undefined
});
Second case (John Papa Angular Style Guide):
define(['somefile', 'toaster'], function (someModule) {
'use strict';
someModule.controller('NewController', NewController);
NewController.$inject = ['someDeps', 'toaster'];
function NewController(someDeps, toaster) {
// angular.js:13424 Error: [$injector:unpr]
// Unknown provider: toasterProvider <- toaster <- NewController
}
});
Here's what I'm using:
Angular: 1.5.3
RequireJs: 2.2.0
Toaster: 2.0.0
Can anyone tell me what I'm doing wrong?
You have to distinguish between Angular modules and RequireJS modules. Toaster only registers an Angular module, no need to export anything in a RequireJS way.
shim: {
// ...
toaster: {
deps: ["angular", "jquery"]
}
}
Bootstrapping:
require(["angular", "app"], function (angular) {
// here, app.js is loaded in the DOM, so you can bootstrap Angular:
angular.bootstrap(angular.element("body")[0], ["myApp"]);
})
In your app.js:
define(["toaster" /* , ... */], function () {
// here, toaster.js is loaded in the DOM, so you can add the "toaster" Angular module in your Angular app dependencies:
return angular.module("myApp", ["toaster" /* , ... */]);
});
Anywhere else:
define(["app"], function (app) {
// as myApp depends on toaster, you can inject the toaster service the Angular way:
app.controller("MyController", ["toaster", function (toaster) {
// ...
}]);
});
I am working on an application in which I am trying to load angular JS using require JS. My click event is not working in my code. Can someone pls help :
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<body class="internal" >
<div id="contentContainer" class="stratum" data-ng-controller="appController">
<div id="main-bar" class="row">
<div id="go" class="column column.one-quarter-">
<div class="btnLabel"><label for="submitBtn"></label></div>
<div><button id="submitBtn" ng-click="getBarChartData()"> GO</button></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var contextPath = "<%= request.getContextPath() %>";
var appUrl = "<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>";
var isSessionExpired = false;
</script>
<!-- JavaScripts Require JS Library and App JS Files -->
<script type="text/javascript" data-main="<%=request.getContextPath() %>/resources/js/app/uptimeReport.js" src="<%=request.getContextPath() %>/resources/js/libs/requirejs/require.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/app/main-built.js"></script>
</body>
</html>
App.js
/*global require*/
'use strict';
require([
'angular'
], function (angular) {
require([
'controller/environmentController'
], function (appCtrl) {
angular.
module('myApp',[]).
controller('appController', appCtrl);
angular.bootstrap(document, ['myApp']);
console.log("in App.js");
});
});
uptimeReport.js
/*global require*/
'use strict';
requirejs.config(
{
/** set up any additional paths that are outside of your application base * */
paths:
{
angular: contextPath + '/resources/js/libs/angularJS/angular',
},
/**
* The following is not required in this example, but it is an example of
* how to make non-AMD java script compatible with require
*/
shim: {
angular: {
exports: 'angular'
}
},
deps: ['app']
});
controller/environmentController.js
/*global define*/
'use strict';
/**
* The main controller for the app. The controller:
* - retrieves and persist the model via the todoStorage service
* - exposes the model to the template and provides event handlers
*/
define([
'angular'
], function (angular) {
return ['$scope', '$http',
function($scope, $http) {
console.log("in controller123.js");
var businessUrl="http://localhost:8080/UptimeReport/services/getBusinessAreas";
var appUrl="http://localhost:8080/UptimeReport/services/getApplications";
var envUrl="http://localhost:8080/UptimeReport/services/getEnvironments";
$http.get(businessUrl).then(function(response) {
$scope.business = response.data;
});
$http.get(appUrl).then(function(response) {
$scope.application = response.data;
});
$http.get(envUrl).then(function(response) {
$scope.environment = response.data;
});
}];
});
you should bind the getBarChartData function in your $scope
to be able to use event bind
ng-click="getBarChartData()"
if you did not bind the function to the $scope you can use it like
ng-click="Controller.getBarChartData()"
I am trying to create a very simple Angular + Require project template.
I am getting error-
Error: Script error for: ngRoute
http://requirejs.org/docs/errors.html#scripterror
In my index.html i have
require(
[
'jquery',
'angular',
'mainApp',
], function($, angular, mainApp) {
var AppRoot = angular.element(document.getElementById('CollectorWallApp'));
AppRoot.attr('ng-controller','MainController');
angular.bootstrap(AppRoot, ['MainApp']);
});
In mainApp.js i'm doing the following-
'use strict';
define(['angular','ngRoute'],function(angular,ngRoute){
var MainApp = angular.module('MainApp',['ngRoute']);
MainApp.controller("MainController", function ($scope) {
console.log("Main Controller working");
});
//Route configuration goes here
MainApp.config([ '$routeProvider', function ($routeProvider) {
console.log("--->checkiing out $routeProvider");
}]);
return MainApp;
});
In Require config
'paths': {
'angular': 'js/lib/angular/angular',
'ngRoute': 'js/lib/angular-route.min',
.
.
.
.
.
'shim': {
'angular': {
exports: 'angular',
},
'ngRoute': {
exports: 'ngRoute',
deps: ['angular']
},
Unable to debug or pin point the reason.
Note- all my require paths are correct. Kindly help. Thanks
I trying to add angularjs filter with requirejs in my view, but I receive an error:
Error: $injector:unpr Unknown Provider
http://docs.angularjs.org/error/$injector/unpr?p0=localizationFilterProvider%20%3C-%20localizationFilter
Whats wrong?
My Files:
index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>
</head>
<body>
<div class="page" ng-view></div>
</body>
</html>
app.js
'use strict';
define(
[
'angularAMD',
'angular-route',
'angular-animate'
],
function (angularAMD) {
var app = angular.module('FilmOrder', ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
angularAMD.route({
templateUrl: 'static/js/application/views/success.html',
controllerUrl: 'application/controllers/Success',
controller: 'Success'
})
)
.otherwise({redirectTo: '/'});
}]);
angularAMD.bootstrap(app);
return app;
});
main.js
require.config({
baseUrl: "static/js",
paths: {
'angular': 'libs/angular.min',
'angular-route': 'libs/angular-route.min',
'angular-animate': 'libs/angular-animate.min',
'angularAMD': 'libs/angularAMD.min'
},
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate': ['angular']
},
deps: ['application/app']
});
views/success.html
<div class="success">
<div class="success_head">
{{"Пожалуйста, убедитесь в правильности указанных данных." | localization:'index'}}
</div>
</div>
filters/localization.js
'use strict'
define(['application/app'], function (app) {
app.filter('localization', function () {
return 'test';
});
});
controllers/Success.js
define(
[
'application/app',
'application/filters/localization',
'application/services/Application'
],
function (app) {
'use strict';
app.register.controller('Success', function ($scope) {
var Success = {};
$scope.Success = Success;
});
});
Your filter is called after bootstrapping so you should be using app.register instead:
filters/localization.js
define(['application/app'], function (app) {
'use strict'
app.register.filter('localization', function () {
return 'test';
});
});
If this does not help, setup a plunker and I will try to help further.