I am new in angularjs. What I am trying to do is adding a simple controller in an angular app. So, my code is like this-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<div ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button Disable
</p>
<p>
{{ mySwitch }}
</p>
</div>
</div>
</body>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>
So, it is working perfectly-
When I addd ng-controller="anything" as such...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<div ng-controller="anything" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button Disable
</p>
<p>
{{ mySwitch }}
</p>
</div>
</div>
</body>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>
Nothing seems to work.
Can anyone please help, what I am doing wrong?
Thanks in advance for helping.
Looks like you have not defined a controller. Observe the following...
<div ng-app="app">
<div ng-controller="ctrl">
[...]
angular.module('app', []).controller('ctrl', function($scope) {
$scope.mySwitch = true;
});
JSFiddle Link - working demo
And as always, refer to the Understanding Controllers docs for more information.
in the first step you need to declare a name for your app
for exemple
Module.js
var home = angular.module("home",['ngRoute']);
after that call this var in your controller
Controller.js
home.controller('homeController',function($scope){
$scope.switch = value;
});
in your code html
index.html
<!DOCTYPE html>
<html ng-app="home">
<div ng-controller="homeController" >
{{switch}}
</div>
Related
Should be a basic solution but for the life of me I don't see what is wrong.
I am attempting to run an Angular JS application and I am getting a runtime error:
JavaScript runtime error: 'angular' is undefined
Here is my code below.
(function() {
var app = angular.module('MyApp', []);
app.controller('MyAppController', function($scope) {
$scope.message = "Hello, World!";
});
}());
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1> Angular JS App </h1>
<div ng-app="MyApp" ng-controller="MyAppController">
<label> {{message}} </label>
</div>
</body>
</html>
Thank you in advance!
You placed your ngApp directive twice in your view template.
https://plnkr.co/edit/cSTHyVqMHFVw8ht9mkIr
<body ng-app="app">
<h1> Angular JS App </h1>
<div ng-controller="ctrl">
<label> {{message}} </label>
</div>
</body>
Declaring once will solve your issue.
I'm learning Angular.js. I want to make a form where the user can see the output has they fill it out.
Here's test.html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" ng-controller="graphicLanguageCTRL" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
</div>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</body>
Here's test.js:
var app= angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.master= {
hed: ''
};
});
I want the stuff typed into the input tag to be visible in the h1 tag. But when I type into the input tag, nothing appears in the h1 tag.
How do I fix this?
There are some errors in your code:
You are using ng-bind outside of controller
You are initializing graphicLanguageCTRL twice
In your script you are setting the wrong variable name
Below is the fixed code:
html
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
JS
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL", function($scope){
$scope.graphic = {
hed : ''
};
});
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {
hed: ''
};
});
or
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {};
$scope.graphic.head = ''
});
2 things need to be taken care of:
Do not nest and use the same ng-controller
Move the h1 inside
the ng-controller block
Fixed version:
var app = angular.module('charter', []);
app.controller("graphicLanguageCTRL", function($scope) {
$scope.graphic = {
hed: ''
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body ng-app='charter'>
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed">
<br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
</html>
Hi I am trying to iterate json object with ng-repeat, when I Iterated array it worked fine, but with json object it is failing.
Here is my javascript code:
var appModule = angular.module('appModule',[]);
appModule.controller('appController',[function(){
this.students = {
"abc":"abc",
"xyz":"xyz",
"xyz":"xyz"
}
}]);
And here is my html code :
<!DOCTYPE html>
<html ng-app="appModule">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
</head>
<body ng-controller="appController as controller">
<div ng-repeat="(firstName,lastName)in controller.students">
<span>Name:{{firstName}} Surname: {{lastName}}</span>
</div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
Can try to show data this way
<body ng-controller="appController as controller">
<div ng-repeat="student in controller.students">
<span>Name:{{student.firstName}} Surname: {{student.lastName}}</span>
</div>
</body>
Try this
<body ng-controller="appController as controller">
<div ng-repeat="(firstName,lastName) in controller.students">
<span>Name:{{firstName}} Surname: {{lastName}}</span>
</div>
you are just missing a whitespace :)
There should be space between (firstName,lastName) and in,
<body ng-controller="appController as controller">
<div ng-repeat="(firstName, lastName) in controller.students">
<span>Name:{{firstName}} Surname: {{lastName}}</span>
</div>
</body>
DEMO
Hello everybody and thanks to help me.
Here, the template
<!DOCTYPE html>
<html ng-app="projectApp">
<head>
<meta charset="UTF-8" />
<title>Planning Poker !</title>
<script src="resources/static/js/angular-1.2.21/angular.js"></script>
<script src="resources/static/js/controllers.js"></script>
</head>
<body>
<header>Planning Poker</header>
<nav>
<ul>
<li>Add a Project</li>
<li>The Project List</li>
<li>About</li>
</ul>
</nav>
<section>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
<!--<form method="post" action="">
<p><input type="text" placeholder="Name!"></p>
<p><input type="text" placeholder="Mail!"></p>
<p><input type="text" placeholder="Password!"></p>
</form>-->
</section>
<footer></footer>
</body>
</html>
and the controller:
var projectApp = angular.module('projectApp', []);
projectApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
And, the directory structure.
http://i.stack.imgur.com/fWORv.png
The result is
http://i.stack.imgur.com/qfuHg.png
But I wish "Hola!" and not "{{greeting}}"
It doesn't see the angular.js, try to get the online version, replace your angular.js src with "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"
Ok the problem is fixed. It was a script problem.
<script src="js/angular-1.2.21/angular.js"></script>
<script src="js/controllers.js"></script>
Indeed, it was directly mapped into "js" directory.
I tried to look at documentation but it seems i am missing something. I am trying to inject html which is bound to a json. It works fine if the html is declared but when i inject it despite calling the $compile it is not working. Here is the code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script src="todo.js"></script>
<script>
function TodoCtrl($scope)
{
$scope.todos = [{text:'LearnAngularJS'}, {text:'Unlearn Angular'},];
}
$(document).ready(function()
{
$('#div1').html(
$compile('<div ng-controller="TodoCtrl"><ul><li ng-repeat="todo in todos" compile="text">{{todo.text}}<li><ul><div>')(scope));
});
</script>
</head>
<body>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}}
<li>
<ul>
</div>
<div id="div1">
<div>
</body>
</html>
http://plnkr.co/edit/NQQBgQKBWEqKHxGwnI0h?p=preview
As Ajay pointed out, you'll have to associate one of your scope with template.