<!doctype html>
<html lang="en" data-ng-app>
<head>
<meta charset="utf-8">
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
function nameController($scope){
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}
</script>
</head>
<body data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"></input>
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"></input>
<br />
<br />
Hello {{ firstname }} {{lastname}}
</body>
</html>
Initialized the model with an global function where I have declare Scope object and using it I am passing the firstname and lastname to the view.
Output :
Here the firstname and lastname values are not getting reflected.
JSFiddle Link here
Edit : I found this code here, and the output.
I would usually reference my app directly by declaring it as a variable in the JavaScript, and then referencing the name of the app in the declaration in the html tag. The following will work:
<html lang="en" data-ng-app="myapp">
<head>
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('nameController', ['$scope', function($scope){
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}]);
</script>
</head>
<body data-ng-controller="nameController">
First Name : <input type = "text" data-ng-model="firstname"></input>
Last Name : <input type = "text" data-ng-model="lastname"></input>
Hello {{ firstname }} {{lastname}}
</body>
</html>
JSFiddle
For an angular application to work, you need to define the module. Which you have not done.
define a app like this:
var myapp = angular.module('myapp', []);
then refrence this app in your html like this:
<html lang="en" data-ng-app="myapp">
here is a running fiddler for you code running Code
you need always to have a defind app for the angular to work and the controller should be part of that app.
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("nameController", ['$scope', function($scope) {
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}]);
</script>
<body ng-app="myApp" data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"/>
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"/>
<br />
<br />
Hello {{ firstname }} {{lastname}}
</body>
Related
I am learning AngularJS and trying to understand the $scope part, I was trying to do string combine by creating three variables(ng-model) and see how javascript works with angularJS. Say if I insist on creating three of the ng-model, how do I combine the two strings and put them together in the rstString? I tried to read the $scope elements and the data is there, so what did I miss? Thank you.
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.rstString = $scope.firstString +$scope.secondString;
});
</script>
</body>
</html>
I added a button in your example :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString = 'hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
You can do like this too :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString"/><br><br>
Second String: <input ng-model="secondString"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstString = 'hello ';
$scope.secondString = ' world ';
$scope.rstString = 'aaa';
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
you can use ng-change event
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '" ng-change="handleChange()"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'" ng-change="handleChange()"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.handleChange = () => {
$scope.rstString = $scope.firstString +$scope.secondString;
};
});
</script>
</body>
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";
});
Exercise.js :
var myAppModule = angular.module("myFirstModule", []);
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller = ("MyAppController", MyAppController);
Html file:
<!DOCTYPE html>
<html>
<head ng-app="myFirstModule">
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
When i am trying to solve this i am getting error. I Know its a small error but i am not able to figure this out.
In addition to #Sajeetharan's answer above, there is also one minor issue that your Exercises.js script may not be getting loaded:
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
The ~ is missing, so the code is dependent on where the HTML file is located(it'll look in the current directory). The angular.js script tag is not dependent.
There are few issues
(i) Change your controller as,
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
(ii) Load angular.js script before loading your script.js
(iii) Place ng-app ahead of body
DEMO
var myAppModule = angular.module("myFirstModule", []);
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head >
</head>
<body ng-app="myFirstModule">
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
Change your controller to
myAppModule.controller('MyAppController', function ($scope) {
// your code goes here
});
or
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller("MyAppController", MyAppController);
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
Can anyone tell me how can I do that please?
<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.4.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form.one" ng-submit="submitForm()">
<input ng-model="name">
<input type="submit">
</form>
<p>Hello {{name}}!</p>
</body>
And my app.js is
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
var data = {};
$scope.submitForm = function() {
var data = form.one.name;
};
});
How can I save input to the data variable? Is it possible to save on keypress?
To use your form with Angular, there's a few modifications you need to make for this code to work: first, you need to add the novalidate attribute to your form; it is used to disable the browser's native form validation. Angular will use it's own validation. Here's a few other modifications (they're explained in detail here):
<body ng-controller="MainCtrl">
<form novalidate>
<input ng-model="name">
<!-- The method for submitting the data goes on the button. -->
<!-- The name is passed to the method you want to use to store the data, which you make happen when the button is clicked by using the ngClick directive. -->
<input type="submit" ng-click="submitForm(name)" value="Click me!">
</form>
<p>Hello {{name}}!</p>
<!-- This bit of code is to display the results of adding names to the array in the browser window: -->
<pre>{{ data }}</pre>
</body>
Here's the Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Name";
// I put the data array in the $scope so it can be displayed in the browser window and you can see the results:
$scope.data = [];
// Now, whenever the button is clicked, this method is run.
// It then stores the name in the 'data' array defined above.
$scope.submitForm = function(name) {
$scope.data.push(name);
};
});
Try this for it to show straight after typing:
<body ng-controller="myApp">
<input type="text" ng-model="name">
<p>Hello {{name}}!</p>
</body>
Javascript:
var myApp = angular.module('myApp',[]);
myApp.controller('myApp', function ($scope) {
$scope.name = $scope.name;
console.log($scope.name)
});
Small little JSFiddle for this:
https://jsfiddle.net/joshdmiller/HB7LU/