REST call in AngularJS does not display record - javascript

This is my first AngularJS project. I followed this website to create a simple html to display a single record by calling restful services. The rest works with the url "http://localhost:8080/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009".
Here is my html:
<html ng-app="cgApp" ng-controller="CgseqCtrl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
<script src="../js/controller.js"></script>
</head>
<body>
<div>
<hr>
<h2>{{seq.analysisId}}</h2>
<h2>{{seq.library}}</h2>
</hr>
</div>
</body>
</html>
I defined the resource in a service js
//service.js
angular.module('cgApp', ['ngResource'])
.factory('CgseqService', function ($resource) {
return $resource('http://localhost:8080/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009',
{get: {method: 'GET'}
});
});
The controller:
//controller.js
angular.module('cgApp', ['ngResource'])
.controller('CgseqCtrl', ['CgseqService', '$scope', function (CgseqService, $scope)
{
$scope.getSeq = function(response) {
CgseqService.get(function(data) {
$scope.seq = data;
});
};
}]);
When I started my http server with Node.js and typed the url in the browser, nothing is displayed. What did I do wrong?

Several errors.
You didn't load your factory code. It looks like you only loaded your controller.js (I'm assuming your factory code is in a different file since in your example you commented it as //service.js):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>
<script src="../js/controller.js"></script>
</head>
np-controller should say ng-controller:
<html ng-app="cgApp" np-controller="CgseqCtrl">
You also never called your $scope.getSeq function:
$scope.getSeq = function(response) {
CgseqService.get(function(data) {
$scope.seq = data;
});
};
You should call $scope.getSeq() somewhere to actually invoke it.

Related

How to get data from rest api which has basic authentication?

