I am working on an Ionic phone app using AngualrJs as the framework. Now I faced an issue. I don't want my app to send an HTTP request to my backend(which use Ruby on Rails) API to do a manual test.
So I'm wondering what's the best practice to pass a mock JSON data as a response when I want to call the API.
I'm not familiar with Angular and Ionic, I can find some tutorials on both sides but I don't know what's is the best practice if use them together.
You can either store the data in localStorage after the first hit and read the data from localStorage every-time whenever you need.
https://medium.com/#petehouston/awesome-local-storage-for-ionic-with-ngstorage-c11c0284d658
Or you can use
$httpBackend
https://docs.angularjs.org/api/ngMock/service/$httpBackend
by saving json files locally and injecting them back when the application tries to hit the network . One limitation here, you cannot update the json file later after the user have installed the application.
So, localStorage is preferred if you want to cache the data you have received from network.
Related
In my Angular SPA, there's some data loaded from the backend that is used throughout the application. This data doesn't change while the app is in use, so to keep things slick for the users I'd like to only load this data once. I can see two possible solutions here:
Load the data when the app is first initialised and attaching it to $rootScope using angular.module.run()
or
The first controller to need the data loads it, and then puts it... somewhere... where everything else can get to it.
Which approach is the "most Angular" way to do this, and how would I start to implement it? Most of the questions on SO seem to be about loading data with the controller rather than when the app itself starts. I'm using 1.4.7 with UI Router if that makes a difference.
You could implement a service which has been sugested by others and ALSO make the service load the data in a lazy way. (Lazy loading pattern described here: https://en.wikipedia.org/wiki/Lazy_loading)
Hi I am new to angularjs. At the start of the app I need to hit the API and store some data in the client side so that it should be accessible across all the controllers and also in config.
Can you please suggest whats the best approach.
Here is what I have tried:
Service: My issue with it is every time I call , it will call the API.
I want to call only once and store it. I am fine with calling on page refresh.
Value: Cannot be accessed in config.
Thanks.
You can store data in angular js localstorage.
Ypu can add data in localstorage and get them anywhere in the app , also if you want ,you can remove from localstorage also.
Example
localStorage.setItem('test', data.item);
localStorage.getItem('test')
localStorage.removeItem('test');
If a users adds a new document to a collection in MongoDB, I want to listen to that change and reflect that newly entered document on a page using AngularJS without requiring the page to get reloaded again. Just like it happens in gmail or stackoverflow.
Could somebody tell me if its possible to be done using AngularJS.
I know $scope.$watch could read for changes in a scoped model in a form field.
Could somebody guide me on how it could be done, if it could be done using AngularJS?
I am using NodeJS, MongoDB, Mongoose, ExpressJS and AngularJS in my application.
For this you will probably have to use a socket connection between the server and the client, and it is not related to which JavaScript framework you are using. Sure you can implement the client-side with Angular.js (or any JavaScript framework), but you will also have to handle this in the server-side.
If you are using node.js as a server, and you want to support older browser versions, consider to use socket.io which allows you to easily establish sockets.
If not, you can use HTML5 websockets, read about it hear.
Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.
I would like to know what is the proper way to get data from backend when I want to use angularJs (or similar) in my web app?
The only way I see is to render html (static html with js scripts - e.g. angularjs) with no data from backend and then download data via ajax requests from my backend API. But I think this solution is not good because of many HTTP requests:
For example I have blog website, I want to show a post, comments, and the related posts on the sidebar. So probably I need to make at least 3 HTTP requests to get the data unless I will prepare API to get all I need in one request.
I can also imagine websites that could have much more HTTP requests. Is it a proper way to do this? Doesn't it overload a server? Or my way of thinking is so wrong?
It is either websockets or HTTP requests. Preparing API to get all in one request is one option. Another two options are XMLHttpRequest/iframe streaming which is a method of a technique known as Comet.
I would go with websockets since it is supposed to solve the problem that was previously solved with weird applications like iframe streaming. There are libraries that properly handles fallbacks if the browser does not support websockets:
web-socket-js ( this needs a websocket server )
Socket.IO ( this has a node.js module and also implements a kind of unnecessary protocol on top of websocket protocol )
If you choose the old methods there will be many problems waiting for you on the road like XmlHttpRequest.responseText while loading (readyState==3) in Chrome
I think you have to distinguish two cases:
You render the page for the first time.
You update parts of your page when something changes
Of course in the second case it makes sense to fetch only parts of the page via individual HTTP requests. However, in the first case you can simply serialize your complete model as one JSON object and embed it in the page like this:
<script type="text/javascript">
var myCompleteModel = { /* Here goes your model */ };
<script>
The controllers of the components on your page can then access this global variable to extract the parts being relevant for them. You can also wrap access to the initial model in a service to avoid accessing a global variable in all your controllers.