I'm practicing Web API through JSON.
In the URL I am using (https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json), there are fields like ID, titles etc. I want to call title and display it. Below is my code so far:
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.success(function(data) {
$scope.magazine = data;
});
}]);
And my controller is binding with html date in the following way:
<div ng-controller="europepmc">
<p>The magazine title is is {{magazine.title}}</p>
</div>
After successfully developing this code I'm not able to get the title.
The JSON you are receiving has more properties for you to go through before you can reach title from results. You should extent it with .resultList.result first. Then display this array with ng-repeat.
Here is a demo:
var app = angular.module("pmc", []);
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.then(function(res) {
$scope.magazines = res.data.resultList.result;
});
}]);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="pmc" ng-controller="europepmc">
<div ng-repeat="magazine in magazines">
{{magazine.title}}
<hr>
</div>
</div>
</body>
</html>
Here is a demo to view the entire response:
var app = angular.module("pmc", []);
app.controller("europepmc", ['$scope', '$http', function($scope, $http) {
$http.get('https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json')
.then(function(res) {
$scope.magazine = res.data;
});
}]);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="pmc" ng-controller="europepmc">
<pre>
{{magazine | json}}
</pre>
</div>
</body>
</html>
your Json object does have the title property, but a bit deeper:
object.resultList.result.0-24.title
to look at it better, paste your Json here:
http://jsonviewer.stack.hu/
and check the viewer tab.
//In Angular Controller Code
var app = angular.module("myApp", []);
app.controller("europepmc", ['$scope', '$http', function ($scope, $http) {
$http({
method: 'GET',
dataType: 'json',
url: 'https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=malaria&format=json',
}).then(function (success) {
$scope.magazineList = success.data.resultList.result;
}, function (error) {
alert(error);
});
}]);
// HTML Page Code
Use ng-repeat to loop through mg in magazineList -- and then use mg.title
Related
https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview
I have created an array of items and when I click on each item details page will be displayed ,for all the items in the array I have used same details page,can anyone look at my plunker and explain why the templateURL is not working when I click on an item?
var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
$scope.items = [{
name: 'Iphone',
}, {
name: 'Oneplus'
}, {
name: 'Moto'
}];
});
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
app.controller('ItemCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.itemName = $routeParams.itemName;
}
]);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>
<p>Search:<input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="item in items|filter:test">{{ item.name }}
</li>
</ul>
<div ng-view></div>
</body>
</html>
here is my details page
<!DOCTYPE html>
{{itemName}}
is it because of a mismatch?
.when('/item/:itemName', {
a href="/items/{{item}}"
there's an extra s there
Summary of problems:
Your ItemCtrl is currently defined inside your module's config function. Move it out of there
app.config(function($routeProvider) {
$routeProvider
.when('/item/:itemName', {
templateUrl: 'details.html',
controller: 'ItemCtrl'
});
}); // you were missing this
app.controller('ItemCtrl', ['$scope', '$routeParams',
Your route is /item/:itemName and since you're not using HTML5 mode, you need to create your href attributes with a # prefix. For example
ng-href="#/item/{{item.name}}"
Fixed demo here ~ https://plnkr.co/edit/rKHsBMFcXqJUGp8Blx7Q?p=preview
I want to inject html into an angular page
My controller starts with:
myapp.controller("myCtrl", function ($scope, $http, $stateParams, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<p>Hello</p>";
And on my HTML page I have:
<div class="intro"> AA {{renderHtml(pgf)}} AA </div>
And in the browser, I see:
AA <p>Hello</p> AA
Where what I want is
AA
Hello
AA
Is this a version problem- how do pick a consistent set of versions? (If I just raise the versions, I get all sorts of errors...)
You have to use ng-bind-html (angular ngBindHtml docs) to bind HTML content...
CONTROLLER
function myCtrl($scope, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<p>Hello I'm a Bear</p>";
}
HTML
<div ng-bind-html="renderHtml(pgf)"></div>
Additionally, here you are a working PLUNKER with your example.
So your Angular code works but you didn't place your html binding in the right place.
You can't set a function inside angular binding {{ function }}
So in your HTML should say <div ng-bind-html="trustHTML(pgf)"></div>
Try ngBindHtml directive in module ng. It provides a secure way of binding content to an HTML element.
Syntax :
<element ng-bind-html="expression"></element>
DEMO
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<h1>Hello I'm a Bear</h1>";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<div ng-bind-html="renderHtml(pgf)"></div>
</div>
I'm trying to understand "scopes" in agularJS and i can't understand the following piece of code:
HTML:
<body ng-app="myModule">
<div ng-controller="MyCtrl">
<my-component>
<h2>Attribute</h2>
{{isolatedAttributeFoo}}
</my-component>
<my-component>
<h2>Attribute</h2>
{{isolatedAttributeFoo}}
</my-component>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
AngularJS:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.isolatedAttributeFoo = 'Hello!';
}]);
As you can see it is a very simple test. As far as i know (from this example), the childs of a directive (in the example, the elements inside "my-component") inherit the scope from the directive and, since the "my-component" scope is isolated, the "isolatedAttributeFoo" variable should NOT take the value from the "isolatedAttributeFoo" variable at the controller... But it does. Why? Am i misunderstanding something?
If you want to try it, here is the Fiddle.
You can only isolate the scope when you include the template or templateUrl in the directive definition. Other wise it will only inherit from parent and view won't even recognize any changes to scope made in link or controller of directive
Try the following:
HTML
<my-component></my-component>
JS
.directive('myComponent', function () {
return {
restrict:'E',
template: ' <h2>Attribute</h2>{{isolatedAttributeFoo}}',
scope:{},
link:function(scope){
scope.isolatedAttributeFoo = 'Good Bye!';
}
};
});
DEMO
I think this will be clear:
Here is a fiddle:
https://jsfiddle.net/kst65t0p/3/
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{},
link : function(scope){
alert(scope.isolatedAttributeFoo);
}
};
})
.controller('MyCtrl', ['$scope', function () {
this.isolatedAttributeFoo = 'Hello!';
}]);
<div ng-app="myModule" ng-controller="MyCtrl">
<my-component>
<h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
</my-component>
<my-component>
<h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
</my-component>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Your scope is isolated into the link function.
The link function is to a directive what a controller is to the view.
I have an HTML file, in which i'm trying to display a variable from a controller, like so:
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<body ng-app="starter">
<ion-pane>
<ion-content ng-controller="ListCtr”>
{{var}} <!-- this is not evaluated! -->
</ion-content>
</ion-pane>
</body>
The output is plainly: {{scope.var}}
instead of Hello!
The controllers.js file:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
})
<!-- ** This the controller, which has the referenced var ** -->
.controller('ListCtr', function ($scope) {
$scope.var = "Hello!";
})
;
Can anyone please point out what i'm doing wrong??
You are binding var to $scope then you can reference it directly in corresponding view. Remove scope in html
<ion-content ng-controller="ListCtr”>
{{var}}
</ion-content>
i get this error when i start the app
this is the controller:
myApp
.controller('NavController',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'main';
return page === currentRoute ? 'active' : '';
};
}]);
and this is the app.js:
angular.module('myApp',[
'ngRoute'])
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'views/main.html',
controller: 'mainCtrl'
})
.when('/team1',{
templateUrl:'views/team1.html',
controller: 'mainCtrl'
})
}]);
and the htmlIndex where i use the contoller:
<header>
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav" ng-controller="NavController">
<li ng-class="navClass('home')"><a href='#/'>Home</a></li>
<li ng-class="navClass('home')"><a href='#/team1'>team1</a></li>
</ul>
</div>
</div>
</header>
i click the nav buttons nothing happens and in the console i get this error "Argument 'NavController' is not a function, got undefined"
Maybe you call controller in a wrong way. It should be called on a app like this:
angular.module('myApp')
.controller('NavController',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'main';
return page === currentRoute ? 'active' : '';
};
}]);
Take a look at this fiddle for a complete code: https://jsfiddle.net/q91jozyr/
When you define the module with angular.module('myApp', ['ngRoute']) you need to save the reference in the variable myAppto reuse the module, when declaring the controller.
app.js:
var myApp = angular.module('myApp', ['ngRoute'])
Alternatively I suggest to call the controller by reusing the module like this:
controller:
angular.module('myApp').controller('NavController', [ /* etc... */ ]);
Note that the module is being reused, if you don't specifiy the dependencies again like angular.module('myApp') instead of angular.module('myApp', [ ]).
In both cases make sure the module myApp is bootstrapped by adding ng-app="myApp" to any of the parent elements, e.g. the <body>:
<body ng-app="myApp">