jsp page
<!DOCTYPE html>
<html data-ng-app="myApp">
<head><title>Sample JSP Page</title></head>
<body>
<div data-ng-contoler="mainController" >
<input type="text" data-ng-model="greeting">
This is from angular {{greeting}}
</div>
<button data-ng-click="test()">doSomething</button>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/toast.js"></script>
<script src="app/app.js"></script>
<script src="app/mainController.js"></script>
<script src="app/services.js"></script>
</html>
My module myApp
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($logProvider){
$logProvider.debugEnabled(true);
});
My mainController.js
myApp.controller('mainController',function($scope, $http, myAppFactory) {
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
$scope.test = function test(){
var v= "asddas";
myAppFactory.test().success(function(date){
var a = data;
})
}
});
My service.js myAppFactory
myApp.factory('myAppFactory', function($http) {
var factory = {};
factory.test = function(){
return "test";
}
return factory;
});
When i press the doSomething button it should go to scope.test
The problem is that the controller is not available.
When i start eclipse, and go to the page on chrome, press f12
i can find the contoller with my code in it, but it never runs.
On start the "greeting" is set to be:
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
But on the page it is blank, on f12 i see with breakpoints that the code
never worked.
The input field with the data-ng-model="greeting"
is working fine. When i go to the page and write something in it
it is instantly displayed on change.
All files are loaded on the debug window. app, mainController and service.
On load the pages gets all files with status 200 OK
But i cant enter with breakpoints in the mainController.
change typing mistake
<div data-ng-contoler="mainController" >
to
<div data-ng-controller="mainController" >
Hope it will work.
Related
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
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">
I am completely new to AngularJS and have been stuck with this. I want to be able to conditionally display a Javascript alertbox on the page.
Suppose I want to do something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<script>{{warning}}</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.warning = "alert('This is a warning');";
});
</script>
</body>
</html>
So I assumed this has to do with AngularJS sanitizing the string and taking out the javascript. After some googling I tried the following:
$scope.warning = $sce.trustAsJS("alert('This is a warning');");
I also tried trustAsHtml and added the script tags in the string, but neither displayed the alertbox. Could someone tell me and tell me what is going wrong?
it should actually be like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
if ($scope.name==='Superhero') {
alert("hello");
}
}
if you want the alert to be shown conditionally by a changing model on view try something like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.$watch('name', function(newVal, oldVal) {
alert("hello");
})
}
now every time you will change the 'name' model in your view, the alert will pop-up
refer to the doc for more information about watches
You want $scope.warning to be a function, not the result of the execution of one nor a string.
$scope.warning = function () { alert('This is a warning'); };
That way it can be called later in your view : warning() should display the alert.
Alternatively, since alert is a function, you may just want to use it as $scope.warning :
$scope.warning = alert;
+
warning('this is a warning')
will produce the same result.
I am calling a function from the controller scope, but in the console the values are printed three times. Why is this happening?
SOURCE
<!DOCTYPE html>
<html ng-app="myModule" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03,promo04'">
<div ng-controller="PricingController" >
{{splitArray()}}
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.controller('PricingController',['$scope', function($scope){
$scope.priceString = $scope.priceList;
$scope.array = [];
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
}]);
</script>
</body>
</html>
CONSOLE OUTPUT
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
Expected Output
promo03,promo04
promo03
promo04
This is called for every digest loop of Angular.
If you keep your program running, you'll have even more logs.
To prevent it, call your function INTO your controller, not into a binded value into your html.
For instance :
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
$scope.splitArray();
I am new to angular JS. I wrote a bit of angular code.
i have defined controller code also.Can anybody tell me why i cannot get scope variable value?
Any thing i missed ?
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<!--this above is external java script
file my controller is not working,
what problem i am facing ?-->
<body>
<!-- the below is ng-controller -->
<div ng-controller="HelloCtrl">
say hello to : <input type="text" ng-model="name"/>
<h1> Hello, {{name}}! </h1>
</div>
Script:
<script>
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
</body>
</html>
you should define your app and your controller like this :
var myApp = angular.module("myApp", []);
myApp.controller("HelloCtrl", function ($scope) {
$scope.name = "world";
});
You are missing var myApp = angular.module('myApp',[]);
Your script should look like:
<script>
var myApp = angular.module('myApp',[]);
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
Working example. Depends on angular version. :)