Edited: Now this example fully works with external json service to see it in live
I can see the received array and params in the console.log, but I can't echo that array to the view...
That online JSON service returns {"key": "value"}
How to make this {{some_item.key}} to work? Thanks!!
<!DOCTYPE html>
<html ng-app="Simple">
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<div ng-controller="SimpleController">
{{some_item.key}}
</div>
<script>
angular.module('Simple', ['ngResource']);
function SimpleController($scope, $resource) {
$scope.simple = $resource('http://echo.jsontest.com/key/value',
{callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}}
);
$scope.some_item = $scope.simple.get();
console.log($scope.some_item.key);
}
</script>
</body>
</html>
You need to put the interpolation inside the controller's scope like this
<div ng-controller="SimpleController">
{{some_item.key}}
</div>
Related
I've just learned AngularJs. I've try to show a data from controller. but the data not show.
my view :
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</title>
</head>
<body ng-app="FirstApp">
<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/MainController.js"></script>
<script type="text/javascript"></script>
</body>
</html>
my controller :
app controller('MainController',['$scope', function ($scope) {
// body...
$scope.title='Belajar AngularJs';
$scope.book={
title: 'Belajar Angularjs Bersama Ciwuk',
author : 'Ciwuk';
price : 'Free'
};
}]);
my model :
var app=angular.module('FirstApp',[]);
the result was like this :
error
anyone help me please? i'm new in angularJS
You should use app.controller and author : 'Ciwuk',. Use comma not semicolon.
Try use console(F12) when error happen.
#DieuNQ pointed correct to your typo. But here is even better way:
(function () {
"use strict";
angular.module('your_module_name', []).controller("MainController", [
New to AngularJS here (have used BackboneJS before), and am trying to learn AngularJS. I'm attempting to basically render a bunch of objects with their own div "views." In my controller, I have an array of objects (all objects with same properties) that I would pretty much like to render as sticky-notes. My thought process was to somehow grab the data from each object in the array, and render each as div's (which I could style to look like a sticky-note).
The code I have thus far:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) {
$scope.notesArray= [];
$http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file
data.data.forEach(function(obj) {
$scope.notesArray.push(obj);
});
})
}]);
My index.html looks like:
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
Some stuff here
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Also, it'd be great if someone could comment on how I can represent these objects more effectively (using a factory, service, etc). Thanks!
Do something like this, with ng-repeat :
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="note" ng-repeat="note in notesArray">
<div class="wrapper" ng-class="note.done ? 'done' : 'undone'">
<p class="title">{{note.title}}</p>
<span class="done">{{note.done}}</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>