Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
angular.bootstrap(document, ['myApp1','myApp']);
</script>
</body>
</html>
Although i can see the expected output, but at the same time facing console error.
here is the description of error
(while i click on the url)
it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.
Please help.
You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.
You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.
The problem is as explained in the previous comments, the automatic and manual initialization of modules.
Since you want to initialize them separately for each elements then try an approach like
<div data-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name"/>
</p>
<h1>Hello {{name}}</h1>
</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
then
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
angular.bootstrap(els[i], [els[i].dataset.app]);
}
Demo: Fiddle
Related
I have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>Click on this paragraph.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$ang=$scope;
$ang.count=10;
});
$(document).ready(function(){
$("p").click(function(){
console.log("The paragraph was clicked.");
$ang.count=$ang.count-1;
});
});
</script>
</body>
</html>
But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.
Don't mix angular with jQuery!
Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there
Markup
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-click="increamentCount()">Click on this paragraph.</p>
<div>
<h2>{{ count }}</h2>
</div>
<body>
Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.increamentCount = function(){
$scope.count = $scope.count + 1;
}
});
Demo Plunker
It is should be:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.click = function(){
$scope.count=$scope.count-1;
}
});
</script>
</body>
</html>
You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p ng-click="onClick()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
</div>
<script>
angular
.module('myApp', ['ng'])
.controller('myCtrl', function($scope) {
$scope.count = 10
$scope.onClick = function () {
$scope.count--
}
// this is how you can observe state
// changes outside of event handlers
$scope.$watch('count', function(newValue, oldValue) {
console.log("The paragraph was clicked.")
})
})
</script>
</body>
</html>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}
I have the following code usage of ng-repeat, I am getting 3 blank <li/> but not data within of 3 populations. Can someone help why?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
I think it should be:
<li ng-repeat="x in Cities">{{x.population}}</li>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{x.population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
You just forgot (x.population) otherwise it was OK.
This is my html:
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<!-- anything typed in here is magically saved to Firebase! -->
<input type="text" ng-model="data.text"/>
<!-- all changes from Firebase magically appear here! -->
<h1>You said: {{ data.text }}</h1>
</body>
</html>
and this is my app.js file:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
I copied it from this example: https://www.firebase.com/docs/web/libraries/angular/quickstart.html
When I try to run it on my own computer, I get these errors in the console:
Uncaught SyntaxError: Unexpected token <
and
Uncaught Error: [$injector:modulerr]
I can't figure out what's wrong!
Your module isn't being loaded because the function you create is never executed. Looks like you are missing () right before the final ; in your script. This fixes it for me:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
$injector:modulerr basically means the module failed to load, could be a number of things.
<script>
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller("MyController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://qst13ns0z14.firebaseio-demo.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebaseArray(ref);
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || "anonymous";
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
</script>
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link rel="stylesheet" href="/resources/tutorial/css/example.css"/>
</head>
<body ng-controller="MyController">
<!-- CHAT MARKUP -->
<div class="example-chat l-demo-container">
<header>Firebase Chat Demo</header>
<div class="example-chat-toolbar">
<label for="nameInput">Username:</label>
<input ng-model="name" type="text" id="nameInput" placeholder="enter a username...">
</div>
<ul id="example-messages" class="example-chat-messages">
<li ng-repeat="msg in messages">
<strong class="example-chat-username">{{ msg.from }}</strong>
{{ msg.body }}
</li>
</ul>
<footer>
<input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput" placeholder="Type a message...">
</footer>
</div>
</body>
</html>
I'm learning how to develop with AngularJS for the first time for a class and I am trying to understand why I'm not getting an updated value of the length property and was hoping someone could help me understand why my code is not working and what I should be doing for it to update.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Grocery List</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>My Grocery List</h1>
<div ng-controller="MYController">
<input type="text" ng-model="listItem" placeholder="Add Grocery Item" />
<input type="submit" ng-click="addItem()" value="Save" />
<h2>Items</h2>
<ul ng-show="itemArray.length">
<li ng-repeat="listItem in itemArray">
{{ listItem }}
<buton ng-click="deleteItem(listItem)">X</buton>
</li>
</ul>
</div>
</body>
</html>
Code in app.js
function MYController($scope) {
$scope.listItem;
$scope.itemArray = [];
$scope.addItem = function() {
$scope.itemArray.push($scope.listItem);
$scope.listItem = '';
}
$scope.deleteItem = function(deletedItem) {
var idx = $scope.itemArray.indexOf(deletedItem);
$scope.itemArray.splice(idx, 1);
}
}
In Angular when you make controller then it need to assign with a module
So here you will made your controller in js like below
angular.module('todoApp', [])
.controller('MYController', ['$scope', function($scope) {
$scope.listItem;
$scope.itemArray = [];
$scope.addItem = function() {
$scope.itemArray.push($scope.listItem);
$scope.listItem = '';
}
$scope.deleteItem = function(deletedItem) {
var idx = $scope.itemArray.indexOf(deletedItem);
$scope.itemArray.splice(idx, 1);
}
});
And in HTML bootstrap angular like below in body tag and use your controller
<body ng-app="todoApp">
See here for reference https://angularjs.org/#add-some-control
I think there may be some confusion between the listItem in ng-model="listItem" and ng-repeat="listItem in itemArray". Try changing the second one to a different variable name like this:
<li ng-repeat="item in itemArray">
{{ item }}
<button ng-click="deleteItem(item)">X</button>
</li>
Also, change that first line in your controller $scope.listItem; to $scope.listItem = '';.
assign module to angular app using this code:
var app = angular.module('plunker', [])
and
<html ng-app="plunker">
see plunker