I am writing a small test page that retrieves some data from a RESTful API I have previously written.
I can successfully retrieve this data from Angular, but I can't seem to find a way to display this data on the page. I am trying to loop over the list of results and print it in a table.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" >
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="application/javascript" src="./js/URLSet.js"></script>
<script type="application/javascript" src="./js/app.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="URLSetDAO as dao">
<button class="btn" ng-click="dao.list()">List</button>
<table class="table" ng-init="urlsets = dao.list()">
<td ng-repeat="urlset in urlsets">
<tr>
{{ urlset.pk }}
</tr>
<tr>
{{ urlset.user }}
</tr>
<tr>
{{ urlset.title }}
</tr>
<tr>
{{ urlset.views}}
</tr>
<tr>
{{ urlset.type }}
</tr>
</td>
</table>
</div>
</body>
</html>
This is the app.js:
(function() {
var app = angular.module('MyApp', ['URLSet']);
})();
And this is the URLSet.js:
(function() {
var app = angular.module('URLSet', []);
app.controller('URLSetDAO', ['$http', function($http){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
return $http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
console.log(data);
})
.error(function(data, status, headers, config) {
});
};
this.read = function(id) {
$http({method: 'GET', url: ip + '/urlsets/' + id})
...
};
this.create = function(obj) {
$http({method: 'POST', url: ip + '/urlsets/'})
...
};
this.update = function(id, obj) {
$http({method: 'PUT', url: ip + '/urlsets/' + id})
...
};
this.remove = function(id) {
$http({method: 'DELETE', url: ip + '/urlsets/' + id})
...
};
}]);
})();
I understand that Promises work similarly to callbacks, so it's asynchronous. So how am I able to display this data, if ng-init will not wait for the function to finish?
EDIT:
Besides the fact that I inverted the tr and td tags (thanks to satish for suggesting Plunker, which pointed me this error), making the table render invisible (so I would never see the results on the page), I also injected $scope into my controller.
It is like this now:
...
app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
$http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
$scope.urlsets = data;
})
.error(function(data, status, headers, config) {
});
};
...
And index.html:
<body ng-app="MyApp">
<div ng-controller="URLSetDAO as dao">
<button class="btn" ng-click="dao.list()">List</button>
<table class="table" ng-init="dao.list()">
<tr ng-repeat="urlset in urlsets">
<td>
{{ urlset.pk }}
</td>
<td>
{{ urlset.user }}
</td>
<td>
{{ urlset.title }}
</td>
<td>
{{ urlset.views}}
</td>
<td>
{{ urlset.type }}
</td>
</tr>
</table>
</div>
</body>
One way to solve this is to drop the ng-init and do that in your controller instead:
For example:
app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
return $http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
console.log(data);
})
.error(function(data, status, headers, config) {
});
};
this.list().success(data) {
$scope.urlsets = data;
});
...
});
Hope this helps.
Related
I have designed below pages using angularJs, there I am using routing and custom service
home.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="homeApp.js"></script>
</head>
<body>
<div ng-app="homeApp">
<div ng-controller="homeCtrl">
<div ng-view></div>
</div>
</div>
</body>
</html>
homeApp.js
var app = angular.module('homeApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.
when('/dashBoard',{
templateUrl : 'dashBoard.html',
controller : 'homeCtrl'
}).when('/createCase',{
templateUrl : 'createCase.html',
controller : 'flatCtrl'
}).when('/submitCase',{
templateUrl : 'submitCase.html',
controller : 'flatCtrl'
}).otherwise({
redirectTo : '/dashBoard'
});
});
app.factory('homeService',function(){
var bean = {};
function set(data){
alert("service = "+data);
bean = data;
}
function get(){
return bean;
}
return{
set : set,
get : get
}
});
app.controller('homeCtrl',function($scope){
$scope.validateMe = function(isValid){
if(isValid){
alert("validated");
}
}
});
app.controller('flatCtrl', function($scope,$http,$window,homeService) {
$scope.loadLists = function(){
loadReviewTypes();
loadPriorities();
loadCamTypes();
};
loadReviewTypes = function(){
var onSuccess = function (dataRT, status, headers, config) {
$scope.reviewTypes = dataRT;
};
var onError = function (dataRT, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=RT'
}).success(onSuccess).error(onError);
};
loadPriorities = function(){
var onSuccess = function (dataP, status, headers, config) {
$scope.priorities = dataP;
};
var onError = function (dataP, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=P'
}).success(onSuccess).error(onError);
};
loadCamTypes = function(){
var onSuccess = function (dataC, status, headers, config) {
$scope.camTypes = dataC;
};
var onError = function (dataC, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=C'
}).success(onSuccess).error(onError);
};
loadRatingTypes = function(id){
var onSuccess = function (dataP, status, headers, config) {
$scope.ratingTypes = dataP;
};
var onError = function (dataP, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=R&id='+id
}).success(onSuccess).error(onError);
};
$scope.checkWord = function(msg){
$scope.ratingYear = msg-1;
};
$scope.chgRatingType = function(type){
if(type != '0'){
loadRatingTypes(type);
}else {
$scope.ratingTypes = [];
}
};
$scope.checkRatingYear = function(val1,val2){
if(val1 > val2){
alert('Rating year cannot be greater than Assessment year');
$scope.ratingYear=$scope.assessmentYear-1;
}
};
$scope.saveForm = function(){
var onSuccess = function (data, status, headers, config) {
alert(data);
$scope.messages = data;
};
var onError = function (data, status, headers, config) {
alert("failed");
}
alert(123);
$http({
method : 'POST',
url : 'secondHello'
}).success(onSuccess).error(onError);
};
$scope.form = {
};
$scope.postForm = function() {
console.log("posting data....");
alert("form.camNum = "+$scope.form.camNum);
formData = $scope.form;
console.log(formData);
/*$http({method : 'POST',
url : 'thirdHello',
data : JSON.stringify($scope.form)
}).success(function(){
alert("success form data");
}).error(function(){
});*/
$http({
method : 'POST',
url : 'thirdHello',
contentType: 'application/json',
data : JSON.stringify($scope.form)
}).success(function(data, status, headers, config){
alert("success form data ="+data);
homeService.set(data);
$scope.bean = homeService.get();
}).error(function(data, status, headers, config){
});
};
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("flat"), ['flatApp']);
});
dashBoard.html
<div>
<form name ="formDm">
<table border="1">
<tr>
<td>
Party Name : <input type="text" ng-model = "formD.partyNm" name = "partyNm" ng-minlength="5" required>
<p ng-show="formDm.partyNm.$error.minlength">Please enter at least 2 char's</p>
</td>
</tr>
</table>
<!--New Case-->
<a type="submit" ng-href="#createCase">
<button ng-click="validateMe(formDm.$valid)" type="submit">New Case</button>
</a>
<p>{{bean}}</p>
</form>
</div>
createCase.html
<div id="flat" ng-controller = "flatCtrl" >
<form method="post" ng-init="loadLists()">
<div>
<table border="1">
<tr>
<td>
CAM No. : <input type="text" ng-model = "form.camNum" name = "camNum">
</td>
<td>
Party Name : <input type="text" ng-model = "form.partyNm" name = "partyNm">
</td>
</tr>
<tr>
<td>
Review Type : <select ng-model = "form.reviewType" name = "reviewType" ng-filter = "">
<option ng-repeat = "x in reviewTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
<td>
Priority : <select ng-model = "form.priority" name = "priority">
<option ng-repeat = "x in priorities" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
</tr>
<tr>
<td>
CAM Type : <select ng-model = "form.camType" name = "camType" ng-filter = "" ng-change="chgRatingType(form.camType)">
<option ng-repeat = "x in camTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
<td>
Rating Type : <select ng-model = "form.ratingType" name = "ratingType" ng-filter = "">
<option ng-repeat = "x in ratingTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
</tr>
<tr>
<td>
Rating Year : <input type = "text" ng-model="form.ratingYear" ng-change="checkRatingYear(ratingYear,assessmentYear)">
</td>
<td>
Assessment Year : <input type = "text" ng-model = "form.assessmentYear" ng-keyup="checkWord(assessmentYear)">
</td>
</tr>
</table>
<a type="submit" ng-href="#submitCase">
<button ng-click="postForm()" type="submit">Submit</button>
</a>
</div>
<p>{{bean}}</p>
</form>
Back To DashBoard
</div>
submitCase.html
<div id="flat" ng-controller = "flatCtrl" >
{{homeService.get();}}
Back To DashBoard
</div>
here I am trying to do routing as well as form submission.
after getting root from dashboard page to cratecase page where I am submitting the form details to server and again getting JSON object from server which I want to display submitCase page.
At home.jsp I have bootstrapped angular with homeApp module.
and after getting routed to from dashboard to createcase I am adding one more app flatApp but submitCase page also has same app and controller still I am not able to populate values being set to bean object in homeService at submitCase page. Where I am making mistake? how do I bring submitCase page to current scope i.e. createCase page as I am able to print that bean object on createCase page after form submission Please help
i am able to hit the controller method and able to return the data
[HttpPost]
public JsonResult GetAppsList()
{
var Apps = DataModel.ApplicationMasters.ToList();
return Json(new { appslist = Apps });
// return AppsList;
}
but in angular js not able to get the data
myApp.controller('SpicyController', ['$scope','$http', function ($scope,$http) {
$http({
method: 'POST',
url: 'Home/GetAppsList'
}).then(function (response) {
$scope.appslist = response.data.appslist; }, function (error) {console.log(error);});}]);
in view
<div class="main" ng-app="spiceApp">
<div ng-controller="SpicyController">
<table>
<tr ng-repeat="app in appslist">
<td>
{{app.Name}}
</td>
</tr>
</table>
</div>
</div>
can you help me why i am not able to display result?
<div class="main" ng-app="spiceApp">
<div ng-controller="SpicyController">
<table>
<tr ng-repeat="(index,data) in appslist">
<td>
{{data.Name}}
</td>
</tr>
</table>
</div>
</div>
applist is an Object . To Apply ng-repeat on an Object write this ng-repeat=(index,data) in applist.
myApp.controller('SpicyController', ['$scope','$http', function ($scope,$http) {
$http({
method: 'POST',
type:'json',
url: 'Home/GetAppsList'
}).then(function (response) {
$scope.appslist = response.data.appslist; }, function (error) {console.log(error);});}]);
I am not able to get alert for delete function even if i had done right procedure so please help me for the same.Thanks in advance for solving my problem
I am not able to get alert for delete function even if i had done right procedure so please help me for the same.Thanks in advance for solving my problem
<html ng-app="crudApp">
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<form name="addForm" ng-submit="Add" ng-controller="employeecontroller">
First Name: <input type="text" ng-model="firstname"><br/><br/>
Last Name: <input type="text" ng-model="lastname"><br/><br/>
<input type="submit" name="btnInsert" value="Insert" ng-click='insertData()'/>
</form>
<div ng-controller="DbController">
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr ng-repeat="detail in details">
<td>{{detail.firstname}}</td>
<td>{{detail.lastname}}</td>
<td><input type="button" value="Delete" ng-click="deleteInfo()"/></td>
</tr>
</table>
</div>
<script>
function employeecontroller($scope, $http) {
$scope.insertData = function () {
$http.post("insert.php", {
'firstname': $scope.firstname,
'lastname': $scope.lastname,
}).success(function (data, status, headers, config) {
console.log("Data Inserted Successfully");
});
}
}
var crudApp = angular.module('crudApp', []);
crudApp.controller("DbController", ['$scope', '$http', function ($scope, $http) {
// Sending request to EmpDetails.php files
getInfo();
function getInfo() {
$http.post('select.php').success(function (data) {
// Stored the returned data into scope
$scope.details = data;
console.log(data);
});
}
}]);
function DbController($scope,$http) {
$scope.deleteInfo = function () {
alert("hello");
}
}
</script>
</body>
</html>
Each controller should be registered as part of your Angular app. You have registered DbController but then created a separate function called DbController that Angular is unaware of. Try moving your delete function to the registered controller. Like this:
crudApp.controller("DbController", ['$scope', '$http', function ($scope, $http) {
// Sending request to EmpDetails.php files
getInfo();
function getInfo() {
$http.post('select.php').success(function (data) {
// Stored the returned data into scope
$scope.details = data;
console.log(data);
});
}
$scope.deleteInfo = function () {
alert("hello");
}
}
I just started learning Angular and I am having trouble retrieving data based on a http-get request. It works when I simply retrieve all movies, but not when I try to retrieve movies based on a search term (cfr. search.html). I hope someone can tell me where I went wrong, I really can't see it. Thank you in advance.
app.js:
var app;
(function() {
app = angular.module('imdb', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/search', {
controller: 'SearchController',
templateUrl: 'views/search.html'
})
.when('/movies', {
controller: 'MovieController',
templateUrl: 'views/movies.html' //works fine
})
.otherwise({
redirectTo: '/movies'
});
});
})();
SearchController.js
(function (app) {
app.controller('SearchController', ['$http', '$scope', function ($http, $scope) {
$scope.movies = [];
$scope.searchMovie = function(title) {
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
.success(function(data) {
$scope.movies = data;
});
};
}]);
})(app);
search.html
<div>
<form class="form" novalidate name="searchMovies" ng-submit="SearchController.searchMovie(title)" >
<input type="text" ng-model="title" class="form-control" placeholder="enter title">
<button type="submit" class="btn btn-primary btn-block">Search</button>
</form>
<table class="table">
<thead>
<tr>
<th>poster</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
</tr>
</tbody>
</table>
</div>
Replace
SearchController.searchMovie(title)
by
searchMovie(title)
All expressions are always evaluated on the scope. So the first, incorrect one, will try to invoke the method searchMovie of $scope.SearchController, which doesn't exist.
Also note that success() is deprecated for quite some time now. Use then():
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
.then(function(response) {
$scope.movies = response.data;
});
You should also avoid using string concatenation to pass parameters. Those need to be encoded properly. So rather use
$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search', {params: {title: title}})
.then(function(response) {
$scope.movies = response.data;
});
I am new to AngularJS and I'm facing these issues :
I want to have a list of items (movies) and when I click on the image or on the title I want the path to be like #/movie/id. For that I tried using ngRoute and also tried path but I have faced errors in both, can you guide me which one is suitable for my case and how can I use it?
As you can see in the HTML code, I am trying to draw a search box but right now when the API runs and returns data the whole content of the ng-app is being replaced with the movie list, should I create a new scope for just the content I want to change, if so how and where?
Here is my code:
var movies = angular.module("movies", []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
});
});
//added ngroute
var app = angular.module('movies', ['ngRoute']);
app.config(
function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'/'}).
when('/movie/:id',
{
controller:UserView,
templateUrl: function(params){ return '/moviessssssss/' + params.id; }
}
).
otherwise({redirectTo:'/'});
}
);
app.controller('UserView', function($scope) {
$scope.movies = 'hereeeeeee!';
});
<html ng-app="movies">
<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." >
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies">
<td><a ng-href="#movie" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="#movie" > {{ movie.title }} </a></td>
</tr>
</table>
</div>
For getting the links:
ng-href="{{'/#/movie/'+movie.id}}"
Then for getting the filter to work,
Put ng-model to your search box. And in your ng-repeat add | filter: ng-modelname
var movies = angular.module("movies", []);
movies.controller('movieController', function ($scope, $http) {
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
console.log($scope.movies);
});
});
<html ng-app="movies">
<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." ng-model="search">
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies | filter:search">
<td><a ng-href="{{'/#/movie/'+movie.id}}" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="{{'/#/movie/'+movie.id}}" > {{ movie.title }} </a></td>
</tr>
</table>
</div>
TL;DR
Click Here to see a live plunker example.
in my example, i used bootstrap. remove if irrelevant
there is a TODO in my plunker - the server side movie filtering (when you type a something in the search field). you need to read more about it in developer.rottentomatoes.com
This is the routing configuration i would define:
movies.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/movies', {
templateUrl: 'movies.html',
controller: 'MoviesController',
resolve: {
movies: function($http) {
return $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit: 16,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
});
}
}
})
.when('/movies/:id', {
templateUrl: 'movie.html',
controller: 'MovieController',
resolve: {
movie: function($http, $route) {
var id = $route.current.params.id;
return $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/' + id + '.json', {
params: {
limit: 1,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK',
q: id
}
});
}
}
})
.otherwise({
redirectTo: '/movies'
});
});
/movies - a list of all movies
/movies/<movie id> - a specific details about the movie
NOTE - i used resolve to pre-fetch the json data (this is optional)
index.html
this is the main html code of your
<!DOCTYPE html>
<html ng-app="movies">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
movies.html
the view of the movie list.
we get the specific movie redirect by <a ng-href="#/movies/{{movie.id}}">
<input class="form-control" type="text" placeholder="Search ..." ng-model="search" >
<hr>
<table>
<tr ng-repeat="movie in movies | filter:search">
<td><a ng-href="#/movies/{{movie.id}}" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="#/movies/{{movie.id}}"> {{ movie.title }} </a></td>
</tr>
</table>
movie.html
the view of the specific movie
<img class="img-responsive" ng-src="{{ movie.posters.detailed}}"/>
<h3>{{movie.title}} <small>{{movie.year}}</small></h3>
<p>{{movie.synopsis}}</p>
<hr>
<a class="btn btn-default" href="#/movies">Back</a>
<hr>
<pre>{{movie | json}}</pre>
MoviesController
the controller attached to the movies.html view
the $scope.$watch('search', is required to query the server for each input change you make. it's currently not working properly; rottentomatoes.com ignoring the q param. you need to read more about it in developer.rottentomatoes.com
movies.controller('MoviesController', function($scope, $http, movies) {
$scope.search = '';
$scope.$watch('search', function(newValue) {
// TODO: you need to request again the movie list from the server.
// Read more about the API here:
// http://developer.rottentomatoes.com/docs/read/json/v10/Movies_Search
$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit: 16,
country: 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK',
q: newValue
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
console.log(data);
$scope.movies = data.movies;
});
});
$scope.movies = movies.data.movies;
});
MovieController
the controller attached to the movie.html view
movies.controller('MovieController', function($scope, movie) {
$scope.movie = movie.data;
});
Live example - http://plnkr.co/edit/cJXTZWqBUXNTPinf7AoV?p=preview
For your first question do this:
<td><a ng-href="#/movie/{{movie.id}}"> {{movie.title}} </a></td>