I am following up a tutorial I found here http://codepen.io/keval5531/details/LVYROp/
As a result I am able to come up with the below solution on my app.js
var app = angular.module('plunker', []);
app.controller('DemoCtrl', function($scope) {
$scope.value = false;
$scope.toggleChange = function(){
if($scope.value == false) {
$scope.value = true;
}
else
$scope.value = false;
console.log('testToggle changed to '+$scope.value);
};
});
Now I have this in my index.html file
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.12/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="DemoCtrl">
<br><br>
<ion-toggle ng-model=value ng-change="toggleChange()">Test toggle</ion-toggle>
</div></body>
</html>
Here is a plunk demo I have made
https://plnkr.co/edit/MUp7QckDCgg50FvcfGeG?p=preview
My challenge is that based on the codepen tutorial I am learning with, nothing happens on my display. Kindly assist!
There is a couple of issues here. The first issue is that you didn't include the angular.js file, this is the core of angular and is required. Also, the angular source that you did use didn't work. Here is a fully functional example
var app = angular.module('plunker', []);
app.controller('DemoCtrl', function($scope) {
$scope.value = false;
$scope.toggleChange = function(){
if($scope.value == false) {
$scope.value = true;
}
else {
$scope.value = false;
console.log('testToggle changed to '+$scope.value);
}
};
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular-resource.js"></script>
</head>
<body>
<div ng-controller="DemoCtrl">
<br><br>
<input type="checkbox" ng-model=value ng-change="toggleChange()">Test toggle</ion-toggle>
</div></body>
</html>
I used an alert for dramatic effect.
Regards :)
Related
I have just started learning AngularJS but I am stuck at this point. I made three files in one project:
1.Index.html
2.Angular.min.js( downloaded from official site)
3.Script.js
But when I am opening html in browser I am not getting the value of test property. It just shows the {{test}} (not the value). Will be very thankful if you help me out.
<!DOCTYPE html>
<html lang="en" ng-app = "myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller = "MyCtrl">
{{test}}
<script src = "angular.min.js"</script>
<script src = "script.js"></script>
</body>
</html>***
Script.js file is
var app = angular.module('myapp',[]);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.test = "Welcome to my world";
}]);
Check the network tab be sure angular itself is actually loading copying and pasting your code into a running sample.
var app = angular.module('myapp',[]);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.test = "Welcome to my world";
}]);
<!DOCTYPE html>
<html lang="en" ng-app = "myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller = "MyCtrl">
{{test}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!--
you were missing a > here
<script src = "angular.min.js"</script>
<script src = "script.js"></script>
-->
</body>
</html>
Hi I am just learning the AngularJS, and trying to save cookies values
I have two html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="helloCtrl">
Hello <input type="text" ng-model="helloText"/>
<input type="button" ng-click = "redirectToTest()" value="Go" />
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
Hello {{cookiesText}}
</body>
</html>
test.js
var myApp = angular.module('myApp', ['ngCookies']);
var helloCtrl = myApp.controller('helloCtrl',
function ($scope, $cookies, $window) {
$scope.helloText = "Hello World!"
$scope.redirectToTest = function(){
$cookies.put('hello', $scope.helloText);
console.log("Added hello to cookies : "+ $cookies.get('hello'));
$window.location.href = "test.html";
}
});
var testCtrl = myApp.controller('testCtrl',
function ($scope,$cookies) {
$scope.cookiesText = '';
$scope.init= function(){
$scope.cookiesText = $cookies.get('hello');
}
});
I am adding some text into cookies and redirecting to test.html to display cookies value, but it lost somewhere ?
Is there $window.location.href reset cookies value ?
I am a newbie to the AngularJS World. I have this example to define a controller for AngularJS page. I ended up displaying the raw text in the browser when tried to open the page.
I am trying with downloading the angular.js (lib/angular.js) to local filesystem.
The page is as given below:
<!doctype html>
<html ng-app>
<head>
<script src="lib/angular.js"></script>
<script type="text/javascript">
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{clock}}!</h1>
</div>
</body>
</html>
I ended up getting the result as below:
Hello {{clock}}!
In the browser console, I am getting the error log as follows:
Error: [ng:areq] Argument 'MyController' is not a function, got undefined
What am I missing?
Best Regards,
Chandra.
You need to initiate an angular module and create a controller using the same.
For Example:
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
And then you need to specify the app in the html markup with ng-app="myApp"
So your html will be:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{clock}}!</h1>
</div>
</body>
</html>
Working Plunkr
I'm quite new with Node/Angular/.. and tried this simple script. But it doesn't work, whats wrong with it?
I always get Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=rCtlr&p1=not%20a%20function%2C%20got%20undefined
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<script src="lib/angular/1.3.0/angular.min.js"></script>
<script src="lib/socket.io/1.2.0/socket.io.js"></script>
</head>
<body ng-controller="rCtlr">
<h1>{{xTime}}</h1>
<script>
function rCtlr($scope){
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}
</script>
</body>
</html>
Without Angular it works fine, I guess there is an issue with the function scope?
Thanks for help!
To make it work properly you should:
1) Add name to your ng-app:
<html ng-app="myapp"> //myapp is an example name
2) Then you can define angular module and controller like this:
angular.module("myapp",[]) // define module with name from ng-app
.controller('rCtlr',['$scope', function($scope){ //define controller for your module
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);
alternatively (it does the same):
var app = angular.module("myapp",[]);
app.controller('rCtlr',['$scope', function($scope){
//controller body
}]);
PS. It doesn't matter, but name of you controller should be "rCtrl" rather than "rCtlr"
Here is a refference to angular docs: https://docs.angularjs.org/guide/controller
Update, thanks to MarkS: But .. see comment to Mark's answer
<!DOCTYPE html>
<html >
<head lang="en">
<meta charset="UTF-8">
<title>AngularSocket</title>
<script src="lib/angular/1.3.0/angular.min.js" type="text/javascript"></script>
<script src="lib/socket.io/1.2.0/socket.io.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body data-ng-app="angApp">
<div data-ng-controller="timeCtrl">
<h1>{{xTime}}</h1>
</div>
</body>
</html>
app.js:
angular
.module('angApp', [])
.controller('timeCtrl', ['$scope', function($scope) {
var socket = io.connect();
socket.on('updateTime', function (data) {
$scope.xTime = data.updateTime;
console.log(data);
});
}]);
my code my controller:
App.controller('TestCtrl', function ($scope, $http) {
console.log("CTRL STARTED");
if (angular.isDefined($scope.test)) <--------------- ERROR
{
alert('UNDEFINITA');
LoadDefault();
};
My HTML
<select class="form-control" ng-options="people.id as people.name for people in peoples" ng-model="test" ng-change="LoadAnotherSelect()">
<option value="">Seleziona azienda...</option>
</select>
How to know if test variable is undefined????
Thank's in advanced
your code seems fine,
what error are you getting?
as you can see, this code works, using angular.isDefined($scope.name):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
if (angular.isDefined($scope.name)) {
alert($scope.name);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>