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.
Related
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>
I'm trying to pull the list of current streams from the API and iterate that information with AngularJS. When I put in the JSON data directly in the js file, Angular works fine. However, when using an http request as shown below, I get a blank page. I've searched high and low, but have had trouble applying it to my specific issue. Any help is appreciated. Thanks!
Http file:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
Repeat.js
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.jsonp("https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK")
.success(function(response) {$scope.names = response.streams;});
});
https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK isn't JSONP (it is plain JSON).
You need a server that will make a JSONP response in order to use $http.jsonp().
Well, using $http.get('url') does work. I was incorrectly thinking the 'data' object was an array and passing "[0]" to it which was incorrect. Below is the code and it works to pull the info and repeat the data as indicated in the markup. Thanks for your help!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in data.streams">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.get('https://api.twitch.tv/kraken/streams?').success(
function(data, status){
$scope.data = data;
});
});
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>
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 have done the following in AngularJS. The data is obtained from the URL mentioned.
If you open the URL, you can see the response it provides.
However, I am not able to obtain the title inside HTML via angularjs.
I am getting a blank result. What am I doing wrong?
Has it something to do with JSON encoding?
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
}
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data in mydata">
{{data.Title}}
</li>
</ul>
</body>
</html>
</html>
There is quite a lot wrong with your code :-(
Syntax errors, not injecting $http, the response is a single movie instead of a collection.
Try the following.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?t=the%20shawshank%20redemption').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
{{mydata.Title}}
</body>
</html>
Example with a collection:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
function ActivitiesListCtrl($scope, $http) {
$http.get('http://www.omdbapi.com/?s=True%20Grit').success(function (data) {
$scope.mydata = data;
});
}
</script>
</head>
<body ng-controller="ActivitiesListCtrl">
<h1>Movie Name</h1>
<ul>
<li ng-repeat="data1 in mydata.Search"> {{data1.Title}} </li>
</ul>
</body>
</html>
I created a working plunker mistakes including: not creating an app module, not injecting $http, trying to iterate over "data" which your scope doesn't know about - since you have "mydata" in your scope. and iterating over an object the wrong way. (it would be correct to iterate like this if you were getting an array of objects) see this answer for details