I have a url which has an object which contains name,city then how to display it on a page.
http://www.w3schools.com/angular/customers.php
You can use Angulars $http-Service. It creates a promise which delivers the data and you can use that in your Controller, Service etc.
I created a simple Plunkr which showcases a possible setup.
Code looks something like
$http.get('http://www.w3schools.com/angular/customers.php').success(function(data) {
console.log(data);
});
You can access that data like shown in the Plunkr.
Have fun!
Related
I am getting started with Angular, and I want to get HTML template from a file using JavaScript, I don't want to use ng-include or any other directive as I don't really have an html to play with, I have only JavaScript file with data rendered from REST service and I need to send HTML output to the page I am in, so I don't really have any existing elements in the DOM.
So how do I get HTML from another file and use it just from JavaScript, in an Angular way?
I think you should use directive and as James point out use the $compile.
You can look some doc https://docs.angularjs.org/guide/compiler
If for any reason you don't want to do that, I can put an exemple of a really BAD angular code I use on my app to show the CGU (an HTML from another domain).
Note that we use jQuery, and that's not a good thing in Angular world.
$http({
method: 'GET',
url: 'URL_HTML'
}).success(function (data, status, headers, config) {
var html_from_server = $.parseHTML(data);
data = $(html_from_server.find('#container'));//look for the content of an ID.
$('#content_cgu').html(data.html());// get an element on our page and replace the html content
});
Take a look at $compile - it sounds like that's what you're looking for. You can take the html from your service and compile it to work in your AngularJS application.
Let me rephrase it. How do I get HTML from another page and store it in a variable inside my JS file using Angular? What do I do? var returnedHTML = ???
Straightforward solution:
var returnedHTML;
var url = 'http://www.google.com';
$http.get(url, { cache: $templateCache }).then(function(result){
returnedHTML = result.data;
});
I was just dealing with this today. I think your question was misunderstood.
You simply include an ng-include into your code like so:
ng-include="'https://en.wikipedia.org/wiki/Special:Random'"
Angular will display your URL as directly in the page.
I've been following this tutorial http://draptik.github.io/blog/2013/07/28/restful-crud-with-angularjs/. I implemented a Grails backend with it instead of the Java one in the tutorial.
I've got the data coming back and forth, with one issue. If I create/update/delete a user, I don't see the changes reflected on my user list when I am redirected back. I have to refresh the page to see the updates.
Looking at the network traffic for an edit, it looks like it does a PUT and fires off the GET before the PUT is complete. Assuming this is because $resource returns a promise so things can be done asynchronously. So how do I handle this so that when $location redirects me, my list is up to date?
I'm guessing the options are to wait for the PUT to complete before redirecting/querying for the list, or to somehow manually manage the $scope.users to match the request?
Or maybe this tutorial is just a bad example? Maybe there is a better way to do it (still using $resource)?
Note: I've seen Restangular out there, and I've seen $http with success callbacks, but I would like to understand the situation above.
One way to overcome this issue would be to not redirect to the list page, till you get a callback, and then do a redirect. You can show some busy indicator till that time. The resource call looks like this.
resource.update(config,data,function() { //gets called on success},
function(error) { //gets called on failure});
In real life scenario waiting for the response of update makes sense as you want to handle the error and success scenarios on the same page.
I don't see your code anywhere so i'm just assuming (based on what you wrote and your current problem)
You are probably doing a full (or partial) get each time you changed a user and (re)binding the result to your scope. Doing this in the callback of the resource should actually start the digest cycle angular does to update modified objects. If you had been doing the fetching outside $resource - for example with custom/jquery ajax you would need to execute $scope.$apply()
What i really don't understand you would need to wait for the callback. You already know you added/modified a user. Instead of 'detaching' that user from your scope, modify it, post it to your rest server, then wait for callback, and reinserting it into the scope - why not modify it directly in the list/array you put on your scope?
var users = Users.get(function () {
$scope.users = users.record; // bind the resulting records to the scope
});
$scope.updateUser = function (user) {
resource.update(...); //pseudo
};
Then in your html, you will keep a reference to the currentUser and the div-list will update automaticly.
<div ng-repeat="user in users" ng-click="currentUser=user">{{user.Name}}</div>
<input ng-model="currentUser.Name">
<button ng-click="updateUser(currentUser);">Update</button>
If you don't want to see the update in the list while you type, but only once your callback fires or when you hit the button, would would instead use another ng-model for your input like this:
<input ng-model="tempUser.Name">
And you would then copy the value other in either the updateUser method or in the resource callback like this:
$scope.updateUser = function (user) {
user.Name = $scope.tempUser.Name; // should update automaticly
resource.update(...) // pseudo
}
Hope it helped!
I'm stating to learn AngularJS, coming from a lot of different MV* frameworks.
I like the framework, however I'm having trouble with passing data between Controllers.
Suppose I have a screen with some input (input.html) and a controller, let's say InputCtrl.
There's a button on this view which takes you to another screen, let's say approve (approve.html) with a controller ApproveCtrl.
This ApproveCtrl needs data from the InputCtrl. This seems like a very common scenario in bigger applications.
In my previous MV* frameworks, this would be handled like (pseudo-code):
var self = this;
onClick = function() {
var approveCtrl = DI.resolve(ApproveCtrl);
approveCtrl.property1 = self.property1;
approveCtrl.property1 = self.property2;
self.router.show(approveCtrl);
}
It would work like Controller- first.
You create the controller first, having a chance to put it in the right state; afterwards the View gets created.
Now, in AngularJS, I'm handling this like:
var self = this;
onClick = function(){
self.$locationService.path('approve');
}
This works like View-first.
You say to which view / route to navigate, the Controller gets created by the framework.
I find it hard to control the state of the created Controller and pass data to it.
I've seen and tried following approaches, but all have it's own issues in my opinion:
Inject a shared service into InputCtrl & ApproveCtrl and put all data to be shared on this service
This looks like a dirty work-around; the state in the shared service becomes global state, while I just need it to pass data to the ApproveCtrl
The lifetime of this shared service is way longer than what I need it for - just to pass data to the ApproveCtrl
Pass the data in $routeParams
This gets quite messy when having the pass a lot of parameters
Use $scope events
Conceptually, this is not something I would use events for - I just need to pass data to the ApproveCtrl, nothing event-ish
This is quite cumbersome; I have to send an event to the parent first, that would then broadcast it to it's children
Am I missing something here? Am I creating too many small Controllers?
Am I trying to hold on to habits from other frameworks too much here?
In terms of structure AngularJS is more Modular than MVC one.
Classic MVC describes 3 simple layers which interact with each other in such way that Controller stitches Model with View (and Model shouldn't rather work with View directly or vice versa).
In Angular you can have multiple, some completely optional, entities which can interact between each other in multiple ways, for example:
That's why there are multiple ways of communicating your data between different entities. You can:
Send messages directly between controllers using difference between this and $scope
Send messages using events
Send messages using shared system (Note: same link as above, answer shows both techniques)
or
Send messages using AJAX backend
Send messages using external system (such as MQ)
...and a lot more. Due to its diversity Angular allows developer/designer to choose way they are most comfortable with and carry on. I recommend reading AngularJS Developer Guide where you can find blessed solutions to some common problems.
If your intent is to simply share data between two views, a service is probably the way to go. If you are interested in persisting to a data store, you may want to consider some sort of back-end service such as a REST API. Take a look at the $http service for this.
Even if XLII gave a complete response, I found this tutorial using a service. It's very interesting and a simple way for sharing data between controlers using the 2 ways binding property : https://egghead.io/lessons/angularjs-sharing-data-between-controllers
I still havn't used it for now.
Otherwise there is also this other way, based on events : http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/
If you wish to pass simple string data from one page (page1) to another page (page2), one solution is to use traditional url parameters. Invoke the page2 route url with parameter like "/page2/param1/param2". The controller of page2 will receive the parameters in "routeParams". You will be able to access parameteres as routeParams.param1 and routeParams.param2. The code below is adopted from: How to get the url parameters using angular js
Invoke the page2 route from page1's controller(js) or a url in its html with parameters as:
"/page2/param1/param2"
Page2 route:
$routeProvider.when('/page2/:param1/:param2', {
templateUrl: 'pages/page2.html',
controller: 'Page2Ctrl'
});
And the controller:
.controller('Page2Ctrl', ['$scope','$routeParams', function($scope, $routeParams) {
$scope.param1 = $routeParams.param1;
$scope.param2 = $routeParams.param2;
...
}]);
Now you can access the parameters (param1 and param2) values in your page2's html/template as well.
I'm trying to understand how can i configure my angularJS routing given the following case:
We have a search page where we display the search results based on tags provided (1..n tags). we would like that a user to be able to parse enter a url as the following and our system to do the search and show the respective results.
The url format should be:
http://mywebsite.com/search/<term1>/<term2>/<termN>...so it could be different number of terms.
I was looking into the route provide and couldn't figure out a way to do it dynamically.
i saw that i could put in the routeprovid:
.when('/search/:searchParams',... but that handles only when i have one term...is there anyway to configure it to take as many terms as is given?
Does this help you at all? Seems to support dynamic routing and you could probably cut apart the :name parameter to do what you wish, perhaps.
http://gregorypratt.github.io/AngularDynamicRouting/
Ken
You could try base64ing your searchParams:
.when('/search/:searchParams', {controller:'SearchCtrl'})
function SearchCtrl($routeParams, $location){
//Assuming your params are an array like ['param1', 'param2', 'param3']
//You could easily adapt this to base64 a JSON object
function encodeParams(params){
return window.btoa(params.join(';'));
}
function decodeParams(string){
return window.atob(string).split(';');
}
var searchParams = decodeParams($routeParams.searchParams);
scope.search = function(params){
$location.path('/search/' + encodeParams(params));
}
}
My solution may be looks not so glad, but it's works at least:
You may organize your routs in way
yoursite.com/term1Name/**:param1**/term2Name/**:param2**/term3Name/**:param3**
To make it's clear, you may do your routes seems like REST routes. For example I'm want to go to a list of a services:
www.yoursite.com/servises/
Go to the one of the services:
www.yoursite.com/servise/:id
And if I'm want to see some of the service details, I'll do:
www.yoursite.com/servise/:id/details
and so
www.yoursite.com/servise/:id/detail/:id
Just want to know your idea wht will be my approach on how to store external json data file into a services so that i can inject it into different controllers
Thanks
Try to use ngTranslation module.
with this service you can store the static content(some json file, etc..) outside of the code, and not dirty your controllers/services...
EXAMPLE:
JS:
angular.module('app', ['ng-translation'])
.config(['ngTranslationProvider', function(ngTranslationProvider) {
ngStaticProvider
.setDirectory('/assets/static')
.setFilesSuffix('.json')
.langsFiles({
demo1: 'demo1',
demo2: 'demo2'
})
}]);
//inject to controller
function PanelController($scope, translateFilter) {
$scope.panelContent = translateFilter('key','fileName')
}
HTML:
<!-- use as a filter {{ key | translate: fileName }}-->
<p>{{ key | translate: fileName }}</p>
<!-- use ng-translate directive, similar to ng-bind-->
<p ng-translate="file(key)"></p>
Well, it all depends on the architecture of your application but I guess you could create a factory or service that will store data then simply inject that factory wherever needed.
If the data needs to be persistent, I would use something like localStorage. If it's a really small amount of data and your app cannot support HTML5, I would use cookies.
The more you elaborate the more accurate answer you will get.
Have look at the angularjs tutorial. It specifically address this issue.
First go though http://docs.angularjs.org/tutorial/step_05 where you include the json in controller.
Then follow http://docs.angularjs.org/tutorial/step_11 where it is moved to service.
$http.get() can be used to retrive data from REST urls as well.