I would like to know if it is possible to add angularjs to the custom app in Rally, or as alternative how to call REST services from a Rally Custom app. Can someone help me with this? Thanks in advance.
Best Regards
Here is an example of making a WS API call from an Angular app from inside Rally's custom page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<div ng-controller="MyController" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request to Rally</button>
<br/>
Data from server: {{myData.fromServer}}
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("https://rally1.rallydev.com/slm/webservice/v2.0/defect");
responsePromise.success(function(data, status, headers, config) {
$scope.myData.fromServer = data.QueryResult.Results[0];
console.log(data);
});
responsePromise.error(function(data, status, headers, config) {
alert("AJAX failed!");
});
}
} );
</script>
</div>
</body>
</html>
Using external CDN within app is expected to produce Mixed Content error if accessing over http. It works if https is used. Here is the first query result (a defect from my current project) is returned.
Related
I am trying to get any information with Angular from the local api that I have created in Ruby, Sinatra platform. I am sure that the api is running on the port 4567 since I can see the data if i access m it directly through web interface. When I do that I see this (just next to the number 0 there is like a small arrow so it is possible to minimize the details of the object):
0
id "1"
name "Company-A21"
address "Gany-A11"
If I want to see RAW data I get this:
[{"id":"1","name":"Company-A21","address":"Gany-A11"}]
On the "other side" I am running apache2 and this HTML file:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
And the hello.js:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
});
Why I can not see response?
I just started to practice Angular and I stuck here...
Your data is an array of objects so you'd output it like: {{company[0].id}}
You probably followed an example using ng-repeat which would look something like this:
<div ng-repeat="company in companies">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
https://jsfiddle.net/ojzdxpt1/21/
Use ng-init to execute your get request. Implement your api call under a method:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$scope.getCompany = function(){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
}
});
and use it in ng-init:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello" ng-init="getCompany()">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
I am very very new to AngularJS and programming and I am sure this is a basic question but I am having a difficult time finding our resources in how to achieve subtracting two $scope values consumed from a JSON file ($scope.carrierDiff). I would appreciate any help you can provide.
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div></body>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</html>
No need to calculate this separately
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
You just have to do this...
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{site.Carrier - site.Carrier2}}</li>
</ul>
</div>
</body>
With my limited knowledge of what is coming back from the file you are retrieving, it seems as though you are referencing the JSON data incorrectly. You need to reference $scope.sites OR data, not a hacked up version of both. If the structure of data looks like this:
data = {Carrier: 5, Carrier: 4}
Then you would reference Carrier like so:
data.Carrier1
So when you move data to $scope.sites, you are referencing the JSON in data and it would be referenced without the need to point out that it came from data
$scope.sites.Carrier1
So you code should look like so:
http://plnkr.co/edit/nnfewy?p=preview
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body >
<div ng-controller="SiteCtrl">
<ul ng-repeat="site in sites">
<li>{{site.ID}}</li>
<li>{{carrierDiff}}</li>
</ul>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("SiteCtrl", function($scope, $http) {
$http.get('JSON/getsamplesitesCopy.json').
success(function(data, status, headers, config) {
$scope.sites = data;
$scope.carrierDiff = $scope.sites.Carrier - $scope.sites.Carrier2;
}).
error(function(data, status, headers, config) {
// log error
});
});
</script>
</body>
</html>
Another item to remember, you should have you <script> in the head or in the body, not outside. See the modification in the code above.
I'm new to AngularJS, I would like to update my data.json but that I don't know where my file users.json should be and I have this error:
Error: $injector:modulerr
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0
Heres my code :
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', ['ngResource']);
app.factory('User', ['$resource',
function($resource){
return $resource('/users/:userId', {userId:'#id'},
{
'update': {method: 'PUT'}
}
);
}
]);
app.controller('UsersCtrl', function ($scope, User) {
$scope.users = User.query();
$scope.validate=function(user) {
user.$update();
}
$scope.delete=function(user) {
user.$delete();
}
$scope.create = function (newUserName) {
var user = new User();
user.name = newUserName;
user.$save();
$scope.users.push(user);
}
});
</script>
<body ng-app="myApp" ng-controller="UsersCtrl">
<ul>
<li ng-repeat="user in users">
<input type="text" ng-model="user.name" />
<button ng-click="validate(user)">Valider</button>
<button ng-click="delete(user)">Supprimer</button>
</li>
</ul>
Nouveau utilisateur :
<input type="text" ng-model="newUserName" />
<button ng-click="create(newUserName)">Créer</button>
</body>
</html>
Anyone have an idea please?
You forgot to add the ngResource file.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
From ngResource page:
You can download this file from the following places:
Google CDN
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-resource.js
Bower
e.g. bower install angular-resource#X.Y.Z
code.angularjs.org
e.g. "//code.angularjs.org/X.Y.Z/angular-resource.js" where X.Y.Z
is the AngularJS version you are running.
Working Fiddle: http://jsfiddle.net/softvar/rq9eupee/1/
Add angular-resource script below the angular.js file depending upon the version you need within head tag.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
If you want to read some data from the file users.json, have it on server(Backend) and populate it as per your requirements. If you simply want to show the list of users, fetch it from server, server will read the file and returns it contents. If for some purpose, you need to read the file and display it contents on front-end, have it inside your js/ folder. But assuming, you read it to send the response, it should be on backend.
In an attempt to learn AngularFire, I've been messing around with AngularFire user authentication methods. On the Firebase website, an example is given that, when I plug in my Firebase address in the proper place, works. When I copy and paste the code into Notepad++ and attempt to run it that way, the HTML works, but none of the Javascript does. I added an alert box to the Javascript, and on opening the page, the alert box popped up, but none of the rest of the JS worked. I feel like I'm missing something very obvious. What am I doing wrong?
Thanks for any help!
My code is as follows:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"> </script>
</head>
<body>
<script>
var app = angular.module("sampleApp", ["firebase"]);
// let's create a re-usable factory that generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth",
function($firebaseAuth) {
var ref = new Firebase("https://xxxxx.firebaseio.com/?page=Auth");
return $firebaseAuth(ref);
}
]);
// and use it in our controller
app.controller("SampleCtrl", ["$scope", "Auth",
function($scope, Auth) {
$scope.createUser = function() {
$scope.message = null;
$scope.error = null;
Auth.$createUser({
email: $scope.email,
password: $scope.password
}).then(function(userData) {
$scope.message = "User created with uid: " + userData.uid;
}).catch(function(error) {
$scope.error = error;
});
};
$scope.removeUser = function() {
$scope.message = null;
$scope.error = null;
Auth.$removeUser({
email: $scope.email,
password: $scope.password
}).then(function() {
$scope.message = "User removed";
}).catch(function(error) {
$scope.error = error;
});
};
}
]);
</script>
<div ng-app="sampleApp" ng-controller="SampleCtrl">
Email: <input type="text" ng-model="email">
Password: <input type="text" ng-model="password">
<br><br>
<button ng-click="createUser()">Create User</button>
<br><br>
<button ng-click="removeUser()">Remove User</button>
<p ng-if="message">Message: <strong>{{ message }}</strong></p>
<p ng-if="error">Error: <strong>{{ error }}</strong></p>
</div>
</body>
</html>
I think what has happened is that you have used the ng-app directive twice in your html. If you look at the Angular documentation for ng-app, the first ng-app tag is auto bootstrapped as an application, any additional ng-app have to be manually loaded. Also, you cannot nest applications in a page. When I tried to run your application the SampleCtrl controller is undefined.
I've removed the first ng-app directive and the rest of your code seems to work fine in this plunker I've created.
<!DOCTYPE html>
<!--
ng-app directive is already delclared in the body, removing this one
<html ng-app>
-->
<html>
<head>
...
</head>
<body>
<div ng-app="sampleApp" ng-controller="SampleCtrl">
...
</body>
</html>
I developed one RESTful web service. The link return json code, like these:
{"status":"itPassed","dest":"/elk2/kr659p/home"}
Now I want to display these data in my screen.
View:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-resource.min.js"></script>
<script src="../controllers/webservice.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.status}}</p>
<p>The content is {{greeting.dest}}</p>
</div>
</body>
</html>
My Controller
angular.module('myApp', []).controller('Hello', function ($scope, $http) {
alert(1);
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(2);
$scope.greeting = data;
alert(data);
});
});
no errors in console? because that's not really how you write a controller in angularJS.
you should have something like
angular.module('mymodule', []).controller('Hello', function ($scope, $http) {
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(data);
$scope.greeting = data;
alert(data);
});
});
by the way, does the alert actually show something?
Did you try to place breakpoints?
Open the Chrome Debugger - Place the following breakpoints:
on the $http.get line - see if you are reaching it.
on the alert(data) line - see if the data contain what you expected.