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
Related
Attempting to learn angularjs because I need to modify some stuff at work and that is what they are using and I can't upgrade to Angular2+ at the moment. I have the following code where I'm trying to use the $http.get method but getting $http not defined error in the console.
// js code
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
// HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>
You need to pass $http as a dependency to your controller,
app.controller('HelloWorldCtrl', function($scope,$http){
});
DEMO
var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
var onUserComplete = function(response){
$scope.user = response.data;
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete);
$scope.message = "Hello, AngularJS";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="HelloWorldCtrl">
<h1>{{message}}</h1>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
</body>
</html>
I'm very new to Angular.js.
I'm grabbing images from a MySQL database and printing them to the screen like this:
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' ng-click='popup()'>";
On the echoed div, I have an ng-click. In app.js, this is currently what I have for the ng-click (purely for testing purposes:
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
What I'd actually like to have in that ng-click function is:
modal.style.display = "block";
I'd basically like to set the CSS of another element.
Will I need to apply ng-style in order to do this?
Using ng-style with a $scope variable you can control the display property (or any for that matter):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.display = 'inline';
$scope.setDisplayValue = function(value){
$scope.display = value;
}
});
div#test {
background: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<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.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="test" ng-style="{'display' : display}">{{display}}</div>
<hr />
<button ng-click="setDisplayValue('inline')">Set Display to inline</button>
<button ng-click="setDisplayValue('block')">Set Display to block</button>
</body>
</html>
Plunker mirror: http://plnkr.co/edit/4vR4SEnz7iX81CWIrShw
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 :)
I am learning AngularJS following the code samples in ng-book.
I have the following folder structure under the app root folder
../css
../img
../lib
../lib/angular
../js
../partials
I have angular 1.2.11 installed in the lib/angular directory (yes I know this is not the latest version..)
The following code works fine in Firefox (41.0.1) but in Chrome (45.0.2454.101 m), Edge and IE (11.0.22) I get an error message
"Argument 'MyController' is not a function, got undefined"
Code follows:
index.html in root folder:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="MyController">
{{name}}<br/> {{clock}}
</div>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
in app.js in the js folder:
function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function () {
$scope.clock = new Date();
};
setInterval(function () {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
If I put the app.js into the root folder it still does not work so it is not path related.
If I put the code into an inline script then it works so I don't think it is an issue with the code. Why does this work in one browser but not the others. For reference i am calling this directly from the file browser, not via http.
file:///C:/Users/aaron_000/Desktop/Programming/Angular/app/index.html
If I upgrade to a later version of angular does the problem go away?
I know that this is not the 'proper' way to construct an Angular app, but I am taking it one component at a time :)
Look js/app.js is right. Works fine for me.
var app = angular.module("App", []);
app.controller('AppController', function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="App">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="AppController">
{{name}}
<br/>{{clock}}
</div>
</body>
</html>
Hello I'm started to learn AngrularJS from strach and I have problem with basic two modules and basic filter:
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
angular.module("myapp", []).filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
But this code gives me error : "Argument 'MyController' is not a function, got undefined"
And in HTML browser as page I saw:
{{1+1}}
Filtered: {{myData.text | myFilter:2:5}}
What is wrong with these code?
angular.module("myapp", [])
The above line defines a new module, named "myapp", and overwrite the previously defined module. If you want to get a reference to the module and add a filter to it, use
angular.module("myapp").filter(...)
You're declaring the module twice and you are missing an ending in the ng-controller-div
<!DOCTYPE html>
<html>
<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.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
{{1+1}}
<div>Filtered: {{myData.text | myFilter:2:5}}</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.text = "balsalaskdlas";
});
app.filter('myFilter', function() {
return function(stringValue, startIndex, endIndex) {
return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
};
});
</script>
</body>
</html>