I'm trying to get data from this website through HTTP get method. This website has basic authentication. The data is in JSON format.
This is the rest api website:
(https://shoploapi.herokuapp.com/sellers)
// Code goes here
angular.module('myapp', ['myapp.controller']);
angular.module('myapp.controller', ['myapp.service'])
.controller('testController', function($scope, testService) {
$scope.posts = {};
function GetAllPosts() {
var getPostsData = testService.getPosts();
getPostsData.then(function(post) {
$scope.posts = post.data;
}, function() {
alert('Error in getting post records');
});
}
GetAllPosts();
});
angular.module('myapp.service', [])
.service('testService', function($http) {
//get All NewsLetter
this.getPosts = function() {
return $http.get('https://shoploapi.herokuapp.com/sellers');
};
});
angular.module('myApp', ['base64'])
.config(function($httpProvider, $base64) {
var auth = $base64.encode("bhupendra7:ice123age456");
$httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + auth;
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-base64/2.0.5/angular-base64.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<h1>Hello Plunker!</h1>
<div ng-controller="testController">
<div>
<ul>
<li ng-repeat="post in posts">
{{post.careof}} {{post.district}} {{post.gender}} {{post.name}}
</li>
</ul>
</div>
</div>
</body>
</html>
Here's the link to my Plunker:
(https://plnkr.co/edit/7pqljm?p=preview)
Can anyone help?
There are 2 problems in your code.
1. You have a typo
In angular.module('myApp', ['base64']), change to module name to myapp
2. The way you have injected your myapp.controller to myapp module
Change it to angular.module('myapp', []); You will also need to reorder your code. Check out the Plunker I have created for you.
Even if you fix the above two problems, you will still face a CORS problem from Heroku. Depending on your server-side technology (NodeJS, Rails etc.), you will need to enable it from the server to be able to communicate with your app. You can also look in to JSONP with AngularJS
Hope this helps

AngularJS routeprovider is not called

I've googled a lot of info about routing in AngularJS and have seen questions at stackoverflow, for example, this 1, this 2, this 3, this 4. However, there is no result.
I've included AngularJS 1.5.8.js and angular-route.js.
HTML:
<!doctype html>
<html ng-app="employeesApp">
<head>
<title>Injecting view</title>
</head>
<body >
<p>Hey! View should be injected between these statements</p>
<div ng-view></div>
<p>Hey! View should be injected between these statements</p>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/employeesController.js"> </script>
</body>
</html>
Employees.html:
<h2>Employees</h2>
<article>This is employee view!:)</article
employeesController.js:
(function()
{
var employeesController=function($scope, foo, bar) {//THIS CODE SNIPPET IS NOT CALLED
alert('a1');
debugger;
$scope.sortBy='name';
$scope.reverse=false;
$scope.employees= [
{joined:'2010-12-02', name:'Jon', city:'Reading', orderTotal:49.9956},
{joined:'1995-01-25', name:'Ben', city:'Las Vegas', orderTotal:519.99},
{joined:'1994-06-15', name:'Joseph', city:'New York', orderTotal:344.99},
{joined:'1998-03-18', name:'Adam', city:'Seattle', orderTotal:1021.5}
];
$scope.doSort=function(propName){
$scope.sortBy = propName;
$scope.reverse=!$scope.reverse;
};
};
employeesController.$inject=['$scope'];
angular.module('employeesApp',[]).controller('employeesController',
employeesController);
}());
app.js:
(function() {
debugger; //this code snippet works
var app=angular.module('employeesApp',['ngRoute']); //this code snippet works
app.config(function($routeProvider){ //THIS CODE SNIPPET IS NOT CALLED
alert('in');
debugger;
$routeProvider
.when('/', {
templateUrl: 'app/views/employees.html',
controller: 'employeesController'
})
.otherwise( { redirectTo: '/' });
});
}());
I double checked all directives and code, however employee.html is not injected.
Does anybody know what I am doing wrong? I am using AngularJS 1.5.8.js.
The only problem i see is you are redefining employeesApp in your controller
angular.module('employeesApp', []).controller('employeesController', employeesController);
Omit the [] part
angular.module('employeesApp').controller('employeesController', employeesController);
You only define your modules once. Using angular.module('modulename', arrayofdependencies or empty array)
Everywhere else you just get the module and add parts, i.e. Controllers, directives etc, using getter syntax. Do not use array here. angular.module('modulename').controller

Use Coldfusion query resultset in AngularJS

I'm trying to use AngularJS in my cfm files to display data from cfquery resultset.
I used below code in my cfm file.I'm not able to see any output.
P.S. I'm really new to AngularJS. So if anyone can please help me out here it would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html ng-app="Demo">
<head>
<link rel="stylesheet" href="/Applications/_Common/style.css" type="text/css">
</head>
<body>
<cfsetting enablecfoutputonly="Yes">
<CF_GetProjectData project_number=349246 query_name="GetProject">
<div ng-controller="DemoController">
<div ng-repeat="number in project">
{{number.project_number}} - {{number.project_name}}
</div>
<!-- <input name="imprint" type="text" size="10" ng-model="first">
<p>{{first}}</p> -->
</div>
<cfoutput>
<script language="JavaScript" src="/CFIDE/scripts/wddx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script language="text/javascript">
var theProjectArray; < cfwddx action = "CFML2JS"
input = "#GetProject#"
toplevelvariable = "theProjectArray" >
</script>
<script>
var Demo = angular.module("Demo", []);
Demo.controller("DemoController", function($scope) {
$scope.project = theProjectArray;
alert(theProjectArray);
});
</script>
</cfoutput>
<cfsetting enablecfoutputonly="No">
</body>
</html>
I am not sure about Angular.js but based on the code you have posted, it seems, you need to wrap ng-controller div in cfoutput. This is because you have set enablecfoutputonly="Yes". So only the content inside cfoutput will be rendered.
I'm a CF developer that's currently learning Angular as well. First of all Angular is a MVC framework and will work for you best of you follow the rules of Separation of Concern (SoC). I know unless you are using Object Relational Mapping (ORM) in CF this is counter intuitive but it will save you so much hassle and trouble shooting later.
For your problem right now though i would
combine both script blocks.
your variable theProjectArray is defined with var so it's not
global. Are you sure it's making it into your controller?
the line toplevelvariable = "theProjectArray" > ... is the greater
than sign a type-o?
After you've done those i would console.log(theProjectArray); right after it's defined. Then console.log(theProjectArray); again in your controller to ensure it's getting passed in properly.
Just for your reference here is a very basic example of a controller and a factory in angular calling a CFC. Since i've been doing things this way the only time i use ColdFusion is to retrieve data and model it. It's simplified my code and logic quite a bit and has allowed me to do a lot more now that i'm not leaning on ColdFusion.
var myapp = angular.module("test.myapp", [])
myapp.controller("MyController", function($scope, getevent) {
$scope.myData = {};
$scope.myData.doUpdate = function(item, event) {
getevent.GetProgram(item).success(function(data, status, headers, config) {
console.log(data.DATA);
$scope.test = data.DATA;
$scope.test.DATE = new Date(data.DATA.DATESTART);
});
getevent.GetProgram(item).error(function(data, status, headers, config) {
console.log("FAILED: "+item);
alert("AJAX failed!");
});
}
});
myapp.factory('getevent', function($http){
return {
GetProgram: function(item) {
var programInfo = '/foundation/cfc/calendar.cfc?method=getevent&eventid='+item;
return $http.get(programInfo);
}
};
});

AngularJS, Async - ng-repeat not waiting for scope to be set

When I load up my index page, my ajax call works and the scope does get set. But it seems like ng-repeat is loading before the scope gets set with "products".
I feel like there should be a way to either
Load the page without having to wait for the scope to be set, but when it does get set - then re-run the loop "ng-repeat"
Wait for the AJAX Call to be done before initializing the loop ('ng-repeat')
Cheers!
products.controller.js
dvpModule.controller("ProductsController", function ($scope, productRepository) {
productRepository.get().then(function(products) {
$scope.products = products;
});
});
products-repository.js
dvpModule.factory('productRepository', function($http, $q) {
return {
get: function() {
var deferred = $q.defer();
$http({
method: 'POST',
url: 'http://localhost/test/wp-admin/admin-ajax.php',
params: { action: 'getAllProductUrls' },
}).success(deferred.resolve).error(deferred.reject);
return deferred.promise;
}
};
});
index.html
<html ng-app="dvpModule">
<head>
<script type='text/javascript' src='js/angular.min.js'></script>
<script src="js/scripts/dvp_module.js" /></script>
<script src="js/scripts/products-controller.js" /></script>
<script src="js/scripts/products-repository.js" /></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title>DVP {{2 + 2}}</title>
</head>
<body ng-controller="ProductsController">
<div>
<tr ng-repeat="product in products">
<th>{{product.Category}}</th>
<th>{{product.Features}}</th>
<th>{{product.MODEL_SERIES}}</th>
</tr>
</div>

Using an array of values in Factory

Currently I have a factory that is using a json file wrapped in a $http.get request. While not ideal, this works for testing. I'm needing to test the same solution within a SharePoint environment, but json files are not allowed. Ultimately this will be connected to a web api call.
How can I specify the json values within a factory, to allow for testing?
(function() {
var personalViewFactory = function($http) {
var factory = {};
factory.getCustomers = function() {
return $http.get('relationshiptracker.json');
};
return factory;
};
personalViewFactory.$inject = ['$http'];
angular.module('customersApp').factory('customersFactory',
personalViewFactory);
}());
Example of json
[
{
"Segment":"Trading",
"Title":"Narima Ajam ",
"Role":"Oil and Shipping Competency Center Manager ",
"Last Meeting Date":"1/1/2000",
"nextmeetingowner":"",
"CreatedDate":"9/14/2014",
"Modified":"9/14/2014",
"primaryaccountability":"Ajay Buti ",
"otherltEngaged":"Aylin Korkmaz, Carolyn Williams, Karthik Chandrasekar",
"upcomingdate":""
},
{
"Segment":"Upstream",
"Title":"Alison Kenney",
"Role":"IM/IT Manager - The Bridge; (NOLA) - The Bridge",
"Last Meeting Date":"8/5/2014",
"nextmeetingowner":"",
"CreatedDate":"1/2/2000",
"Modified":"2/15/2014",
"primaryaccountability":"Arnold",
"otherltEngaged":"Yero",
"upcomingdate":""
},]
Just place your JSON on a variable in your factory and close over it in your functions.
http://plnkr.co/edit/gWklBTEZWqxPzQjhV19D?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
{{myData}}
<script>
var app=angular.module("app",[]);
app.factory("data",function($http){
var data = [{name:'Bob'},{name:'Amy'}];
return{
getData : function(){
return data;
}
}
});
app.controller("myCtrl",function($scope,data){
$scope.myData = data.getData();
});
angular.bootstrap(document,["app"]);
</script>
</body>
</html>

Categories

Resources