ReferenceError: random is not defined at Scope.$scope.generateRandom angular js - javascript

For some reason it gives me the error:
ReferenceError: random is not defined at Scope.$scope.generateRandom
I dont know what im doing wrong, you can go check out the website im using to do this HERE.
index.html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Basic Login Form</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script type="text/javascript" src="script23.js"></script>
</head>
<body ng-app = "app" ng-controller = "app">
<button ng-click = "generateRandom()">Generate Random Number</button>
<br> {{randomNumber}}
</body>
</html>
script23.js:
var app = angular.module('app', []);
app.service('random', function(){
var randomNum = Math.floor(Math.random()*10)
this.generate = function(){
return randomNum;
}
});
app.controller('app' , function($scope){
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
})

To use service in controller, you need to inject it.
app.controller('app', function ($scope, random) {
I'd recommend you to use following syntax:
app.controller('app', ['$scope', 'random', function ($scope, random) {
See Why we Inject our dependencies two times in angularjs?

Change your controller like this, since you are using the service 'random'
myApp.controller('app', ['$scope','random', function( $scope,random)
{
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
}])
Here is the working Application

Related

Angular js binding expression does not show value

The index.html page looks like this.
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
The script.js file looks like this:
var MainController = function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
But when I boot up the application my page shows :
{{message}}
{{person.firstName}}
and not the values that it should. Am I missing something here? I am using spring boot.
I have debugged the chrome and have seen the js file loading properly, it even hits the debugger point in the js file,hence the file loading is not the problem i suppose.
UPDATE- THIS WORKED
var MainController = function($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
angular.module('mainApp', [])
.controller('MainController', MainController);
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
Since angular 1.3+ global function declaration of controller haven't been supported. So you have first create an angular module and then bind all of its angular component to it.
Also move /js/script.js right after angular.js reference with closing </script> tag.
Code
angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
Then do add mainApp module inside ng-app directive like ng-app="mainApp" on html tag.
Demo Here
You need to define the module and the controller,
HTML:
<body ng-app="DemoApp" ng-controller="DemoController">
{{message}} {{person.firstName}}
</body>
Controller:
var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
});
DEMO

Angular: Open new tab without popup blocker

I would like to open a new tab after $http call. Currently, even-though the call is made after user click, popup blocker doesn't allow new tab to be created.
HTML:
<div ng-controller="ExampleController">
<button ng-click="openNewTab()">Open new tab</button>
</div>
Controller
.controller('ExampleController', ['$scope','$http', function($scope,$http) {
$scope.openNewTab = function(e) {
$http.get("test.com").finally(()=>{
window.open();
});
};
}]);
Plunker
Try this Code to open the new tab call the function
.controller('ExampleController', ['$scope','$http', function($scope,$http,$window) {
$scope.openNewTab = function(e) {
$http.get("test.com").finally(()=>{
$window.open('url','_blank');
});
};
}]);
You can use setInterval out of ajax call where you have to check your variable again and again which will be set in ajax call when condition matches then you can open new tab.
I've also found a workaround for you.
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script data-require="jquery#2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.9/angular.js"></script>
<script src="demo.js"></script>
</head>
<body ng-controller="DemoCtrl">
<button ng-click="doesntWork()">This Doesn't Work</button>
</body>
</html>
and the angular code:
angular.module("Demo", []).controller("DemoCtrl", function($scope, $http) {
$scope.doesntWork = function() {
var isSuccess=0;
$http.get('https://api.github.com/users/angular').then(function (result)
{
isSuccess=1;
});
var timer = setInterval(function () {
if (isSuccess!= 0) {
clearInterval(timer);
}
if (isSuccess== 1) {
var newWin = $window.open('', '_blank');
newWin.location = "https://www.google.co.in";
}
},1000);
};
});
You can do this by using the $window service. $window is a wrapper around the global browser object window. Maybe this solves your answer too:
Open a new tab on button click in AngularJS
I've also found a workaround for you.
<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script data-require="jquery#2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.9/angular.js"></script>
<script src="demo.js"></script>
</head>
<body ng-controller="DemoCtrl">
<button id="test" ng-click="works()">This Works</button>
<button ng-click="doesntWork()">This Doesn't Work</button>
</body>
</html>
and the angular code:
angular.module("Demo", []).controller("DemoCtrl", function($scope, $http) {
function openInNewTab() {
var uri = 'http://www.google.nl';
var link = angular.element('');
angular.element(document.body).append(link);
link[0].click();
link.remove();
};
$("#test").click(function(){
openInNewTab();
});
$("#test").click();
$scope.works = openInNewTab;
$scope.doesntWork = function() {
$http.get('https://api.github.com/users/angular').then(openInNewTab);
};
});

Can't make Angular.js to work

I'm trying to learn Angular.js. I set up a simple page, in which I want to display a message from my script file. Here's the HTML structure:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
And this is my script.js:
var MainController = function($scope){
$scope.message = "my message";
};
I'm supposed to see the words my message on the page, but instead I'm seeing literally {{message}}. I tried to wrap the JS code in self-envoking function:
(function() {
var MainController = function($scope) {
$scope.message = "my message";
};
}());
But it didn't have any result.
What am I doing wrong?
It's old syntax and you cannot declare controller like that. Now you need to register controller on your module.
angular.module('anyModuleName',[]).controller('yourControllerName',function(){
});
and also edit to ng-app="anyModuleName" where you initialize your app. In your case <html ng-app="anyModuleName">

AngularJS controller does not work, why? (simple controller example)

I just saw a video of introduction to AngularJS and use the following example
The html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
The js:
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
In the example I've seen this structure works, but when I test it does not work.
The console gives me this error:
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContrl&p1=not%20a%20function%2C%20got%20undefined
Can be used in this way the controller?
Or is it a bad practice
Example in Plunker:
Code example
I think, it's a bad practice
You better use:
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', ['$scope', function ($scope) {
// any code here
]);
And use this in HTML:
<html ng-app="myApp">
<body ng-controller="MainContrl">
// any code here
</body>
</html>
You may need to define your angular App first :
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', function ($scope) {
$scope.message = "Hello friend";
});
here is a working example on Plunkr
I think you have to have a main app.
In myapp.js
var yourApp = angular.module('myApp',[]);
In mainController.js (it should not be called test.js)
yourApp.controller('MainController',['$scope',function($scope){
$scope.message = "Hello world";
}]);
In your index.html
<html ng-app="myApp">
<body ng-controller="MainController">
{{message}}
</body>'
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/myapp.js"></script>
<script src="js/mainController.js"></script>
</html>
Change Your script.js to
var app=angular.module('myapp',[]);
app.controller('MainContrl', ['$scope', function($scope){
$scope.message = "Hello friend";
}]);
and in html page put ng-app in body tag and remove ng-app from html
<body ng-app="myapp" ng-controller="MainContrl">
First declare your app in your html:
<html ng-app="myApp">
Second define your app in your js:
var app = angular.module('myApp', []);
Then definewhatever controller in whatever js file (best practice sugests that every controller has its own file):
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
Then declare your controller and variables in your html:
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
</body>
Don't forget to bind your controller with your app:
app.controller('MainContrl',MainContrl);
I also can see that you're using bower, so I suggest you read this:
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

Load JavaScript at Runtime in AngularJS

I have an AngularJS app. I want this app to run both in the browser and be able to distribute it with PhoneGap. In an attempt to do this, I have the following code:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
app.js
function startApp() {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function() {
...
});
myApp.run(function() {
...
});
}
controller.js
"use strict";
myApp.controller('MyController', function($rootScope, $scope, $location) {
...
});
myApp.controller('MyOtherController', function($rootScope, $scope, $location) {
...
});
...
If I add controllers.js after app.js in the head tag, I get an error that says:
Uncaught ReferenceError: myApp is not defined
This is happening because I'm manually bootstrapping the AngularJS app. I need to manually bootstrap it because of my need to startApp. For this reason, I need a way to dynamically load controllers.js from within startApp. Yet, I'm not sure how to do that. Can anyone provide some help?
THank you
you have missed ng-app="" attribute in html tag...
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
Why don't you give requirejs a try?
He has a strong dependency management based loader and will avoid issues like this.
First thing first: To initialize your app angular module its require angular-route.js with angular.js file and these js file should be loaded before your app js.
<head>
<script type="text/javascript" src="/app/angular.js"></script>
<script type="text/javascript" src="/app/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
</head>

Categories