Here is a snippet:
<!document html>
<html ng-app>
<head>
<title>First</title>
<script src="D:\Coding\angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: ""};
};
</script>
</body>
</html>
Open the .html file with Chrome, the '{{user.name}}' shows on the screen. I think the {{}} position should be the same with the textbox content, what's wrong?
You need to use like this :
<ng-app="Your Module Name ">
In controller write
var app=angular.module("your module name (can be anything)",[]).controller("myCtrl", function("your dependencies "){});
Hope it will work
In the ng-app attribute you need to add app name like as ng-app="myApp"
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
If you are using angular version below 1.3 it should work
DEMO
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.2.3/angular.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: "test"};
};
</script>
</body>
</html>
You need to add like this
ng-app="yourappname"
Refer ng-app directive in documentation
Related
I created one sample application of Angular Js. It's working if I take only one controller. If I took tow controller then it's not working. It's showing Error: [$controller:ctrlreg] The controller with the name 'FirstNameController' is not registered. error. I referred this site
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp">
<div ng-controller="FirstNameController">
First Name : <input type="text" ng-model="firstName"><br>
first Name: {{firstName}}
</div>
<div ng-controller="LastNameController">
Last name : <input type="text" ng-model="LastName"><br>
Last Name: {{LastName}}
</div>
</div>
<script>
angular.module('DemoApp',[]).controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
angular.module('DemoApp',[]).controller('LastNameController', function($scope){
$scope.LastName = "Jagtap";
});
</script>
</body>
</html>
Angular.module("DemoApp") will create the module again.
So declare are
var module = Angular.module("DemoApp")
module.controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
module.controller('lastNameController', function($scope){
$scope.firstName = "Anil";
});
Here's my code, however ng-change is never called. Does anyone know why ? Thanks
<html ng-app="">
<head>
</head>
<body data-ng-init="names=['A', 'B', 'C']">
<script src="resources/js/angular/angular.min.js"></script>
<script src="resources/js/angular/angular.min.js.map"></script>
<select class="form-control input-sm"
ng-model="fda"
ng-change="alert('changed')"
ng-options= "value for value in names" >
</select>
</body>
</html>
You need to have a controller and a corresponding function inside of it,
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
Just add this line in your controller $scope.alert = alert.bind(window);
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = alert.bind(window);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
Following Code is not showing or updating the value of nam in <p> tag. Kindly help !
<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}} </p>
<script>
function myControl($scope){
$scope.nam = {
a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>
You should specify the app module in html page.
<html ng-app="Test">
<body ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}} </p>
Then inject the module and controller like as below.
var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
$scope.nam = {
a : "abcdefg"
};
});
In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myControl">
<input ng-model="nam.a" >
<p> Hello {{nam.a}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.nam = {
a: "abcdefg"
};
});
</script>
</body>
</html>
you should write like this
<body ng-controller="myControl">
<input ng-model = "nam.a">
<p> Hello {{nam.a}} </p>
</body>
https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview
<html>
<body ng-app="yourAppName">
<div ng-controller="myControl">
<input ng-model="nam.a">
<p> Hello {{nam.a}} </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
angular.module('yourAppName', [])
.controller('myControl', function($scope) {
$scope.nam = {
a: 'abcdefg'
}
});
</script>
</body>
</html>
use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function
Here is my code there are two different applications in which two different controllers but the later one is not running. Why is this happening both of these are two different modules?
<!DOCTYPE html>
<html>
<head>
<title>EggHead IO</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<script>
var app=angular.module('ctrldemo', []);
app.controller('FirstCtrl', function($scope){
$scope.name="yashdeep",
$scope.age="21"
});
var papa=angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function($scope){
$scope.name="yamini";
$scope.age="22"
});
</script>
</head>
<body>
<div ng-app="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting"/>
<div>
{{greeting+" "+name+" "+age}}
</div>
</div>
<div ng-app="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>
{{greeeting+" "+name+" "+age}}
</div>
</div>
</body>
</html>
If you want to run multiple angular apps, you will need to manually bootstrap the apps using angulars .bootstrap()
var app = angular.module('ctrldemo', []);
app.controller('FirstCtrl', function ($scope) {
$scope.name = "yashdeep",
$scope.age = "21"
});
angular.bootstrap(document.getElementById('ctrldemo'), ['ctrldemo']);
var papa = angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function ($scope) {
$scope.name = "yamini";
$scope.age = "22"
});
angular.bootstrap(document.getElementById('anodemo'), ['anodemo']);
You will also need to remove the ng-app from the HTML
<div id="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting" />
<div>{{greeting+" "+name+" "+age}}</div>
</div>
<div id="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>{{greeeting+" "+name+" "+age}}</div>
</div>
Fiddle: http://jsfiddle.net/03qj5pwf/
Whether or not this is a good idea, I'm not too sure. I think it would be better to inject the modules into the app.
There can only be one ng-app in a page and angular can only be bootstrapped once.
In order to use separate modules you need to have one master module and inject other modules into it as dependencies
var app=angular.module('ctrldemo', ['anodemo']);
<html ng-app="ctrldemo">
Now you can use controllers, services, directives etc from either module
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</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?