I started with AngularJS, but am unable to get the desired output. Here's the code.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
function TodoCtrl($Scope) {
$Scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}
You need to implement the module and controller code for angular(basic example link http://codepen.io/larryjoelane/pen/VeQbrW ). You could place the following code in your todo.js file. I have placed some comment in the code to show additional changes I made to your posted code to make it work.
In the following example you will notice that I place the ng-app attribute inside the oppening tag of a div. This is because I do not have access to the html tag in code pen. The way you are attempting to do it in your html code is correct. The only thing you are missing is the value.
Live Example: http://codepen.io/larryjoelane/pen/WrMZxg
Angular Controller Code:
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
//changed from $Scope.totalTodos = 4 (syntax error $Scope would be undefined)
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
You will also need to add an app name to your ng-app attribute.
Example: <html ng-app="app">
Fully corrected HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
Additional HTML example using ng-bind attribute:
<!--Example using ng-bind-->
<h1>Example using ng-bind<h1>
<h2>Total todos:<span ng-bind="totalTodos"></span></h2>
<ul class="unstyled">
<li ng-repeat="todo in todos" ng-bind="todo.text">
</li>
</ul>
Change this
$Scope
To this
$scope
Also you need
ng-app="app" which is your module name, i believe you haven't defined your module
Index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
Further info you can get here
Using ng-app without a value
Your todo.js contains a casing issue in the second line replace '$Scope' with '$scope'. your code works once I corrected that and include module if you haven't declared already like i mentioned in below code
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script>
angular.module("exampleApp",[])
.controller("TodoCtrl",function($scope){
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
});
</script>
</body>
Related
Sorry if it is a dumb question, I am a beginner to web design and couldn't find an answer, even after a lot of googling / searching on here.
So as you can read in the title, my issue is, that upon clicking on "EX5" or "EX6" in my navbar, it glitches to the left side of the screen, instead of staying at the top.
Below is my code, since EX5 and EX6 are basically the same thing, I'll post the shorter one in here:
Navbar:
<!DOCTYPE html>
<html ng-app='sampleApp'>
<head>
<link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular-route.js" data-semver="1.4.9"></script>
<script src="../js/script.js"></script>
<script src="../js/headerController.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}">EX1</li>
<li ng-class="{ active: isActive('/ex2')}">EX2</li>
<li ng-class="{ active: isActive('/ex3')}">EX3</li>
<li ng-class="{ active: isActive('/ex4')}">EX4</li>
<li ng-class="{ active: isActive('/ex5')}">EX5</li>
<li ng-class="{ active: isActive('/ex6')}">EX6</li>
<li ng-class="{ active: isActive('/ex7')}">EX7</li>
<li ng-class="{ active: isActive('/ex8')}">EX8</li>
<li ng-class="{ active: isActive('/ex9')}">EX9</li>
<li ng-class="{ active: isActive('/ex10')}">EX10</li>
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
</html>
EX6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/stylesheet.css">
<title>Exercise 6</title>
<script src="../js/script.js"></script>
</head>
<body>
<div>
<h2>Add an image, upon clicking, change the image</h2>
<hr>
<img onclick="changeImg()" id="sourceImg" src="../styles/images/diluc.jpg" alt="diluc">
</div>
</body>
</html>
script:
//change img
var currentImage = "../styles/images/diluc.jpg"
function changeImg(){
if(currentImage == "../styles/images/diluc.jpg"){
document.getElementById("sourceImg").src="../styles/images/venti.jpg";
currentImage = "../styles/images/venti.jpg"
}else{
document.getElementById("sourceImg").src = "../styles/images/diluc.jpg"
currentImage = "../styles/images/diluc.jpg"
}
}
/////Nav
(function () {
var app = angular.module('sampleApp',['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl:'../exercises/ex1.html'
})
.when('/ex2',{
templateUrl:'../exercises/ex2.html'
})
.when('/ex3',{
templateUrl:'../exercises/ex3.html'
})
.when('/ex4',{
templateUrl:'../exercises/ex4.html'
})
.when('/ex5',{
templateUrl:'../exercises/ex5.html'
})
.when('/ex6',{
templateUrl:'../exercises/ex6.html'
})
.when('/ex7',{
templateUrl:'../exercises/ex7.html'
})
.when('/ex8',{
templateUrl:'../exercises/ex8.html'
})
.when('/ex9',{
templateUrl:'../exercises/ex9.html'
})
.when('/ex10',{
templateUrl:'../exercises/ex10.html'
})
.otherwise({ redirectTo:'/'});
});
})();
My header controller:
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
And lastly my 3 lines of css:
#sourceImg{
width: 500px;
}
I would greatly appreciate your help, as I am unable to solve this myself. Thank you
Solved, issue was with my css file, there was some gibberish in there oof
Hy everybody, first question here.
I'm learning angularjs and right now i'm stuck on "Controller and Scope" chapter.
I'm trying to search trough an array of objects and show items that match my query; unfortunately my screen stays blank.
Here's my code:
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function Controller($scope)
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
</script>
</body>
</html>
What's wrong?
EDIT for EDIT:Just for those who might look at this question, my error was to call ng-app twice, once in the html tag and once in body tag.
EDIT: I'm here again; I modified the code using the given answers, but I still got a search box and a blank screen. I doubt is code related since I also tried to simply copy and paste it in a new file but i got the same result. What could be?
Code is down here:
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('demoApp', [])
app.controller('SimpleController', function($scope) {
$scope.cpu = [{
house: 'Intel',
model: 'I7'
},
{
house: 'AMD',
model: 'Ryzen'
},
{
house: 'Qualcomm',
model: 'Snapdragon'
}
];
});
</script>
<title>Search and print with Scope</title>
</head>
<body ng-app="demoApp">
<div ng-controller="SimpleController">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li>hi</li>
<li ng-repeat="proc in cpu">
{{proc.house}} - {{proc.model}}
</li>
<li>hi again</li>
</ul>
</div>
</body>
</html>
You need to have a angular module and ng-app mentioned as below
DEMO
var app = angular.module('myApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
First of all you are trying to get the scope data before declaring it, you need to load the script before using ng-repeat, so move the script before the div definition.
Also you are not correctly defining the Controller, it should be defined within an app module, then bind the ng-app and the Controller in your HTML.
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('angularApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
</script>
</head>
<body ng-app="angularApp">
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
I've searched and read all possible explanations, but none have helped so far.
The problem is that the data binding with the curly brackets doesn't work (it only works if I define the module and controller in the index.html).
index.html :
<html lang="en" data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
<script src="controllers/listcontroller.js"></script>
<script src="js/app.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>
<div class="main">
<body data-ng-controller="ListController">
<ul>
<li data-ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js (in folder js):
(function () {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js (in folder controllers):
(function () {
'use strict';
var app = angular.module('myApp.controller');
app.controller('ListController', ['$scope', function ($scope) {
$scope.tests = [
{'name': 'A',
'type': '1'},
{'name': 'B',
'type': '2'},];
}]);
})();
The view shows me something like this:
{{ test.name }}
{{ test.type }}
There are currently {{test.length}} tests available.
You have currently selected 0 tests.
I've followed a couple of tutorials, such as the Angular in 60 Minutes, AngularJS.org, and some on YT, but I always encounter the same problem. Any ideas?
there are several issues look at the plunker:
https://plnkr.co/edit/bnYAsGk273kO5znMnAJh
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="listcontroller.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController">
<div class="main">
<ul>
<li ng-repeat="test in tests">
<span>{{ test.name }}</span>
<p>{{ test.type }}</p>
</li>
</ul>
There are currently {{test.length}} tests available. You have currently selected 0 tests.
<button class="animatedbutton"> Proceed </button>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular.module('myApp', ['myApp.controller']);
})();
listcontroller.js
(function() {
var ctr = angular.module('myApp.controller', []);
ctr.controller('ListController', ['$scope',
function($scope) {
$scope.tests = [{'name': 'A','type': '1'}, {'name': 'B','type': '2' }];
}
]);
})();
You created a second module so you need to have the [] again:
var app = angular.module('myApp.controller', []);
Can you also include the console to see if there are any errors?
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title></title>
<script src="Script/angular.js"></script>
</head>
<body data-ng-controller="SimpleController">
// controller defined //
<ul>
<li data-ng-repeat="data in customers">
// data is not access controller
{{data.name}}-{{data.city}}
</li>
</ul>
</div>
/Is this way is correct to define controller/
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];}
</script>
</body>
</html>
I've rewritten your html a bit and it works now.
You have to define module called myApp and have to use controller directive to define controller in the module.
Please look at the sample I've added
http://jsfiddle.net/uv0gw4kL/2/
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
</head>
<body ng-controller="SimpleController">
<ul>
<li ng-repeat="data in customers">
{{data.name}}-{{data.city}}
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'alok ', city: 'azam' },
{ name: 'muku', city: 'lko' },
{ name: 'rajat', city: 'jungle' }
];
});
</script>
</body>
</html>
More about angular controllers here
http://www.w3schools.com/angular/angular_controllers.asp
You can also use allowGlobals feature from controller provider
https://docs.angularjs.org/api/ng/provider/$controllerProvider
but it's not recommended.
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.