Why the output for second div tag is displaying normal? Why there is no binding of angular js with it?
Could you please explain me?
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Demo</title>
<script src="scripts/angular.min.js"></script>
<script src="scripts/Script.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="myApp1" ng-controller="myCtrl">
{{ first_name +" "+ last_name }}
</div>
<div ng-app>
10 +20 = {{ 10 + 20 }}
{{ 1 == 2 }}
{{ ['ajay','kumar','hari','bag'][0] }}
</div>
<script>
var my_module = angular.module("myApp1", []);
var my_Controller = function ($scope) {
$scope.first_name = "vijay";
$scope.last_name = "kumar";
}
my_module.controller("myCtrl", my_Controller);
</script>
</body>
</html>
-----------output------
vijay kumar
10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }}
Try like this.
var app = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.first_name = "vijay";
$scope.last_name = "kumar";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body >
<div ng-app="myApp1" ng-controller="myCtrl">
{{ first_name +" "+ last_name }}
<div>
10 +20 = {{ 10 + 20 }}
{{ 1 == 2 }}
{{ ['ajay','kumar','hari','bag'][0] }}
</div>
</div>
</body>
As specified in the AngularJS docs only one AngularJS application can be auto-bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application. If you want to use another ng-app you should manually bootstap the app.
See the angularJS docs section for the detailed explanation.
https://docs.angularjs.org/api/ng/directive/ngApp
From AngularJS documentation -
only one AngularJS application can be auto-bootstrapped per HTML
document.
In other words, ng-app directive can be used only once in your entire application. S
In your case, ng-app is limited to just one div tag. Outside this div tag, angularjs' features won't be accessible. you can have a parent div with the ng-app directive, followed by the current divs. Or simply but the directive in your body tag.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="scripts/Script.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="myApp1"> <!-- parent div -->
<div ng-controller="myCtrl">
{{ first_name +" "+ last_name }}
</div>
<div ng-app>
10 +20 = {{ 10 + 20 }}
{{ 1 == 2 }}
{{ ['ajay','kumar','hari','bag'][0] }}
</div>
</div>
<script>
var my_module = angular.module("myApp1", []);
var my_Controller = function ($scope) {
$scope.first_name = "vijay";
$scope.last_name = "kumar";
}
my_module.controller("myCtrl", my_Controller);
</script>
</body>
</html>
Related
How could I add a space/special character after the "₹".
Expected output:₹ 49
Current output:₹49
HTML - {{cart.getTotalPrice() | currency:"₹"}}
You cannot achieve with the currency filter. just use the number filter.
<div ng-controller="MyCtrl">
<input class="tb" ng-model="numberInput" type="text" /> {{ "₹ "+(numberInput | number:2) }}
</div>
DEMO
var app = angular.module("app", []);
app.controller('AddSiteURLCntr', function($scope, $sce) {
$scope.numberInput = '1275.23';
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="AddSiteURLCntr">
<input class="tb" ng-model="numberInput" type="text" /> {{ "₹ "+(numberInput | number:2) }}
</div>
</body>
</html>
You can try this
View
<span ng-bind="getCurrency(cart.getTotalPrice())"></span>
<span ng-bind="getElem(cart.getTotalPrice())"></span>
Controller
$scope.getCurrency = function (item) {
return ($filter('currency')(item,'₹')).substring(0,1);
}
$scope.getElem = function (item) {
return ($filter('currency')(item,'₹')).substring(1,item.length);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="my-controller">
<input type="number" name="price" ng-model="totalPrice">
<p>{{getTotalPrice() | currency : "₹ "}}</p>
</div>
<script type="text/javascript">
var app = angular.module("my-app",[]);
app.controller("my-controller",function($scope){
$scope.totalPrice = 0;
$scope.getTotalPrice = function(){
return $scope.totalPrice;
}
});
</script>
</body>
</html>
Just put a space after symbol, like this
HTML - {{cart.getTotalPrice() | currency:"₹ "}}
and you will get your desired output...
You can extend the currency filter creating your own filter...
angular.module('yourModuleName').filter('money', filter);
function filter($filter, $locale) {
const formats = $locale.NUMBER_FORMATS;
return function(amount, currencySymbol) {
if (!currencySymbol) currencySymbol = formats.CURRENCY_SYM + ' ';
return $filter('currency')(amount, currencySymbol);
};
}
Now, you can apply your new filter called 'money'...
<span>{{vm.contractedPrice | money}}</span>
I am new to Angular JS and I am facing some issues in the ng-controller which is not sending values to the browser screen. I am using angular 1.5.8. How can I get this code to display values.Attached is my output as well
Here is my code :
script.js
(function () {
var gem = {
name: "Dodecahedron",
price: 2.95,
description: "great stone"
};
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.product = gem;
});
})();
html file
<!DOCTYPE html>
<html data-ng-app="store">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Angular Demo</title>
</head>
<body >
{{"Hello" + "Angular"}}
<br />
Here is Where our gem information will be displayed through the controller.
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
</body>
</html>
You can use $scope variable inside controller
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
in html you can access $scope variables directly like this
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{product.name}}</h1>
<h2>Produce Price : {{product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
You are missing "StoreController as StoreController".
<div ng-controller="StoreController as StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
Working plunker here.
You should use $scope variable
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
DEMO
else you can use the Controller as syntax.
In case you don't want to use $scope, you can use controller as systax.
<div ng-controller="StoreController as ctrl">
{{"Hello" + "Angular"}}
<h1>Product name : {{ctrl.product.name}}</h1>
<h2>Produce Price : {{ctrl.product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
Okay so I'm following an AngularJS online beginner course, and wrote my first app :
HTML :
<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{ name }}!</h1>
</div>
</body>
</html>
app.js :
var myApp = angular.module("myApp",[]);
myApp.controller('mainController',['$scope',function($scope){
$scope.name = 'Elliot';
}]);
I don't get the desired outcome from this small app, I only get "Hello {{ name }}!".
What am I doing wrong here?
Change your html tag too:
<html ng-app="myApp">
I am learning Angular and adding a controller to my module only works when all the code is inline on the page. If I replace it with <script src="myModuleFile.js"></script> it fails with
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.11/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20personController
var app = angular.module('app', [])
.config([function(injectables){
console.log('configuring app');
}]).run([function(injectables){
console.log('running app');
}]).controller("personController", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="web/stylesheets/app.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<!-- wont work if I include it this way -->
<script src="web/js/app.min.js"></script>
<!-- but works if I put it in here -->
<script></script>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"><hr />
<h1>Hello {{ yourName }}!</h1>
<div ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
<div ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</body>
</html>
As Claies mentioned in the comments, the error message looks like it is trying to find a provider for a dependency "a", which is probably a result of minification.
If you do like:
angular.module(..).controller("SomeCtrl", function($scope){});
It might minify $scope to just a. So instead you should use:
angular.module(..).controller("SomeCtrl", ["$scope", function($scope){}]);
Because the string will not be minified, Angular will know which dependency is which. Another way would be to use $injector of course, as Claies also mentioned.
I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem