I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>
Related
For the below given code I'm not getting output
<div ng-app="myApp" ng-controller="mCtr">
<p>{{content}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('mCtr',function($scope,$http)
{
$http.get("welcome.html").then(function(response)
{
$scope.content = response.data;
});
});
</script>
I am getting output like this
<!DOCTYPE html>
<html>
<head>
<title>AJS Services HTTP</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p>Welcome to world of AJS</p>
<h1>AJS means Angular JS</h1>
</body>
</html>
I'm going through a basic book for Angular, and it uses a controller to set up a field. However, I don't get the expected output. Searching here and elsewhere, it looks like I'm invoking it correctly, but something's not working. Anything obviously wrong? Anything else to try? Details below. Thanks.
Document html:
<html lang="en" ng-app ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</body>
controller.js:
function AppCtrl($scope) {
$scope.name = "World";
(function closing brace lost by code formatting)
Expected output is "Hello, World", but I get "Hello, {{name || 'World'}}"
You are missing the ng-app and the module in controller.
var app = angular.module('myApp', []);
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope, $http) {
$scope.name = "World";
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>
</body>
</html>
Below is my code. Not sure why ng-repeat shows up completely blank.
Any help greatly appreciated.
Larry
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ngrepeat="x in names">{{x}}</li></ul> </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil","Tobias","Linus"];
});
</script>
</body>
</html>
Fix the typo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ng-repeat="x in names">{{x}}</li></ul> </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil","Tobias","Linus"];
});
</script>
</body>
</html>
Html code:
<div class="container" ng-controller="aditya"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controllers/controller.js"><script>
And calling it in controller.js file
function aditya() {
console.log("Hello World from controller")}
I think your controller name does not match with controller you have assigned in js
angular.module('aditya', function (){
function your_function_name() {
console.log('Hello world from controller')
}
});
Causes for this error can be:
Your reference to the controller has a typo. For example, in the
ngController directive attribute, in a component definition's
controller property, or in the call to $controller().
You have not
registered the controller (neither via Module.controller nor
$controllerProvider.register().
You have a typo in the registered
controller name.
<html>
<head>
<title>Angular JS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="aditya">
</div>
</body>
</html>
controller.js
var mainApp = angular.module("mainApp", []);
mainApp.controller('aditya', function($scope) {
console.log("Hello World from controller");
});
Update
<html>
<head>
<title>Angular JS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('aditya', function($scope) {
$scope.test = "Controller Testing";
console.log("Hello World from controller");
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="aditya">
{{test}}
</div>
</body>
</html>
In the following AngularJS code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js" ></script>
</head>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}]);
</script>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<script>
function Ctrl($scope) {
$scope.name = 'Whirled';
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="name" ng-focus=""><br>
<input type="text" ng-model="place"><br>
</div>
</div>
</div>
</body>
</html>
I want to set focus on the first input element. There isn't an example of this on angular.org and the code above doesn't work. How do you use ng-focus? Does this directive even exist at all?