I have just started an Angularjs tutorial and I fail in running the exercise from the first lesson. It is about creating 2 modules: the first is the bootstraper of the application and the second one contains 2 controllers.
This is the code:
app.js
'use strict';
angular.module('myApp', ['myApp.controllers'])
.run(function ($rootScope) {
$rootScope.title = 'Famouse books';
$rootScope.name = 'Root Scope';
});
controllers.js
angular.module('myApp.controllers', []).controller('SiteController', function ($scope) {
$scope.publisher = 'Site point';
$scope.type = 'Web development';
$scope.name = 'Scope for SiteController';
});
angular.module('myApp.controllers', []).controller('BookController', function ($scope) {
$scope.books = ['Jump Start HTML 5', 'Jump Start CSS', 'Jump Start Responsive Web Design'];
$scope.name = 'Scope for BookController';
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="title"></title>
</head>
<body ng-controller="SiteController">
<span>{{publisher}} excels in {{type}} books</span>
<div ng-controller="BookController">
<h3>Some of the popular books from {{publisher}}</h3>
<ul>
<li ng-repeat="book in books">{{book}}</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="scripts/app/controllers.js"></script>
<script src="scripts/app/app.js"></script>
</body>
</html>
I get the following error:
Bad Argument: Argument 'SiteController' is not a function, got undefined
You added extra ,[] in second sentence. This creates a new module and therefore overwrites the first module that has "SiteController" defined - you want to add to the existing module:
angular.module('myApp.controllers', []).controller('SiteController', function ($scope) {
$scope.publisher = 'Site point';
$scope.type = 'Web development';
$scope.name = 'Scope for SiteController';
});
// you added extra ,[]
angular.module('myApp.controllers').controller('BookController', function ($scope) {
$scope.books = ['Jump Start HTML 5', 'Jump Start CSS', 'Jump Start Responsive Web Design'];
$scope.name = 'Scope for BookController';
});
Calling angular.module('myApp.controllers', []) means: Create Module.
Calling angular.module('myApp.controllers') means: Get Module.
Related
How can i assign multiple controller within a body
Html
<script src="../MyApp.js"></script>
<script src="HomeCaller.js"></script>
<body ng-app="MyApp">
<div ng-controller="AppCtrls">{{secc}}</div>
<div ng-controller="HomeCtrls">{{jan}}</div>
</body>
MyApp.js
(function () {
'use strict'
var app = angular.module('MyApp', [])
app.controller('AppCtrls', function ($scope) {
$scope.secc = "Hello Angular"
})
})();
HomeCaller.js
angular.module('MyApp', [])
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
Remove the [] from the module call so you do not try to re-create it. This will retrieve the existing MyApp module.
HomeCaller.js
angular.module('MyApp')
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
I am a AngularJS beginner and I am using Angular 1.3.15 and I am facing the below error when I try to execute a simple script
Uncaught Error: [$injector:modulerr]
Html
<title>AngularJS data binding</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="myscript.js"></script>
<div data-ng-controller="SimpleController">
Name :
<br/>
<input type="text" ng-model="name"/>{{name |uppercase}}
<div>
<ul>
<li ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
</div>
JS file -
(function(){
var app = angular.module('myApp',[]);
app.controller('SimpleController', function($scope) {
$scope.names = ['test1','test2'];
});
})();
Does the code in the file myscript.js has to be in the (function()}) ?
Thanks,
If you are minifying the js files then
app.controller('SimpleController', function($scope) {
$scope.names = ['test1','test2'];
});
this becomes something like
x.controller('SimpleController', function(a) {
a.a = ['test1','test2'];
});
then there is no $scope in the controller so use like,
app.controller('SimpleController', ['$scope', function($scope) {
$scope.names = ['test1','test2'];
}]);
then angular will solve the arguments you pass to functions,
for example:
app.controller('SimpleController', ['$scope', function(a) {
a.names = ['test1','test2'];
}]);
angular will match the a to the $scope property.
Error is coming due to minification. Try this
JS:
(function(){
var app = angular.module('myApp',[]);
app.controller('SimpleController',['$scope', function($scope) {
$scope.names = ['test1','test2'];
}]);
})();
The way you try is minification proof, read here
I'm trying to inject $scope in a controller created using the $controller service.
I'm getting the following error:
Unknown provider: $scopeProvider <- $scope <- TestController
It's important to mention that the creation is happening inside a directive's link function.
I've written a simple example to show the error.
app.js:
(function() {
angular.module('app', [])
.controller('TestController', [
'$scope',
function($scope) {
// I want to be able to use 'message' from the directive's template
// as if the controller was loaded directly using ng-controller
$scope.message = 'Hello World!';
}
])
.directive('directive', [
'$controller',
function($controller) {
return {
restrict: 'A',
template: '<div>{{ message }}</div>',
link: function(scope) {
// In the actual app the controller is dynamically selected
// I'm registering a $watch here that provides me the
// name of the controller
scope.myController = $controller('TestController');
}
};
}
]);
})();
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Testing injection</title>
</head>
<body>
<div directive></div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Question: Why is this happening? Can you explain me the logic behind this behaviour? Any workaround?
Thank you.
Following Digix's answer, I was able to make it work:
var locals = {};
locals.$scope = scope;
$controller('TestController', locals);
My assumption is that in this way, instead of creating a new scope, the controller shares the one of the directive.
var locals = {};
locals.$scope = scope.$new();
$controller('testCtrl', locals);
I am using
<div ng-controller="DailyReportsController">
<iframe ng-src="{{content}}" style="width:100%;height:100%;"></iframe>
</div>
to include 'pdf' file in html page. The corresponding controller is given below
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce',
function($scope, $state, $rootScope, mainWebService, $http, $sce) {
angular.element(document).ready( function() {
var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.content =$sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
}
]);
But following error raises
TypeError: Cannot read property 'nodeName' of undefined
at La (http://localhost:8080/flipxl/scripts/angular.min.js:142:109)
at Object.Kb.$set (http://localhost:8080/flipxl/scripts/angular.min.js:65:380)
at Object.fn (http://localhost:8080/flipxl/scripts/angular.min.js:63:358)
at k.$digest (http://localhost:8080/flipxl/scripts/angular.min.js:109:172)
at k.$apply (http://localhost:8080/flipxl/scripts/angular.min.js:112:173)
at h (http://localhost:8080/flipxl/scripts/angular.min.js:72:454)
at w (http://localhost:8080/flipxl/scripts/angular.min.js:77:347)
at XMLHttpRequest.z.onreadystatechange (http://localhost:8080/flipxl/scripts/angular.min.js:78:420)
Have any solution please share with me
Works perfectly fine for me when adding a $scope.$apply because of the ready event and fixing the missing braces (DEMO, iframes unfortunately don't seem to work in SO snippets).
I was not able to reproduce your error though.
mainApp.controller('DailyReportsController',
['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce', function($scope, $rootScope, $http, $sce) {
angular.element(document).ready( function() {
//var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
$scope.$apply(function() {
$scope.content = $sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");
});
});
}]);
You can use directive feature for this as below.
var ngApp = angular.module("ngApp",[]);
ngApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
ngApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
and html like below
<div style="height:100%" pdf-loader></div>
Take a look at running example for this at http://jsbin.com/quzoyiloke , And code at http://jsbin.com/quzoyiloke/3/edit?html,js
You can also try by creating new html file whose content is as following.
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.directive("pdfLoader",function(){
return function(scope,elem,attr){
elem.append("<object width='100%' height='100%' src='"+ scope.content +"' type='application/pdf'></object>");
};
});
myApp.controller("ngCtrl",function($scope){
$scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf";
});
</script>
</head>
<body ng-app="ngCtrl">
<div ng-controller="ngCtrl">
<div style="height:100%" pdf-loader></div>
</div>
</body>
</html>
I need to understand "How can I access the value of $rootScope value defined in one module into other module?"
Below is my code :
Index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="test.js"></script>
</head>
<div ng-controller="serviceDIController">
Service Values is : <b> {{sdiParam}} </b> <br/>
Factory Values is : <b> {{fdiParam}} </b> <br/>
Root Scope Values is : <b> {{rootParam}} </b>
</div>
</html>
script.js
var app = angular.module("myapp", ['testModule']);
app.controller('serviceDIController',['$scope','$rootScope',
'testService','testFactory',function($scope, $rootScope,testService, testFactory)
{
$scope.sdiParam = testService.param;
$scope.fdiParam = testFactory.fparam;
// $scope.rootParam = $rootScope.root; // How to access "$rootScope.root" value defined in test.js in current module inside a controller?
}
]);
test.js
var testapp = angular.module("testModule", []);
testapp.service('testService', function() {
this.param = "Service Param1 DI";
});
testapp.factory('testFactory', function() {
var fact = {};
fact.fparam = "Fact Param1 DI";
return fact;
});
testapp.controller('testCtrl', ['$scope',
function($rootScope) {
$rootScope.root = "Root Scope Param1";
}
]);
Live demo : http://plnkr.co/edit/X0aamCi9ULcaB63VpVs6?p=preview
Checked below example but did not work:
AngularJS $rootScope variable exists, but not accessible
Explicitly inject '$scope', not '$rootScope' in testCtrl, so a new scope is created just for that controller and passed as the first argument regardless of the name used for that argument.
Incorrect:
testapp.controller('testCtrl', ['$scope',
function($rootScope) {
$rootScope.root = "Root Scope Param1";
}
]);
Correct:
testapp.controller('testCtrl', ['$rootScope',
function($rootScope) {
$rootScope.root = "Root Scope Param1";
}
]);
Here is your updated working Plunkr
Basically I prefer to use $scope.$root to prevent the injection of the $rootScope.
You have also set the testCtlr on the <head> tag, don't know if it was on purpose or not.