<html>
<body ng-app="MyApp">
<div ng-controller="MainCtrl as vm">
<li ng-repeat="file in vm.filesArray">{{file.title}}</li>
</div>
<script src="https://apis.google.com/js/auth.js" type="text/javascript"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/ngDrive/build/module.js"></script>
<script>
var myApp = angular.module('MyApp', ['ngm.ngDrive']);
angular.module('ngm.ngDrive')
.provider('OauthService', ngDrive.Config)
.config(function (OauthServiceProvider) {
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('10503878599-98uqrqmgq2f3kc1sbr13l6rma20ue7l0.apps.googleusercontent.com');
});
var MainCtrl = (function () {
function MainCtrl(DriveService) {
this.filesArray = DriveService.files.list({
q: 'trashed = false',
maxResults: 10,
fields: 'items/title'
}, true).data;
}
MainCtrl.$inject = ['DriveService'];
return MainCtrl;
})();
angular.module('MyApp').controller('MainCtrl', MainCtrl);
</script>
</body>
</html>
I am using ngDrive by pinoyyid .
This is my index.html .
I have provided a valid client ID.
It returns an empty array in files array.
Please suggest any solution
Related
I have a script:
<script src="http://192.168.0.187:3004/socket.io/socket.io.js"></script>
The IP Address is subject to change which I have no control of, so I'm thinking of having the IP dynamic.
Like this:
<script src="http://" + location.host + "/socket.io/socket.io.js"></script>
But of course this doesn't work.
I did however came across this:
<script type="text/javascript" src="">
document.getElementsByTagName("script")[0].src += "http://" + location.host + "/socket.io/socket.io.js";
</script>
But still doesn't work. This is not my strongest point so, any clue?
EDIT:
Here is the sample of my html:
<!DOCTYPE html>
<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script id="script" src=""></script>
<script type="text/javascript">
document.getElementById("script").src = "http://" + location.host + "/socket.io/socket.io.js";
</script>
<link rel="stylesheet" href="/styles.css">
</head>
<body bgcolor="#ffffff">
<table id="table" border=1>
<thead>
<th><center>Sample</center></th>
<th></th>
</thead>
<tbody id="online"></tbody>
</table>
<script>
var ipServer = location.host;
var socket = io.connect('ws://' + ipServer);
</script>
</body>
</html>
This is call dynamically loading javascript:
var script = document.createElement('script');
script.setAttribute( 'src', 'socket.io.js');
document.head.appendChild(script);
//script that use socket.io
But there's another problem that you don't know when the script is fully loaded. If you call a function is defined in external script before it's loaded, it's error!
var script = document.createElement('script');
script.onload = function () {
//script that use socket.io
};
script.setAttribute( 'src', 'socket.io.js');
document.head.appendChild(script);
And we can make a utility function:
function loadScript(scriptPath, callback) {
var script= document.createElement('script');
script.setAttribute('src', scriptPath);
script.onload = callback();
document.head.appendChild(s);
};
loadScript('socket.io.js', function() {
//script that use socket.io
});
OR you can use jQuery $.getScript():
$.getScript('socket.io.js', function(data, textStatus, jqxhr) {
//script that use socket.io
});
For more information: https://api.jquery.com/jquery.getscript/
PS: with your code, it will be like this:
<!DOCTYPE html>
<html>
<head>
<title>SAMPLE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script id="script" src=""></script>
<!--<script type="text/javascript">-->
<!--document.getElementById("script").src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js";-->
<!--</script>-->
<!--<link rel="stylesheet" href="/styles.css">-->
</head>
<body bgcolor="#ffffff">
<table id="table" border=1>
<thead>
<th><center>Sample</center></th>
<th></th>
</thead>
<tbody id="online"></tbody>
</table>
<script>
var script = document.createElement('script');
script.onload = function () {
var ipServer = location.host;
var socket = io.connect('ws://' + ipServer);
};
script.setAttribute( 'src', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js');
document.head.appendChild(script);
</script>
</body>
</html>
You can use document write to load the script.
<script type='text/javascript'>
var script = '<script type="text/javascript" src="http://' + location.host + '/socket.io/socket.io.js"><\/script>';
document.write(script);
</script>
You have the right idea; the problem is that you can't combine an external script (using src) with an inline one.
You simply need two different scripts for this, making sure the inline one comes after the reference to an external script:
<script src=""></script>
<script type="text/javascript">
document.getElementsByTagName("script")[0].src = "http://" + location.host + "/socket.io/socket.io.js";
</script>
I am trying to create a tagging tool where a user can manually tag untagged call centre requests by means of a web page application.
The app structure is as follows:
client
js
controllers
editTagController.js
editUntagController.js
tagnamesController.js
tagsController.js
untagsController.js
imports
jquery-3.1.1.js
app.js
views
index.html
edit-tags.html
view-tagnames.html
view-tags.html
view-untags.html
node_modules
body-parser
express
jquery
mongoose
tether
server
controllers
tagscontroller.js
models
tag.js
name.js
package.json
README.MD
server.js
My error message is at the below. I am currently running it locally and I can't seem to fix it at all. I think it has something to do with my order of imports in my index.html file.
I think it could also be something to do with the factory that I am defining named taggingApp. However I am not sure if it is just this latter error or another error with it. Any help/advice on conventions would be helpful.
Failed to instantiate module taggingApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:6:412
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:40:222
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:488
at q (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:7:355)
at g (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:39:319)
at cb (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:43:336)
at c (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:20:390)
at Bc (https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js:21:179
Here is my code:
server.js
var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
tagsController = require('./server/controllers/tagscontroller');
mongoose.connect('mongodb://localhost:27017/STDBank');
app.use(bodyParser());
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/views/index.html');
});
app.use('/js', express.static(__dirname + '/client/js'));
// app.get('/api', function (req, res) {
// res.sendfile(__dirname + '/client/views/index.html');
// });
//REST API
app.get('/api/tags', tagsController.list);
app.post('/api/tags/:id', tagsController.update);
app.get('/api/untags', tagsController.listUntags);
app.post('/api/untags/:id', tagsController.updateUntags);
app.get('/api/tagnames', tagsController.listName);
app.listen(3000, function() {
console.log('I\'m Listening...');
})
tagscontroller.js (Server Side)
var Tag = require('../models/tag');
var TagName = require('../models/name');
module.exports.list = function (req, res) {
Tag.find({}, function (err, results) {
console.log("RESULTS ARE: ",results);
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
arr.push({
_id : results[i]._id,
name : results[i].name,
itag : results[i].itag
});
console.log("enter if: ", results[i]);
}//end of if statement
else{
console.log("enter if: ", results[i].itag);
console.log("enters else statement ", arr);
}//end of else statement
}//end of for loop
console.log("results ",arr);
res.json(arr);
});
}
module.exports.update = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listUntags = function (req, res) {
Tag.find({}, function (err, results) {
var arr = [];
for(var i = 0; i<results.length;i++){
if(results[i].itag[0]){
//console.log("enter if: ", results[i].intentTag);
}//end of if statement
else{
//console.log("enter if: ", results[i].intentTag);
//console.log("enters else statement ", arr);
arr.push({
_id : results[i]._id,
name : results[i].name
});
}//end of else statement
}//end of for loop
//console.log("results ",arr);
res.json(arr);
});
}
module.exports.updateUntags = function(req, res){
var arr = [];
//for(var k = 0;k<req.body.intentTag.length();k++){
// arr[k]= req.body.intentTag[k];
//}
console.log("Server side entered ", req.body.itag);
Tag.findByIdAndUpdate(req.params.id, {
$set: {
name: req.body.name,
itag: req.body.itag //arr
}
}, function (err, tag){
if(err) res.send(err);
res.json(tag);
});
}
module.exports.listName = function(req, res){
TagName.find({}, function(err, results){
console.log("RESULTS: ", results);
res.json(results);
});
}
If we are only assuming a call to /tags then you will need to know what the Tag model looks like:
tag.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var TagSchema = new Schema({
name: String,
itag: []// arr
}, {collection : "requests"});
module.exports = mongoose.model('Tag', TagSchema);
app.js
var app = angular.module("taggingApp", ["ngRoute","ngResource"]);
app.config(function($routeProvider) {
$routeProvider.when("/tags", {
templateUrl: "../views/view-tags.html",
controller: "tagsController"
})
.when("/tags/:index", {
templateUrl: "../views/edit-tags.html",
controller: "/controllers/editTagController"
})
.when("/untags", {
templateUrl: "../views/view-untags.html",
controller: "/controllers/untagsController"
})
.when("/untags/:index", {
templateUrl: "/views/edit-tags.html",
controller: "/controllers/editUntagController"
})
.when("/tagnames", {
templateUrl: "../views/view-tagnames.html",
controller: "/controllers/tagnamesController"
})
.otherwise({
redirectTo: "/tags"
});
});
Due to our previous assumption we can see that we need the tagsController and the view/view-tags.html files
view-tags.html
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search Tag Details" data-ng-model="search" />
</div>
<table class="table table-striped table-hover">
<tbody>
<tr>
<th>Request</th>
<th>Tag Name</th>
</tr>
<tr data-ng-repeat="item in items | filter: search" data-ng-click="editItem($index)">
<td>{{item.name}}</td>
<td>{{item.tag}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-click="untaggedView()" class="btn btn-primary">Untagged View</button>
</div>
<div class="form-group">
<button data-ng-click="tagnamesView()" class="btn btn-primary">View Tagnames</button>
</div>
tagsController.js (Client Side)
app.controller("tagsController", ["$scope", "$resource", "$location", "$routeParams", function($scope, $resource, $location, $routeParams) {
var Tag = $resource("/api/tags");
Tag.query(function(results){
$scope.items = results;
console.log("The items = ", items);
});
$scope.untaggedView = function() {
$location.path("/untags");
};
$scope.editItem = function(index) {
$location.path("/tags/" + index);
};
$scope.tagnamesView = function() {
$location.path("/tagnames");
};
}]);
And then Lastly index.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> --> <script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div data-ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
Any Help whatsoever would be greatly appreciated
EDIT:
I have added the comments in below however it seems that it cannot get that Angular. Any ideas on that?
NEW view-tags.html file
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!--<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
These are the errors I have been getting when I updated my HTML file
EDIT:
Here is your error Aravind:
#Aravind
NEWEST EDIT:
edited index.html file:
<!DOCTYPE html>
<html ng-app="taggingApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"></script>
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" />
<!-- <script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
<!-- <script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> -->
<script data-require="ui-bootstrap#*" data-semver="2.2.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.2.0.js"></script>
<script data-require="tether#*" data-semver="1.3.4" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css" />
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1> Tagging Tool</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div ng-view=""></div>
<p>{{search}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="/js/controllers/tagsController.js"></script>
<!-- <script type="text/javascript" src="/js/controllers/untagsController.js"></script>
<script type="text/javascript" src="/js/controllers/editTagController.js"></script>
<script type="text/javascript" src="/js/controllers/editUntagController.js"></script>
<script type="text/javascript" src="/js/controllers/tagnamesController.js"></script> -->
</body>
</html>
I am still receiving the [$injector:modulerr] error however the others are all sorted out.
EDIT:
I have changed the relative directories of my App.js so that they actually load the controllers and views. On top of that I have added an app definition into every controller. This fixes my current errors, gives me no other errors however the data is not displaying
Include angular scripts in the index.html and your reference for the ngResource is missing
Use
//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js
Update :
Replace this line
"cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
with this
"//cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.9/angular-resource.js"
Reason : you missed //
if // is not there it will be searching in your localhost.
adding // will be searching in the internet http or https is not mentioned because // refers to your current protocol and makes request correspondingly
how to check textbox isEmpty in angularjs Factory?
My HTML Source is
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
</div>
</body>
</html>
angular.module('myApp', [])
.controller('customersCtrl', function($scope){
$scope.changed = function(){
if(!$scope.test){
$scope.msg = 'empty';
} else {
$scope.msg = 'not empty';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test" ng-change="changed()"/>
{{ test }} | {{ msg }}
</div>
var customersCtrl = function($scope,Validate){
var isEmpty = Validate.isEmpty($scope.test);
$scope.Validation = Validate;
if(isEmpty){
console.info('Textbox is empty');
}else{
console.info('Textbox is not empty');
}
};
angular.module('myApp').controller('customersCtrl', customersCtrl);
var Validate = function() {
var factory = {};
factory.isEmpty = function(val){
var result = false;
if(!val){
result = true;
}
return result;
};
return factory;
};
angular.module('myApp').factory('Validate', Validate);
Here is the Plunker according to your requirement.
In your controller, you can check the model value at any point in time. Like
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
if($scope.test == ""){
// textbox is empty, do your stuff here
}
});
additional trick !
you can check it on angular expression . see this below to example !
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.test = "";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="test">
<span ng-show="test.length == 0">
is empty </span>
</div>
</body>
</html>
hope !
I want to get THE MOVIE REVIEWS API by The New York Times. I tried it using AngularJS but I was not provided.Can someone help me?
var app = angular.module('movieApp', []);
app.controller('movieController',
function movieController($scope, $http) {
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
});
HTML
<!DOCTYPE html>
<html lang="en" ng-app="movieApp">
<head>
<meta charset="UTF-8">
<title>Movie Review</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="movieController">
<ul class="review-cards">
<li ng-repeat="item in results">
<h2>{{item.display_title}}</h2>
<p>{{item.summary_short}}</p>
</li>
</ul>
</div>
</body>
</html>
You have to handle that event to some element or just call it in your controller.
var app = angular.module('movieApp', []);
app.controller('movieController',
function movieController($scope, $http) {
// define default value
$scope.results = [];
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
// call that event
$scope.fetchReviews();
});
Try it.
app.controller('movieController', function ($scope, $http) {
$scope.fetchReviews = function() {
var api = 'http://api.nytimes.com/svc/movies/v2/reviews/all.jsonp?&offset=20&order=by-opening-date&api-key=XXX MY KEY XXX&responce-format=.jsonp&callback=JSON_CALLBACK';
$http.jsonp(api).success(function(data){
$scope.results = data.results;
});
}
$scope.fetchReviews();
});
check like this
I have 1 site under foo.com/test1/test1.html and another at foo.com/test2/test2.html
test1.html looks like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test1");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
And test2.html is like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var name = localStorage.getItem("name");
if(name){
console.log("name is defined");
}else{
console.log("name is not defined");
localStorage.setItem("name", "test2");
}
$('#name').text(name);
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
My question is that is it possible to achieve that that if I go to test1, the value of name is "test1" and if I go to test2 the name will be test2. Basically I suspect that I need to name them differently but I rather not do that. Is there any good work around for this?
Thank you in advance.
local storage is defined per domain. You should keep objects in localstorage to maintain page context.
Here is solution to do it.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
document.ready = function(){
var thispage = JSON.parse(localStorage.getItem("page1"));
if(thispage.name){
console.log("name is defined");
}else{
console.log("name is not defined");
var obj={name : "test1"}
localStorage.setItem("page1", JSON.stringify(obj));
}
}
</script>
</head>
<body>
<p id="name"></p>
</body>
</html>
similar to all pages.