Where to store resource files with Angular - angularjs

I've got a JSON file containing a list of time zones which I want to reference in my project, but I'm not sure of where I should store this.
I'm considering making a directory called /resources or /assets
Alternatively, I could store in /src/services, as this is kind of the data layer of my app. The one problem with this though is that this file is a JSON file and not actually a service...
Any opinions on where to store this kind of thing?

John Papa's guide is the best when it comes to code structuring: Please refer to this url: https://johnpapa.net/angular-app-structuring-guidelines/
It talks about where you should put certain files and components in your Angular project.

Related

How to store files in MongoDB using Node Js and AngularJs?

I am weak in coding so I am asking this type of question. I've read similar questions but could not find out the solution to my question.
All I want is to store the actual word or pdf file (and not links) in the MongoDB using NodeJs as backend and AngularJs as frontend.
I've read that GridFS is used for this but I could not figure out how!
Ok... Firstly you cannot save a file in MONGODB, only text. Thus what I do is save the path to the file. For example: src: "/uploads/pdfs/pdf1.pdf". Save the file in node JS using https://github.com/jacoborus/node-filesaver . Slim example of what I would do: http://pastebin.com/huvCknWb

How to get a true modular app in AngularJS and their include structure?

I've been messing around with Angular and i wanted to split all the files up according to their role in my app.
I want a folder for each "page" like /home or /products and take care of everything within their respective folder(It sounded like a great idea).
However, now i'm not sure how to approach loading these files in or even where to do it.
This is my current file structure:
Due to certain limitations im not able to use other helpful tools, this needs to happen in the code directly.
What would be the best way to approach this?
1st part of your question:
There's no default way to organise your angular app.
However, there are some guidelines. I keep thanking myself for reading the Angular 1 app-structuring-guidelines by John Pappa which enlightened me on the same question you are asking.
At the moment, I have organised all my apps in a folder-by-functionality apprach rather than a folder-by-type one (i.e. all controllers in a controllers folder, all services in a services folder,etc).
2nd part of your question:
Just use Gulp or Grunt and then import the single file in your index
The Web is getting more and more component oriented, now all the most famous frontend frameworks adopt a reusable component policy (React and Angular 2 relies heavily on it)
If you want your angular app to be as modular as possible, you have to put everything regarding a component in a separate folder (html templates,css styles and js logic),and split the shared logic between services and assets
In Your case an example of project structure could be:
app/
assets/
//put here images,fonts and shared styles
services/
apiService.js
utilsService.js
etc etc ...
components
home/
home.js
home.css
home.html
products/
products.js
products.css
products.html
etc etc/...
index.js
index.html

Read property file on both java and angularjs

I'm using a properties file in project. I want to read the properties file both java and angularjs. suggest me a best location to place the properties file which can accessible by java and also by angularjs.
By design it should be src/resources folder.
Well by opportunity, it can be placed in webapp too.
From what I know angularjs is meant to execute on browser. I do not recommend downloading properties into browser as web assets similar to css/js. So I would recommend keeping properties in src/main/resources/. If you need, host a small rest end point giving these properties as a json map in response. This can be used by angularjs on client side(browser)
Ideally properties which have confidential information shoild never be sent to browser.
Any one can get access to those information by debugging in tools like chrome,etc.
Sending such information should not create problems for your system. In those cases you shld hv 2 properties in src/ resources folder. One contains db passwords etc. Other with open information.

ANGULAR JS - Share data between pages - undefined

I'm currently trying to build an analytics application using Javascript and angularJs.
However I'm having a few problems.
I just have two simple pages and one controller in each one. I tried to share data between these pages using a simple service. The first page is in charge of analyzing multiple csv files and building javascript objects, and the second to iterate through this data to display charts and tables.
However when I'm moving from the "anaylzer" page to the "displayer" page and since the JS files are refresehed, everything is flushed adn I loose the data I recorded inside my service...
I already have a look to a few storing modules like http://www.jstorage.info/, but the data objects I'm building are big (csv files are about 100 000 lines each...)
Do you have any idea ? Maybe I'm not using the right angular JS philosophy ?
Do not hesitate to tell me to put the piece of code I've written.
Thank you a lot in advance,
Angular is primarily tailored for producing single-page applications, but you could look into following alternatives for sharing data among few tabs (pages):
Local Storage - http://diveintohtml5.info/storage.html
File System API - http://www.html5rocks.com/en/tutorials/file/filesystem/
I have been using 1) with great success, but it's designed for storing small amounts of data.
angular is for single page application.
you should use ajax to pull your data from server.
Don't refresh your page.
there is a example how angular change view.
checkout https://docs.angularjs.org/api/ngRoute/service/$route

Customize the Loader for a MVC App

I need to use a customize path for the Ext.Loader in my MVC project. I've already looked through the API and found nothing useable. If I set the loader directly it gets simply overriden, as it seems by the MVC app settings. So how can I customize the loader path for a MVC app?
In addition: It would be awesome if the loader could be tweaked to sumarize multiple requirements that occours by the same source into one request. Would that be possible?
Thanks in advance for any suggestions
Edit
The loader by default calling something like app/controller/MyController.js or app/store/MyStore.js
My goal is to modify this path like load/data/app/controller/MyController or better load/data?ident=app.controller.MyController or best request via JSON
Edit 2
Thanks for all reply! I looked again into the sourcecode of the Ext.app.Application but I could not find where the loader get initialized. Yes, I found the appFolder property but not where it is used. And my Problem with the appFolder approach is, that I can't use routes because of the applied GET param. So guess the best is to modify the Ext.Loader, isn't it? Or is the loader capable of loading entire namespaces?
You can set the 'appFolder' config property in your application if you need to change the root relative to the website.
For example, if you have www.mysite.com but you want to store you .js files in www.mysite.com/scripts/ext/ you could do something like this:
Ext.application({
name: 'MySite',
appFolder: '/scripts/ext'
});
Not sure if that's quite what's being asked here, but might give you a start point.
I guess what you are trying to archive is not possible without many modifications. You have to change the loader for that so that it fit your request needs. I think you may go better to define some routes in your backend and use the approach #dougajmcdonald wrote. I think you will endup in nearly the same.
But you should note that it is much faster when you let Webserver fetch the files then doing it per code.

Resources